Question

我在页面上的href中有三个音频链接，如下所示 -

<a href="https://s3.amazonaws.com/tuneables/Guided+Activities+Sounds/Do+bell.mp3" class="sound" title="D above middle C" target="_blank" style="color: rgb(5, 134, 209);">Do</a>

<a href="https://s3.amazonaws.com/tuneables/Guided+Activities+Sounds/Mi+bell.mp3" class="sound" title="F# above middle C" target="_blank" style="color: rgb(5, 134, 209);">Mi</a>

<a href="https://s3.amazonaws.com/tuneables/Guided+Activities+Sounds/So+bell.mp3" class="sound" title="A above middle C" target="_blank" style="color: rgb(5, 134, 209);">Sol</a>

现在我想在同一页面上播放Html5音频中的所有这三个音频，而无需在点击时重定向到href链接。所以我写了这个Jquery代码 -

<script type="text/javascript">
      $j(document).ready(function() {   
            $j('.sound').click(function(event) {

                        var str =this.href;
                        var sound='<audio class="audio" controls><source src="'+str+'" type="audio/ogg"><source src="'+str+'" type="audio/mpeg"></audio>'; 
                        $j(sound).trigger('play');
                        return false;
          });
       });  
</script>

但此代码在点击任何音频链接时执行三次，然后同时播放该音频三次。我想只播放一次音频。

我希望有人能理解我的问题并帮助我。

先谢谢。

Answer 1

试试这个（在那里添加event.stopImmediatePropagation（））

<script type="text/javascript">
      $j(document).ready(function() {   
            $j('.sound').click(function(event) {

                        var str =this.href;
                        var sound='<audio class="audio" controls><source src="'+str+'" type="audio/ogg"><source src="'+str+'" type="audio/mpeg"></audio>'; 
                        $j(sound).trigger('play');
                        event.stopImmediatePropagation()
                        return false;
          });
       });  
</script>

点击功能多次运行

1 个答案: