We Keep Coding

How to make multiple mp3 files play one after another on the click of a button using javascript or jquery?

I have the following html and script to play/pause an audio by clicking a button.
<audio id="testAudio" hidden src="sample.mp3" type="audio/mpeg">
</audio>
<button id="playAudio">Play</button>
<script>
document.getElementById("playAudio").addEventListener("click", function(){
var audio = document.getElementById('testAudio');
if(this.className == 'is-playing'){
this.className = "";
this.innerHTML = "Play"
audio.pause();
}else{
this.className = "is-playing";
this.innerHTML = "Pause";
audio.play();
}
});
</script>
I need to edit it in such a way as to play multiple mp3 files one by one in a defined order and stop only when the last audio has played.
I just don't know how to make that work. Can anyone help?

You can register an event handler for the audio tag, that first when the current file has finished;
document.getElementById("testAudio").addEventListener("ended",function(e) {
// Play next track
});
If you have a list of tracks to play in an array, then simply play the next one after the current track has finished. Using the setTimeout function you can put in a delay between the tracks. A simple example is as follows;
<script>
var playlist= [
'https://api.twilio.com/cowbell.mp3',
'https://demo.twilio.com/hellomonkey/monkey.mp3'
];
var currentTrackIndex = 0;
var delayBetweenTracks = 2000;
document.getElementById("playAudio").addEventListener("click", function(){
var audio = document.getElementById('testAudio');
if(this.className == 'is-playing'){
this.className = "";
this.innerHTML = "Play"
audio.pause();
}else{
this.className = "is-playing";
this.innerHTML = "Pause";
audio.play();
}
});
document.getElementById("testAudio").addEventListener("ended",function(e) {
var audio = document.getElementById('testAudio');
setTimeout(function() {
currentTrackIndex++;
if (currentTrackIndex < playlist.length) {
audio.src = playlist[currentTrackIndex];
audio.play();
}
}, delayBetweenTracks);
});
</script>
Note that cowbell track is 52 seconds long, so if your testing the above (for your own sanity) set the controls property to the audio tag so you can skip through most of it.

Make same button play/pause html5 video

So i had this working at one point eventually i broke it and now i need to get it working again.
I want for when you press the PLAY button the video will start playing. and the PLAY button will change it text to say PAUSE. Then when you click it again the video will pause.
HTML:
<video id="myVideo" width="1024" height="576">
<source src="myaddiction.mp4" type="video/mp4">
<source src="myaddiction.mp4.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<button id="button" onclick="playPause(); ">PLAY</button>
SCRIPT:
var vid = document.getElementById("myVideo");
function playPause() {
vid.play();
}
function playPause() {
vid.pause();
}
function playPause() {
var change = document.getElementById("button");
if (change.innerHTML == "PLAY") {
change.innerHTML = "PAUSE";
} else {
change.innerHTML = "PLAY";
}
}
Here is also a fiddle with everything in it. If you know how to get a video working in it that'd be cool if you'd add it. Thanks!
https://jsfiddle.net/wb83hydn/
**EDIT: currently the problem is the video wont play when the button is pressed. The button changes text but the video does nothing.

You are defining your playPause function 3 separate times. You are likely to get some unexpected results. That is, if the interpreter doesn't error out completely. You will be better served with just creating one function, and use a global variable to handle the tracking of the play/pause state. Something like this:
var vid = document.getElementById("myVideo");
var isPlaying = false;
function playPause() {
var change = document.getElementById("button");
if (isPlaying) {
vid.pause();
change.innerHTML = "PLAY";
} else {
vid.play();
change.innerHTML = "PAUSE";
}
isPlaying = !isPlaying;
}

Change your javascript to this to make it work.
You'll need to make sure the DOM is loaded first by using window.onLoad or putting the JS at the end of the HTML file.
I updated the JSFiddle, but you'll need a valid online video file to make it work.
var vid = document.getElementById("myVideo");
function play() {
vid.play();
}
function pause() {
vid.pause();
}
function playPause() {
var change = document.getElementById("button");
if (change.innerHTML == "PLAY") {
change.innerHTML = "PAUSE";
play();
} else {
change.innerHTML = "PLAY";
pause();
}
}
https://jsfiddle.net/wb83hydn/3/

Play and pause video by the same button
document.getElementById("play").onclick = function() {
if(document.getElementById("video").paused){
document.getElementById("video").play();
this.innerHTML ="Pause";
}else{
document.getElementById("video").pause();
this.innerHTML = "Play";
}
}

Change onclick() function multiple times (play/pause image change)

