为页面上的所有音频标签添加播放按钮

Question

我想为页面上的每个音频文件添加一个播放按钮。因此，我在每个音频标签下添加了一个带有索引类名的按钮，但现在我不知道如何继续并将点击事件绑定到按钮。总的来说，也许有一种更优雅的方法……

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<audio id="myaudio" src="http://www.soundjay.com//mechanical/gun-cocking-01.mp3">
</audio>

<audio id="myaudio" src="http://www.soundjay.com//mechanical/gun-cocking-02.mp3">
</audio>

$( "audio" ).each(function( index ) {
   $( '<button class=audioButton"' + index + '">Play Clip #' + index + '</button>' ).insertAfter( this );
});

$("button").on("click", playTest);

Answer 1

因为按钮是动态创建的，所以您必须委托要在其上执行的任何事件。

希望这段代码有用

$( "audio" ).each(function( index ) {
   $( '<button class="audioButton' + index + '">Play Clip #' + index + '</button>' ).insertAfter(this );
});

$("body").on("click","button" ,playTest);
function playTest(){
 alert($(this).prop('class'))

}

JSFIDDLE

Answer 2

我注意到您使用了多个相同值的 ID（永远不会起作用），所以我删除了它们。我使用之前的海报代码来创建按钮，但已详细说明如何在 playTest 函数中调用每个音频。希望这对您有所帮助！

$("audio").each(function(index) {
  $(this).attr('id','myaudio' + index);
  $('<button id="audio' + index + '">Play Clip #' + index + '</button>').insertAfter(this);
});

$("body").on("click", "button", playTest);

function playTest() {
  var audid = 'my'+ $(this).attr('id');
  playAudio(audid);
}

function playAudio(str) {
  var currAudio = document.getElementById(str);
  if (currAudio.paused) {
    currAudio.play();
  } else {
    currAudio.pause();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<audio src="http://www.soundjay.com//mechanical/gun-cocking-01.mp3">
</audio>

<audio src="http://www.rachelgallen.com/monkey.mp3">
</audio>

为页面上的所有音频标签添加播放按钮

Adding play buttons for all audio tags on a page

javascript

audio

jquery

html5-audio