如何防止使用jQuery同时播放多个音频文件？

Question

我是html / js领域的一个新手。 我需要用17张图片创建一个非常基本的界面。 每单击一次，就会播放给定的声音。

经过几天的修补和寻找正确的方法，我设法创建了一种行之有效的方法，看起来不错，但存在一个小问题。

触发一个音频样本后，单击另一张图片应停止并重置上一张。 我在此站点上找到了很多示例，但是我对js语法的了解很少，我无法正确实现。

多谢您的协助。

这是我所拥有的：

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
    $('#track1').click(function() {
        $('#1').append('<embed id="1" src="content/mp3/01.mp3" autostart="true" hidden="true"></embed>');
    });
});
</script>
<img name="track1" src="content/img/01.jpg" width="180" height="180"   border="0" id="track1" alt="" />
<div id="1">&nbsp;</div>

非常感谢您的帮助。

Answer 1

我从与您链接的帖子中整理了一些内容。 尝试一下，看看是否可以播放和停止音频。

 $(document).ready(function() { var audioElement = document.createElement('audio'); audioElement.setAttribute('src', 'content/mp3/01.mp3'); $('#track1').click(function() { audioElement.pause(); audioElement.currentTime = 0; audioElement.play(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img name="track1" src="content/img/01.jpg" width="180" height="180" border="0" id="track1" alt="" /> <div id="1">&nbsp;</div> 

Answer 2

也许，更清楚地说，我发布了更多的代码。 整个站点由完全相同的“模块”相乘17次组成。 它看起来如下：

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track4').click(function(){
$('#4').append('<embed id="4" src="content/mp3/04.mp3" autostart="true"     hidden="true"></embed>');
});
});
</script>
<img name="track4" src="content/img/04.jpg" width="180" height="180"  border="0" id="track4" alt="" />
<div id="4">&nbsp;</div>   

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track3').click(function(){
$('#3').append('<embed id="3" src="content/mp3/03.mp3" autostart="true"  hidden="true"></embed>');
});
});
</script>
<img name="track3" src="content/img/03.jpg" width="180" height="180"    border="0" id="track3" alt="" />
<div id="3">&nbsp;</div>