您如何使用JavaScript将多个来源用于音频按钮

Question

 $(document).ready(function() { var audioElement = document.createElement('audio'); $('#play').click(function() { audioElement.play(); }); }); 

 <script src="http://example.com/wp-content/playsounds.js"></script> <button id="play" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> Button </button> 

我有一个音频元素的多个来源的问题。

我在单击按钮时使用jQuery播放音频文件中了解了一种使按钮可使用javascript 播放的好方法

问题是我需要在同一页面上使用多个不同的源/播放按钮，以用于许多不同的页面。

一个解决方案似乎为每个页面甚至每个按钮都有一个单独的.js文件，但是我知道必须有一个通过html或css的简单解决方案。

基本上，在我的页面上，我希望能够具有各种不同声音的按钮，并且只需为每个声音放置一个简单的src或source标签以及声音文件的地址。

我还在按钮上使用Material Design lite。

我当前在网站上的代码如下所示

Answer 1

在您所参考的示例中，音频元素是动态创建的，是否有任何特定原因要这样做？ 通常，页面中可以包含任意数量的音频元素：

<audio id="audio1" src="http://www.soundjay.com/misc/sounds/bell-ringing-05.mp3"></audio>
<audio id="audio2" src="http://www.soundjay.com/misc/sounds/bell-ringing-03.mp3"></audio>
<audio id="audio3" src="http://www.soundjay.com/misc/sounds/bell-ringing-04.mp3"></audio>


<button data-id="audio1" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Play audio 1
</button>

<button data-id="audio2" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Play audio 2
</button>

<button data-id="audio3" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Play audio 3
</button>

一种方法是通过为按钮提供“绑定”每个数据元素的属性data-id，该属性具有与音频id相同的值。 然后使用jQuery（尽管我鼓励您使用纯JS）：

  $('button').on('click', function(){
    var audioId = $(this).data('id');
    $('#' + audioId).get(0).play();
  })

但实际上，这取决于您要执行的操作。 笔在这里