使用Javascript的HTML5音頻

Question

我已經創建了自己的HTML“音樂播放器”，當按下播放按鈕時，它將調用Javascript函數來播放曲目。 出於某些原因，我無法在示例中使用此功能，但已經能夠與其他人一起使用-我無法弄清楚這是怎么回事。

HTML：

<div id="audioplayer">
    <button onclick="playTrack()" type="button" id="play-button" class="play" align="left"></button>

    <!--time line - for later use -->
    <div id="audiotimeline">
        <div id="audioplayhead" align="left"></div>
    </div>

    <!--Track -->
    <audio id="MyTack">
        <source src="/music/Bruiser.mp3" type="audio/mp3" />
    </audio>
</div>

Javascript：

var Track = document.getElementById("MyTrack");

function playTrack() {
    Track.play();
}

我可以向您保證，/music/Bruiser.mp3文件存在於指定的目錄中，並且通常可以正常播放。

我的理解是，當單擊按鈕時，應該調用playTrack（）函數，該函數應運行Track.play（）並播放曲目，但我無法使其正常工作。 除了我自己的無知之外，還有什么主意嗎？

我認為CSS不相關，因此盡管我在這里創建了JSFiddle，但我也不會在這里發布它。 因為我還沒有鏈接音頻，所以這可能有點沒有意義，但是希望它能更好地說明它們是如何掛在一起的。

注意：JSFiddle使“播放”按鈕很小，但是一旦單擊它，您將看到它在那里。

Answer 1

我更新了你的小提琴 。 我做了兩個改變

1. 將onClick事件移至JavaScript文件內部。

var button = document.getElementById("play-button");

2. 更正了音頻ID

<audio id="MyTack">到<audio id="MyTrack">

哦...還在那里添加了音頻進行測試。