Why doesn't the music stop?

Question

JavaScript

Here is the code. The music is playing, but when I press pause, the music still plays, and if I press track 2, 2 tracks are played at once. What's wrong. Everything is done in if and else and pause does not want to.

$('span.pause-play-music').on('click', function(){

  var dataInfo = $(this).attr('data-music');

  var musicIndex = $(this).parent('li').index();

  $('.music-block-info ul li').find('span.pause-play-music').attr('data-music','pause');
  $('.music-block-info ul li').find('span.pause-play-music').html('<i class="fa fa-play"></i>');

  var musicSrc = $('.music-block-info ul li').eq(musicIndex).find('audio').attr('src');

  var music = new Audio(musicSrc);

  if(dataInfo == 'pause'){

    $('.music-block-info ul li').eq(musicIndex).find('span.pause-play-music').attr('data-music','play');
    $('.music-block-info ul li').eq(musicIndex).find('span.pause-play-music').html('<i class="fa fa-pause"></i>');

    music.play();		

  }else{

    music.pause();

    $('.music-block-info ul li').eq(musicIndex).find('span.pause-play-music').attr('data-music','pause');
    $('.music-block-info ul li').eq(musicIndex).find('span.pause-play-music').html('<i class="fa fa-play"></i>');
  }

});

Answer 1

Because every time you press the button, you create a new Audio instance, while erasing the link to the one already playing.