Question

有人会这么好，告诉我我做错了什么吗？我想用css，html和javascript创建一个mp3播放器。脚本目前唯一做的就是启动或停止音频文件。问题是，我总是得到一个错误：TypeError：document.getElementById（...）为null; 但我不知道为什么。非常感谢你的帮助!!!

脚本：

<html>
<head>
    <meta charset="utf-8" />
    <title>Video | Audio</title>
</head>
<body>

    <script type="text/javascript">

    var hear = document.getElementById('#listen');
    document.getElementById('#control').addEventListener("click", function() {
        if(hear.paused) {
            hear.play();
        } else {
            hear.pause();
        }
    })


    </script>

    <audio id="listen" src="song.mp3">
        ERROR
    </audio>

    <button id="control">control</button>

</body>
</html>

Answer 1

根据this stackoverflow answer，最佳做法是将脚本放在body标签的末尾，以避免这样的计时问题。以下是您应该如何更改代码：

<html>
<head>
    <meta charset="utf-8" />
    <title>Video | Audio</title>
</head>
<body>



    <audio id="listen" src="song.mp3">
        ERROR
    </audio>

    <button id="control">control</button>

    <script type="text/javascript">

    var hear = document.getElementById('listen');
    document.getElementById('control').addEventListener("click", function() {
        if(hear.paused) {
            hear.play();
        } else {
            hear.pause();
        }
    })


    </script>

</body>
</html>

之前没有工作的原因是网页从上到下进行了解析，包括脚本，因此在脚本执行时你的按钮不存在，这就是你的脚本无法找到它的原因。此外，当您使用getElementById时，您需要在不使用散列的情况下调用它。

JavaScript中的MP3播放器

1 个答案: