HTML5 Audio using Javascript

Question

I've created my own HTML 'music player', which when the play button is pressed, it calls the Javascript function to play the track. For some reason, I cant get this working in my example, but have been able to do it with others - I cant figure what's wrong with this.

HTML:

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

Javascript:

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

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

I can assure you that the /music/Bruiser.mp3 file exists in the stated directory and plays fine in general.

My understanding is that, when the button is clicked, the playTrack() function should be called, which should run Track.play() and play the track, but I cant get it to work. Any ideas why, other than my own ignorance?

I dont think the CSS is relevant so I wont bother posting it here, though I have created a JSFiddle here. This might be somewhat pointless, since I havent linked the audio, however hopeful it gives a better idea of how this hangs together.

NOTE: The JSFiddle makes the play button tiny, however you will see it is there once clicked.

@HovercraftFullOfEels, Apologies, Javascript - thanks for pointing out! — devklick
– devklick, Commented Jan 10, 2017 at 22:00

Loaf · Accepted Answer · 2017-01-10 22:16:13Z

1

I updated your Fiddle. I did two changes

Moved the onClick event to inside the JavaScript file.

var button = document.getElementById("play-button");

Corrected the Audio ID

<audio id="MyTack"> to <audio id="MyTrack">

Oh... also added audio there to test.

edited Jan 10, 2017 at 22:16

answered Jan 10, 2017 at 22:07

Loaf

3,3102 gold badges18 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

devklick Over a year ago

Thanks, but your updated Fiddle doesnt seem reflect the changes you state you have made, which is a little confusing. Can you please explain more on moving the OnClick event? Can't believe the typo though, shame on me! Thanks again. Oh, also your Fiddle doesnt seem to play audio on Firefox or Edge.

devklick Over a year ago

Your fiddle works nicely, however I'm still struggling to get these changes to work on by website. I'll give it another go tomorrow and update this post with the results. Thanks for your help.

Loaf Over a year ago

Inside your function, add console.log("Inside playTrack()"); So you know if that function got called. Also look at the Console for any error messages that may help.

devklick Over a year ago

Thanks @Loaf, think the problem was my JS script being called at the top of my HTML, resulting in the following error: Unable to get property 'addEventListener' of undefined or null reference. I found [this] (stackoverflow.com/questions/24265385/…) link which pointed this out to me, and after moving the script to the bottom of the body this now works as expected. Thanks again.

Collectives™ on Stack Overflow

HTML5 Audio using Javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related