javascript - 你如何使用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>

我对音频元素的多个来源有疑问。

我在 Play an audio file using jQuery when a button is clicked 上读到了一个让按钮可以用 javascript 播放的好方法。

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

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

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

我的按钮也使用了 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>

一种方法是将每个音频元素与一个按钮“绑定(bind)”，方法是为后者提供一个与音频 id 具有相同值的 data-id 属性。然后使用 jQuery(尽管我鼓励您使用纯 JS):

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

但实际上，这取决于您要做什么。钢笔here