如何正確地將我的嵌入式音頻和JavaScript轉換爲HTML5音頻？

目前我正在使用嵌入式標籤和javascript的舊技術在我的網站上使用聲音。我想將這些轉換爲HTML5，但我沒有成功做到這一點。如何正確地將我的嵌入式音頻和JavaScript轉換爲HTML5音頻？

這是代碼我在此刻：

HTML：

<div class="au"> 
    <embed src="audio/tileSelect.wav" autostart="false" width="1" height="1" hidden="true" id="sound1" enablejavascript="true"> 
    <embed src="audio/tileRemove.wav" autostart="false" width="1" height="1" hidden="true" id="sound2" enablejavascript="true"> 
</div>

JS：

//Sounds 
function playSound(soundobj) { 
    if (document.getElementById('sound').checked) { //if this checkbox is checked, play sounds 
     var thissound=document.getElementById(soundobj); 
     thissound.Play(); 
    } 
}

JS在其他功能用於觸發的聲音：

playSound('sound1'); 
playSound('sound2');

所以所有的一個博夫作品。現在將其轉換爲HTML5。 HTML部分是容易的，我想應該是這樣的：

HTML5：

<!--HTML5 audio--> 
<audio id="sound1" preload="auto"> 
    <source src="audio/tileSelect.wav" type="audio/wav" /> 
</audio> 
<audio id="sound2" preload="auto"> 
    <source src="audio/tileRemove.wav" type="audio/wav" /> 
</audio>

但JS部分，我有點卡住了。任何人都有這個想法？試圖改變soundobj爲soundid，但沒有運氣。

非常感謝，莫里斯

來源

2012-04-17 Maurice

有與已發佈的代碼的兩個問題。

第一個將是可能應該這樣寫的，而不是標記：

<audio id="sound1" src="audio/tileSelect.wav" preload="auto"></audio> 
<audio id="sound2" src="audio/tileRemove.wav" preload="auto"></audio>

你使用不記錄任何地方的<video>樣源符號（雖然我不得不承認，它不感覺錯了 - 不過話又說回來我從來沒有使用HTML5音頻還），見MDN documentation

編輯：顯然它的確定使用source元件內部audio元素：

允許內容：透明內容，包含任一個src 屬性或一個或多個元件，接着爲無論是流動內容或措辭內容，沒有或元素。

參見：https://developer.mozilla.org/en/HTML/Element/audio

不過你並不真的需要它在你的情況，你只需要一個源文件。

其次的問題是，你正在使用.Play()（資本P）的一個不存在的方法，那應該叫.play()。所以你的JS應該看起來像：

function playSound(soundobj) { 
    if (document.getElementById('sound').checked){ 
     document.getElementById(soundobj).play(); 
    } 
} 
playSound('sound2'); //should play 'audio/tileRemove.wav'

來源

2012-04-17 12:21:31 m90

感謝這個工程，雖然在Safari中，sound1（一個很短的聲音）沒有播放，而它在Chrome中。認爲這是一個Safari問題？另外，如果sound2沒有完成播放，當播放的觸發器被啓動時它將不會播放（或者，如果我在sound2之後立即播放sound1，則非常軟）。如果聲音結束播放，則沒有問題。有沒有解決方法？也許這是由於.wav格式，所以我也會爲.ogg嘗試。再次感謝 – Maurice 2012-04-17 15:23:18

@Maurice我認爲mp3應該是沒有任何問題的格式，但按照我的經驗，重錄音頻是相當溫和的 – m90 2012-04-18 07:56:27

如何正確地將我的嵌入式音頻和JavaScript轉換爲HTML5音頻？

回答

相關問題