-3

I'm having some problems in my code. To begin, I would like for a song to play after a song I am playing ends (with the audio tag). 

<audio id="batmansong1">
  <source src="Songs/nanananabatman.m4a">
</audio>
<button id="play" onclick="document.getElementById('batmansong1').play()"><img src="Buttons/play.jpg" height="40" width="40"></button>
<button id="pause" onclick="document.getElementById('batmansong1').pause()"><img src="Buttons/pause.jpg" height="40" width="40"></button>

As you can see, the buttons will play or pause the first audio clip. However, I want them to also pause and play the second audio clip when it starts playing.

IStoleThePies
  • 27
  • 5
  • WHat have you tried ? The code you have currently will only play the song once when the button is clicked. – stackErr Feb 12 '14 at 17:01
  • The code I pasted would help you play sound. Please be clearer with your question. – skliz4rel Feb 12 '14 at 17:07
  • 2
    possible duplicate of [HTML5 audio playlist - how to play a second audio file after the first has ended?](http://stackoverflow.com/questions/9326288/html5-audio-playlist-how-to-play-a-second-audio-file-after-the-first-has-ended) – Quentin Feb 12 '14 at 17:09
  • I've tried using Jquery and adding $("#play").click(function(){ $("body").append(""); }) However, no sound from the second file came out. – IStoleThePies Feb 12 '14 at 17:25

2 Answers2

0

Your buttons will still be working when doing this. You can add an eventlistener that checks if te <audio> element ended playing. Then you just set the next source and start playing again. (BTW you'd better not use inline javacript and old html styling (I mean width="40" and such, just use CSS))

all the code below is in this jsfiddle

JS:

player = document.getElementById('batmansong1');
player.addEventListener('ended', function () {
    if (player.src == 'link/to/your/next/file.m4a') return; //check if we have already set the new src, as this function is called EVERY TIME your audio file ends.
    player.src = 'link/to/your/next/file.m4a';
    player.play();
});

document.getElementById('pause').addEventListener('click', function () {
    document.getElementById('batmansong1').pause();
});
document.getElementById('play').addEventListener('click', function () {
    document.getElementById('batmansong1').play();
});

HTML:

<audio id="batmansong1" src="Songs/nanananabatman.m4a"></audio>
<button id="play">
    <img src="Buttons/play.jpg" />
</button>
<button id="pause">
    <img src="Buttons/pause.jpg" />
</button>

CSS:

img {
    width:40px;
    height:40px;
}

If you want to know anything else, feel free to ask!

MarijnS95
  • 4,703
  • 3
  • 23
  • 47
-1
//It should work for html 5 surpport browsers

function htmlfiveMedia(){
    document.getElementById('player').play();
}


//in your html
<audio id="player" src="../jizadmin/sounds/new_message.wav"></audio>


OR

IF THE BROWSER DOES NOT SUPPORT AUDIO TAG TRY THIS BELOW

//This function is going to play sound
function explorerMedia()
{
    $('embed').remove();

    $("<embed src='../jizadmin/sounds/new_message.wav' autostart='true' hidden='true' height='1' width='1'>").insertAfter('hr');
}



//add an <hr> below your page

Hope this would help
skliz4rel
  • 198
  • 2
  • 11