HTML5 音频使用 Javascript

Question

我创建了自己的 HTML 'music player'，当按下播放按钮时，它会调用 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 here。这可能有点毫无意义，因为我还没有链接音频，但希望它能更好地说明这是如何联系在一起的。

注意：JSFiddle 使播放按钮很小，但是您会在单击后看到它。

Answer 1

我更新了你的Fiddle。我做了两个改变

将 onClick 事件移动到 JavaScript 文件中。

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

更正了音频 ID

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

哦...还添加了音频来测试

HTML5 音频使用 Javascript

HTML5 Audio using Javascript

html

javascript

audio

jsfiddle