你如何使用音響按鍵多源使用javascript

$(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>

我有一個關於音頻元素多個來源的問題。

我讀一個好辦法，使按鍵可玩用JavaScript在Play an audio file using jQuery when a button is clicked

的問題是我需要多個不同的源/播放按鈕在同一頁上，對許多不同的頁面。

一個解決方案似乎每個頁面甚至每個按鈕都有一個單獨的.js文件，但我知道必須通過html或css有一個簡單的解決方案。

基本上，在我的頁面上，我希望能夠擁有各種不同聲音的按鈕，並且只需放置一個簡單的src或源標籤以及每個聲音文件的地址即可。

我也使用Material Design lite作爲我的按鈕。

我在我的網站當前的代碼看起來像這樣

來源

2017-06-22 Timothy Vail

在你指的是，音頻元素的例子是動態創建的，有沒有你想要做的任何具體的原因是什麼？

<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>

一種方式是「綁定」一個按鈕，每一個音頻元素，通過給數據的ID爲後者的屬性：一般情況下，當你在一個頁面願意，你可以有儘可能多的音頻元素與音頻ID相同的值。然後使用jQuery（雖然我會鼓勵你使用純JS）：

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

但實際上，這取決於你正在嘗試做的。筆here

來源

2017-07-11 16:11:48

這真是太好了，正是我在找的東西！謝謝你Kostas！ –

Np，請將此標記爲接受的答案。 –

你如何使用音響按鍵多源使用javascript

回答

相關問題