MP3-Player in JavaScript

Question

Would somebody be so kind to tell me what I did wrong? I want to create a mp3-player with css, html and javascript. The only thing the script does at the moment is to start or to stop the audio-file. The problem is, that I always get an error.: TypeError: document.getElementById(...) is null; But I don't know why. Thank you very much for your help!!!

Script:

<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>

This has very probably been answered before on SO. Simplest way to solve this is to add [`async`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Attributes) to your `script` tag or move the script at the bottom of the page. — Kyll, Jul 14 '15 at 18:56
Remove the '#' from your `getElementById` calls. Example: `document.getElementById('listen')`. — Mike Cluck, Jul 14 '15 at 18:57
did you also remove the one from `document.getElementById('#control')` ? — WWZee, Jul 14 '15 at 19:00
possible duplicate of [load and execute order of scripts](http://stackoverflow.com/questions/8996852/load-and-execute-order-of-scripts) — Kyll, Jul 14 '15 at 19:02
I'll try my hand at clarifying some previous comments :) In your example, the code is read and executed in the same order it's written. Therefore, your ` — Tyler Roper, Oct 30 '18 at 02:50

Maximillian Laumeister · Answer 1 · 2015-07-14T19:12:44.337

4

According to this stackoverflow answer, best practice is to put your scripts at the end of the body tag to avoid timing problems like this. Here's how you should change your code:

<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>

The reason it wasn't working before is that web pages get parsed from top to bottom, including scripts, so your button didn't exist by the time your script executed, which is why your script couldn't find it. Additionally, when you use getElementById, you need to call it without using the hash.

edited Jul 14 '15 at 19:12

answered Jul 14 '15 at 18:57

Maximillian Laumeister

19,884
8
59
78

You're welcome! Not sure why my answer got 3 down votes, it seems to be the only one that works. – Maximillian Laumeister Jul 14 '15 at 19:01
@user4825080 Don't forget to click the checkmark next to one of the answers to mark it as the accepted answer! – Maximillian Laumeister Jul 14 '15 at 19:03
Ohhhhhhhhhhhhhhhhh sry I forgot, but at the moment it tolds me, that I have to wait 3 minutes until I can do that – ghnome Jul 14 '15 at 19:05
it probably got down voted (not by me) because this is just a variant of a question that has been asked 1000 different ways and neither explains why it works or why it is considered "best practice" nor any of the many different alternatives that would work, preferably by linking to existing questions/answers. – technosaurus Jul 14 '15 at 19:10
@technosaurus Thank you for the explanation, still learning the ropes here. – Maximillian Laumeister Jul 14 '15 at 19:11

MP3-Player in JavaScript

1 Answers1