javascript audio load not letting it pause

Question

I am building a list of music, and each music has a play button. So when you click play the button turns to pause button.

So when you music plays i want to be able to go down the list and click on another song with the current song stopping and the one i clicked to start.

At the moment i can go down the list and its playing the song but not its not letting me pause . When i click pause it just starts the song again.

here is my code

window.player = document.getElementById('player');
    $('ul.tracks li span.play').click(function(){

        $('ul.tracks li span.play').find('i').removeClass().addClass('fi-play');

        var trackid = $(this).attr('id');
        var track;

        if(trackid == 'play1'){
            track = 'img/music.mp3';
        } else if(trackid == 'play2'){
            track = 'img/music2.mp3';
        } else {
            track = 'img/music3.mp3';
        }

        $('#player_track').attr('src', track);
        player.load();

        if (player.paused) {
            player.play();
            $(this).html('<i class="fi-pause"></i>');
        } else {
            player.pause();
            player.empty();
            $(this).html('<i class="fi-play"></i>');
        }
    });

And here is the html

   <audio id="player">
                      <source id="player_track" src="img/music.mp3" />
                  </audio>
                    <ul class="tracks">
                      <li>
                        <div class="row">
                          <div class="large-8 columns">1. No Church in the Wild (feat. Frank Ocean)</div>
                          <div class="large-2 columns"><span class="play" id="play1"><i class="fi-play"></i></span></div>
                        </div>
                        <li>
                        <div class="row">
                          <div class="large-8 columns">2. Lift Off (feat. Beyonce)</div>
                          <div class="large-2 columns"><span class="play" id="play2"><i class="fi-play"></i></span></div>
                        </div>
                      </li>
                      <li>
                        <div class="row">
                          <div class="large-8 columns">3. Niggas in Paris</div>
                          <div class="large-2 columns"><span class="play" id="play3"><i class="fi-play"></i></span></div>
                        </div>
                      </li>
    </ul>

But when i move player.load() into the if statement, i can pause it but when i click on another song while one is playing, it just stops. So what am i doing wrong?

Answer 1

You need to check if the file clicked is the one loaded by the player. You can do that by wrapping the track-setting code and the player.load in this if-statement.

    if ($('#player_track').attr('src') !== track){
        $('#player_track').attr('src', track);
        player.load();    
    }

The whole code:

window.player = document.getElementById('player');
$('ul.tracks li span.play').click(function(){

    $('ul.tracks li span.play').find('i').removeClass().addClass('fi-play');

    var trackid = $(this).attr('id');
    var track;

    if(trackid == 'play1'){
        track = 'img/music.mp3';
    } else if(trackid == 'play2'){
        track = 'img/music2.mp3';
    } else {
        track = 'img/music3.mp3';
    }


    if ($('#player_track').attr('src') !== track){
        $('#player_track').attr('src', track);
        player.load();    
    }


    if (player.paused) {
        player.play();
        $(this).html('<i class="fi-pause"></i>');
    } else {
        player.pause();
        player.empty();
        $(this).html('<i class="fi-play"></i>');
    }
});