<audio>
<source src="data/music/track1.mp3" type="audio/mpeg">
Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" class="button_media button-mini" onclick="aud_play_pause()">
<img id="play_pause" src="data/play_button.png" onclick "changePlayPauseButton()">
</button>
<audio>
<source src="data/music/track2.mp3" type="audio/mpeg">
Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" class="button_media button-mini" onclick="aud_play_pause()">
<img id="play_pause_two" src="data/play_button.png" onclick "changePlayPauseButtonTwo()">
</button>
<audio>
<source src="data/music/track3.mp3" type="audio/mpeg">
Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" class="button_media button-mini" onclick="aud_play_pause()">
<img id="play_pause_three" src="data/play_button.png" onclick "changePlayPauseButtonThree()">
</button>
<script>
var play_pause = "pause_button.png";
function changePlayPauseButton() {
if (play_pause == "pause_button.png") {
document.images["play_pause"].src = "data/pause_button.png";
document.images["play_pause"].alt = "pause";
play_pause = "play_button.png";
} else {
document.images["play_pause"].src = "data/play_button.png";
document.images["play_pause"].alt = "play";
play_pause = "pause_button.png";
}
}
var play_pause_two = "pause_button.png";
function changePlayPauseButtonTwo() {
if (play_pause_two == "pause_button.png") {
document.images["play_pause_two"].src = "data/pause_button.png";
document.images["play_pause_two"].alt = "pause";
play_pause_two = "play_button.png";
} else {
document.images["play_pause_two"].src = "data/play_button.png";
document.images["play_pause_two"].alt = "play";
play_pause_two = "pause_button.png";
}
}
var play_pause_three = "pause_button.png";
function changePlayPauseButtonThree() {
if (play_pause_three == "pause_button.png") {
document.images["play_pause_three"].src = "data/pause_button.png";
document.images["play_pause_three"].alt = "pause";
play_pause_three = "play_button.png";
} else {
document.images["play_pause_three"].src = "data/play_button.png";
document.images["play_pause_three"].alt = "play";
play_pause_three = "pause_button.png";
}
}
</script>
I created a kind of playlist which appears only the button
play / pause . I also customized the button , so that the image automatically change when clicked . The problem is that I have several buttons !
What I like to do, is to change not only the image of the button itself when clicked but also the other button when it is in play mode ( pause image ) to be returned to the play mode (play image )
Go easy on me guys
I just started to code one month ago!
thanks

Well, I'm not sure if is that what you need but take a look the example:
http://jsfiddle.net/j6nbcpL9/
js:
$(document).ready(function(){
$('button').on('click', function(){
var option = $(this).attr('data-btn');
console.log(option);
if(option === 'changePlayPauseButtonThree'){
changePlayPauseButtonThree();
...
}
if(option === 'changePlayPauseButtonTwo'){
changePlayPauseButtonTwo();
...
}
if(option === 'changePlayPauseButton'){
changePlayPauseButton();
...
}
});
});
Also, let me know if is not what you need to implement it properly. The code is not the best but I hope it's help.

Audio Player mute button (HTML5 and Javascript)

I am trying to create a mute button to my website's custom audio player. Apparently, this simple thing gives me a real headache.
As you see below, I have tried to ad an IF statement to the button. If the volume is on and I press the button, mute the volume. else, if the volume si muted, unmute it.
<audio id="audio" >
<source src="material/audio/sound.mp3"
type='audio/mpeg;
codecs="mp3"'/>
</audio>
<button ID="mute"
onclick="muteAudio()">
<img src="material/images/mute.png"
ID="mute_img"/>
<script type="text/javascript">
function muteAudio() {
var audio = document.getElementById('audioPlayer');
if (audio.mute = false) {
document.getElementById('audioPlayer').muted = true;
}
else {
audio.mute = true
document.getElementById('audioPlayer').muted = false;
}
}
</script>

You need to use == (comparison) rather than = (assignment):
if (audio.mute == false)
{
document.getElementById('audioPlayer').muted = true;
}
else
{
audio.mute = true
document.getElementById('audioPlayer').muted = false;
}
or probably better would be to use the ! (not) operator:
if (!audio.mute)

HTML Video - Actions OnEnd not Working

I am having trouble getting the onended function to work with my HTML video. It doesnt have to be onended but basically I want a series of things to happen when the video has ended.
Code is as follows:
<script language="JavaScript" type="text/javascript">
window.onload = playVideo;
function playVideo()
{
var video = document.getElementById("video");
var message = document.getElementById("videoinfo");
var button = document.getElementById("playpause");
button.onclick = function()
{
if (video.paused)
{
video.play();
button.innerHTML = "Pause";
message.value = "The video is playing, click the Pause button to pause the video.";
}
else
{
video.pause();
button.inerHTML = "Play";
message.value = "The video is paused, click the Play button to play the video.";
}
video.onended = function(e)
{
button.innerHTML = "Play";
message.value = "The video has ended, click Play to restart the video."
}
}
}
</script>
<button type="button" id="playpause" onclick="playVideo()">Play</button>
<br>
<video id="video" width="320" height="240">
<source src="Video/movie.mp4" type="video/mp4">
<source src="Video/movie.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<br />
<textarea id="videoinfo" cols="90">
Click the Play button to start the video.
</textarea>
Thanks for the help
EDIT: I cannot post my own answer for 8 hours with 10 or less reputation, so I have to edit:
After 2 days of trying to get this to work, I post a question on here so I can figure it out. Less than 10 mins later I manage to get it to work.
I used an onEnded function in the <video> tag and linked that to a javascript function called videoEnded().
See below:
<script language="JavaScript" type="text/javascript">
function playVideo()
{
var video = document.getElementById("video");
var message = document.getElementById("videoinfo");
var button = document.getElementById("playpause");
button.onclick = function()
{
if (video.paused)
{
video.play();
button.innerHTML = "Pause";
message.value = "The video is playing, click the Pause button to pause the video.";
}
else
{
video.pause();
button.inerHTML = "Play";
message.value = "The video is paused, click the Play button to play the video.";
}
}
}
function videoEnded()
{
var message = document.getElementById("videoinfo");
var button = document.getElementById("playpause");
button.innerHTML = "Play";
message.value = "The video has ended, click Play to restart the video.";
}
</script>
Hope this can help someone else out. I have searched for days looking for an answer and nothing would work.
Thanks

if(Video.ended)
// Code when video ends.
EDIT: sorry for don't give any other explanation, but, have you tried by using .addEventListener method instead? and in which Browser do you develop / debug?