点击功能是运行次

Question

我在如下页面的 href 中有三个音频 link-

<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 link。所以我写了这个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>

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

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

提前致谢。

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>

点击功能是运行次

Click function is running many times

jquery

html5-audio