How and where do I define JavaScript functions for a custom audio player?

Question

I want to include a custom audio player in a web page following this guide .

The HTML is

<audio id="music">
    <source src="song.mp3" type="audio/mpeg" />
</audio>
<div id="audioplayer">
    <button id="pButton" class="play" onclick="play()"></button>
</div>

The Javascript is

window.onload=function() {
    var music = document.getElementById('music');
    var pButton = document.getElementById('pButton');
}

function play() {
    if (music.paused) {
        music.play();
        pButton.className = "";
        pButton.className = "pause";
        //alert("This happens");
    } else {
        music.pause();
        pButton.className = "";
        pButton.className = "play";
    }
}

The variables 'music' and 'pButton' are wrapped in a window.onload function because the DOM must be loaded for their elements to be defined (it's an error otherwise).

This code displays a "Play" button at the correct place in the page, but it does not work. If I press the button, the page just reloads. No music is played. I don't understand it, but I believe it's something along this lines of this question because if I include the commented alert in the code above, the code works and the music plays as long as the alert modal is active.

In the linked question, the solution is to wrap the function play() in the standard window.onload function, too. When I do that, however, pressing the "Play" button fails with a "ReferenceError: play is not defined" error in the console. This, at least, makes sense: by putting play() in the window.onload function, it exists when the DOM is finished loading, but it isn't available after that for further page events.

So, to sum up,

1) The code does not work if I put play() outside the window.onload wrapper

2) The code does not work if I put play() inside the window.onload wrapper

In the standard non-quantum approximation of JavaScript, these are the only two places play() can be. How do I implement a custom audio player, then?

Answer 1

music and pButton are local to the onload function, so that you cannot access them outside it.

I recommend to define the play function inside the onload handler, and add it dynamically as the onclick handler.

You can also replace onload with DOMContentLoaded , which fires earlier, but does what it should:

document.addEventListener('DOMContentLoaded', function() {
    var music = document.getElementById('music');
    var pButton = document.getElementById('pButton');
    pButton.addEventListener('click', function play() {
        if (music.paused) {
            music.play();
            pButton.className = "pause";
            //alert("This happens");
         } else {
             music.pause();
             pButton.className = "play";
        }
    }
})

<audio id="music">
    <source src="song.mp3" type="audio/mpeg" />
</audio>
<div id="audioplayer">
    <button id="pButton" class="play"></button>
</div>