JavaScript MP3 player

Question

JavaScript MP3 player

Could someone kindly point out where I went wrong? I am attempting to create an MP3 player using CSS, HTML, and JavaScript. Currently, the script only functions to start or stop the audio file. However, I keep encountering an error message: TypeError: document.getElementById(...) is null; Unfortunately, I'm unsure why this is happening. Thank you for any assistance!

Script:

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

    <script type="text/javascript">

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


    </script>

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

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

</body>
</html>

javascript html css

Answer 1

Answer №1

As mentioned in this stackoverflow post, a recommended practice is to place your scripts at the bottom of the body tag to prevent timing issues. Here's a revised version of 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>

Prior to this adjustment, the issue was that web pages are parsed sequentially, meaning elements may not have been created when a script runs. This is why your button could not be found by the script. Remember to use getElementById without the hash symbol when retrieving elements.

Answer 2

As mentioned in this stackoverflow post, a recommended practice is to place your scripts at the bottom of the body tag to prevent timing issues. Here's a revised version of 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>

Prior to this adjustment, the issue was that web pages are parsed sequentially, meaning elements may not have been created when a script runs. This is why your button could not be found by the script. Remember to use getElementById without the hash symbol when retrieving elements.

JavaScript MP3 player

Answer №1

Similar questions

Struggling to retrieve the dynamic select list information from HTML and pass it to PHP. Any suggestions or guidance would be greatly

Utilize Moment.js in AngularJS for formatting dates

Ways to update a ViewComponent using Ajax in Asp.net Core 3.1

CSS: Apply unique padding to the last element without the use of additional classes

Locate a specific option that matches the value of the selected data-status and set it as "selected" using jQuery

Issues with the background-image scroll feature not functioning as intended

Unlocking the Secret: How to Bind a Global Touch Event Handler in Angular 4 to Prevent iOS Safari Page Drag

Managing email delivery and responses within Nextjs server functions using Nodemailer and React Email package

Troubles with Installing CRA and NextJS via NPM (Issue: Failure to locate package "@babel/core" on npm registry)

Angular Universal causes SASS imports to malfunction

Optimize my webpage for a specific location

Mastering the Art of Incorporating jQuery, JavaScript and CSS References into Bootstrap with ASP.NET WebForms

What is the best way to sort ISO DateTime objects that fall outside of a particular time frame?

Failure encountered when attempting to load JSON data into datalist

Facing an issue with Heroku deployment where a React/Express app is encountering a 'Failed to load resource' error in the console while requesting the chunk.js files

Display my additional HTML content on the current page

The Ajax validation form mistakenly redirects the echoes to a different page instead of the intended page for displaying the output

Is there a solution to resolving the type error that I am unable to identify?

Tags that adhere to W3C compliance for struts

Set the android camera resolution to a lower setting automatically when a user attempts to upload a file from their browser