html5音频：点击播放，再次点击以暂停几条曲目

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属性和.pause()方法，将它视为音频对象。此代码段包含一个<audio>元素和一个3 <img> s的列表。每个<img>具有对应于mp3的文件名的id。无论<img>被点击确定哪个3个动作之一的<audio>将执行：

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>