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>

一种方法是＆＃34;绑定＆＃34;带有按钮的每个音频元素，通过为后者提供data-id的属性，该属性与音频id具有相同的值。然后用jQuery（虽然我鼓励你使用普通的JS）：

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

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

如何使用javascript将多个音源用于音频按钮

1 个答案: