您如何使用 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.[=14= 提供一个简单的解决方案]

基本上，在我的页面上，我希望能够有各种不同声音的按钮，并且只需为每个按钮放置一个简单的 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

您如何使用 javascript 的音频按钮的多个来源

How do you use multiple sources for audio buttons with javascript

javascript

html

css

audio

material-design-lite