javascript - html5 音频 : Click to Play, 再次单击以暂停多个轨道

Question

我在一个 div 中有四个元素(在本例中为人物图像)，每个元素都有自己独特的关联 mp3 文件。我的目标是:

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

如果您再次单击同一元素，则会暂停该 mp3 文件

如果您再次单击同一元素，它将恢复该 mp3 文件 等等等等

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

然后，如果您返回到原始元素或新元素，则轨道会再次从头开始。

到目前为止，我点击任何元素都会从头开始播放关联的 mp3。

您可以在第一段“我们为什么在这里......”下看到我的开始

<强> 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将其视为音频对象。属性(property)和.pause()方法。此片段具有一个 <audio>元素和 3 的列表 <img> s。每个<img>有一个 id对应于 mp3 的文件名。无论如何<img>单击确定<audio> 3 个操作中的哪一个将执行:

1. 播放时src匹配path (第 6 行)
2. 暂停当 src匹配path (第 8 行)
3. 停止，更改 src , 加载 src ，播放时src和path不匹配(第 10 行)

片段

$('#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<audio id='player' src=''></audio>
<ul id='control'>
  <li>
    <img id='s1xI45JbPVzM' src='http://placehold.it/50x50/000/fff?text=10'>
  </li>
  <li>
    <img id='s1czfdPRs0MC' src='http://placehold.it/50x50/00f/eee?text=11'>
  </li>
  <li>
    <img id='s1NWg457fVWy' src='http://placehold.it/50x50/0e0/111?text=12'>
  </li>
</ul>