使用Javascript播放音頻元素（html5）

Question

我正在試圖弄清楚如何觸發從javascript播放音頻。 我有一些html看起來像：

<div class='audio' >foo
<audio preload='auto' controls src='test.wav'>
<b>Your browser does not support the audio tag.</b>
</audio>
</div>

而我正試圖觸發它：

$(document).ready(function () {
    $('.audio').each(function(){
        var audio = $(this).find('audio').get();
        $(this).click(function(){
            audio.volume = 100;
            alert('1 '+audio);
            audio.play();
            alert('2');
        });
    });
});

警報（'1'+音頻）; 按預期工作，並將音頻報告為HTMLAudioElement。 但警報（'2'）; 沒有被調用因為我得到錯誤'audio.play'不是一個函數。 我該怎么做才能解決這個問題？

Answer 1

你的代碼看起來很完美 你得到的錯誤是“alert.play”不是函數或“audio.play”不是函數。

我認為

var audio = $(this).find('audio').get();

返回一個數組試試這個

var audio = $(this).find('audio').get(0);

Answer 2

如果為音頻標簽提供ID，則使用JavaScript控制音頻而不使用jQuery會更容易：

<audio id="myAudioTagID" type="audio/mpeg" src="sound.mp3"></audio>

然后你可以簡單地獲取元素並應用.pause（）,. start（），stop（）：

var audio = document.getElementById("myAudioTagID");
audio.play();
audio.pause();
audio.stop();