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

Posted 2023-02-25

【中文标题】为页面上的所有音频标签添加播放按钮

【英文标题】：Adding play buttons for all audio tags on a page

【发布时间】：2016-06-18 12:01:12

【问题描述】：

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

<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);

【参考方案1】：

我注意到您使用了多个具有相同值的 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>

【参考方案2】：

由于按钮是动态创建的，因此您必须委派您想要在其上执行的任何事件。

希望这个 sn-p 有用

$( "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

【讨论】：

就是不知道怎么用你的sn-p来实际播放文件！

你写过playTest函数吗？

如果你能告诉如何编写 playTest 函数，我会很高兴的！