playing/pausing MP3 with JavaScript Issue

Question

I have a problem with pausing a currently playing mp3.

For an example, if I run my function like this: playSong(drake); it starts running the code out of the first part of my if statement and it's playing the MP3 out of the "drake" object and sets songValue=2 The problem is that it doesn't pause the song if I run it the second time but my console.log gets displayed in the console, so it definitely runs the second part of my if statement when I click it the second time but it doesn't pause the song for some reasons.

//object with mp3 audio
var drake = {
    value: 3,
    name: 'Energy',
    artist: 'Drake',
    audio: 'energy.mp3', //
    img: '<img style="width: 50%; margin-right: 25%; margin-left: 25%; margin-top: 10%;" src="http://www.getrichrapping.com/wp-content/uploads/2015/08/Drake-Energy.jpg">'
};


songValue = 1;

// plays and SHOULD pause a Song
function playSong(object) {
    var Song = new Audio(object.audio);

    //plays the song 
    if (songValue == 1) {

        Song.play();
        songValue = 2;

        // SHOULD pause the song when the functions is runned the second time
    } else if (songValue == 2) {
        console.log("Is it working ?"); // String to test if the "else if" gets runned
        Song.pause();
        songValue = 1;

    }
};

Answer 1

move the var Song = new Audio(object.audio) outside playSong.

You essentially make a new audio each time you call the function!

of course you would need to make changes to reference the object.audio since object is not a global.

A better way is to do like this:

 //object with mp3 audio var drake = { value: 3, name: 'Energy', artist: 'Drake', audio: 'https://www.w3schools.com/html/horse.mp3', // img: '<img style="width: 50%; margin-right: 25%; margin-left: 25%; margin-top: 10%;" src="http://www.getrichrapping.com/wp-content/uploads/2015/08/Drake-Energy.jpg">' }; songValue = 1; // plays and SHOULD pause a Song function playSong(object) { //plays the song if (songValue == 1) { var player = document.getElementById('song'); var sourceMp3 = document.getElementById('sourceMp3'); sourceMp3.src = object.audio; player.load(); //just start buffering (preload) player.play(); //start playing songValue = 2; // SHOULD pause the song when the functions is runned the second time } else if (songValue == 2) { console.log("Is it working ?"); // String to test if the "else if" gets runned var player = document.getElementById('song'); if (!player.paused) player.pause(); songValue = 1; } }; 

 <audio id="song" controls="controls"> <source id="sourceMp3" src="" type="audio/mp3" /> Your browser does not support the audio element. </audio> <p> <button onclick='playSong(drake)'> Play Song </button> </p> 

Referenced fiddle: http://jsfiddle.net/jm6ky/2/

Updated fiddle: http://jsfiddle.net/c6jgjewg/2/

Answer 2

You should store you Audio object in your base object like this

if (object.song == undefined){
    object.song = new Audio(object.audio);
}

And use object.song instead of the Song variable

You can user the object.song.paused(boolean) to know if the song is paused or not and launch the song again.

Answer 3

You should have 2 separate functions. One for creating the audio element, and one for playing/pausing a given audio element.

One of your problems is that every time you're calling playSong() , you're creating a whole new audio element.

Solution

var drake = {
    value: 3,
    name: 'Energy',
    artist: 'Drake',
    audio: 'energy.mp3', //
    img: '<img style="width: 50%; margin-right: 25%; margin-left: 25%; margin-top: 10%;" src="http://www.getrichrapping.com/wp-content/uploads/2015/08/Drake-Energy.jpg">'
};

var audioElement = playSong(drake); // load song and play it

togglePlayPause(audioElement); // pause song

function playSong(object) {
    var Song = new Audio(object.audio);
    Song.play();

    return Song;
}

function togglePlayPause(audioElement) {
    if (audioElement.paused) {
        audioElement.play();
    } else {
        audioElement.pause();
    }
}

You first create the audio element and store it in a variable, using the playSong() function. Then you pass the audio element in to togglePlayPause() to toggle its playing status.

In the example, I'm playing the song and then immediately calling togglePlayPause() to pause it again.

Also, you don't need to keep the playing status in a separate variable. I've just used the .paused property on the audio element, which returns true if the player has been paused. If you really needed a separate variable, you should store it within the drake object as a new property .isPlaying .

https://jsfiddle.net/5k38da10/