您如何使用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();
  })

但實際上，這取決於您要執行的操作。 筆在這里