Question

我在div中有四个元素（在这种情况下，是人物的图像），每个元素都有自己独特的关联mp3文件。我的目标是：

当您点击某个元素时，它会播放相关的mp3

如果再次单击相同的元素，它将暂停该mp3文件

如果再次单击相同的元素，它将恢复该mp3文件等等。

但是！如果单击另一个图像，它将播放与该元素关联的mp3文件。

然后，如果你回到原始元素或新元素，轨道将从头开始。

到目前为止，我有一个元素点击从头开始关联的mp3。

你可以在第一段＆＃34;为什么我们在这里看到我的开始......＆＃34;

https://erinreiss.github.io/spaceship1/

但基本上，我的jQuery如下，其中每个图像都有一类headshotsStatusQuo，每个图像和相关的mp3文件都是相同的。这样this.id变量为你单击的图像选择正确的mp3文件。

$(headshotStatusQuo).click(
    function(){
        var thisID = ("audio/" + this.id + ".mp3");
        console.log(thisID);    
            if (thisID.paused == false) {
                thisID.pause();
                } 
            else {
                changeTrack(thisID);
                 }      
    }
);

function changeTrack(sourceUrl) {
    var audioDues = $("#player");      
    $("#audioFill").attr("src", sourceUrl);
    audioDues[0].pause();
    audioDues[0].load();
    audioDues[0].play();
}

非常感谢你！

Answer 1

你有thisID字符串吗？然后，您使用.paused属性和.pause()方法将其视为音频对象。此代码段包含一个<audio>元素和一个包含3个<img>的列表。每个<img>都有id，对应于mp3的文件名。无论点击<img>，确定<audio>将执行的3个操作中的哪一个：

src

path

播放（第6行）

src

path

暂停（第8行）
停止，更改 src，加载 src，播放 { {1}}和src不匹配（第10行）

<强>段

path

$('#control').on('click', 'img', function(e) {
  var player = document.getElementById('player');
  var ID = $(this).attr('id');
  var path = 'http://vocaroo.com/media_command.php?media=';
  var SRC = path + ID + '&command=download_mp3';
  if (player.paused && (player.src === SRC)) {
    player.play();
  } else if (!player.paused && (player.src === SRC)) {
    player.pause();
  } else {
    player.pause();
    player.currentTime = 0;
    player.src = SRC;
    player.load();
    player.play();
  }
});

#control {
  list-style: none;
  cursor: pointer;
}

html5音频：点击播放，再次点击暂停多个曲目

1 个答案: