CODEWITHSUNDEEP
javascripthtmlaudiojsfiddle
devklick
devklick

Reputation: 2619

HTML5 Audio using Javascript

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.

Upvotes: 0

Views: 644

Answers (1)

Loaf
Loaf

Reputation: 3260

I updated your Fiddle. I did two changes

  1. Moved the onClick event to inside the JavaScript file.

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

  1. Corrected the Audio ID

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

Oh... also added audio there to test.

Upvotes: 1

Related Questions