使用Javascript的HTML5音频

我创建了自己的HTML“音乐播放器”，当按下播放按钮时，它会调用Javascript函数来播放曲目。由于某些原因，我无法在我的示例中实现这一点，但我已经能够与其他人一起实现这一点-我无法找出这有什么问题

HTML:

我可以向您保证/music/brucer.mp3文件存在于指定的目录中，并且通常可以正常播放

我的理解是，当单击按钮时，应该调用playTrack（）函数，该函数应该运行Track.play（）并播放曲目，但我无法让它工作。除了我自己的无知，你知道为什么吗

我不认为CSS是相关的，所以我不会在这里发布它，尽管我已经创建了一个JSFIDLE。这可能有点毫无意义，因为我还没有链接音频，不管它有多大希望让我更好地了解这两者是如何联系在一起的

注意：JSFIDLE使“播放”按钮变得很小，但是单击后您会看到它在那里。

我更新了您的。我做了两个改变

将onClick事件移动到JavaScript文件内部

var-button=document.getElementById（“播放按钮”）

更正了音频ID
至

哦。。。还添加了音频以进行测试。
@HovercraftFullOfEels，抱歉，Javascript-感谢您的指点！谢谢，但是你更新的小提琴似乎没有反映出你所做的改变，这有点让人困惑。你能解释一下关于移动OnClick事件的更多信息吗？真不敢相信打字错误，我真丢脸！再次感谢。哦，而且你的提琴在Firefox或Edge上似乎不能播放音频。你的提琴工作得很好，但我仍在努力让这些更改在网站上运行。明天我会再次尝试，并用结果更新这篇文章。感谢您的帮助。在您的函数中，添加
console.log（“Inside playTrack（）”）这样您就知道该函数是否被调用了。另外，请查看控制台中可能有帮助的错误消息。谢谢@Loaf，我想问题是在HTML顶部调用了我的JS脚本，导致了以下错误：无法获取未定义或空引用的属性“addEventListener”。我找到了[这个]（）链接，它向我指出了这一点，在将脚本移动到正文的底部之后，它现在可以按预期工作了。再次感谢。
<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>

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

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