javascript - 使用 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 here 。这可能有点毫无意义，因为我还没有链接音频，但希望它能更好地了解这是如何结合在一起的。

注意:JSFiddle 使播放按钮变小，但是单击后您会看到它就在那里。

Answer 1

我更新了您的Fiddle 。我做了两处改变

1. 将 onClick 事件移至 JavaScript 文件内。

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

更正了音频 ID

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

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