I've added buttons to the page that when you click on each one, it first unloads the howl object and changes the src, and then new music is played. But the problem is that after changing src twice, the script does not work a third time
What does the following code do:
The how object creates howling
When you hit any button that has .play-btn, the source of each button puts in ._src sound and new music is played
<script> var musicSrc = ""; var sound = 0; var musicId= 0; var soundCurrentTime ,soundTime = 0; var soundPercent = 0; var playInterval; sound = new Howl({ src: '/uploads/tracks/'+$('.content > .music-list-player:first-of-type .play-btn').attr('track-file'), volume: 1, html5: true, xhr: { method: 'POST', }, format : 'mp3', onload: function () { $('.player-container').removeClass('load-track'); //'Remove Music Loading Animation soundTime = sound.duration(); //'Get Full Sound Time soundPercent = (soundCurrentTime * 100)/soundTime; //'Get now Percent Played $('.full-time#full-time').html(secondsToHms(soundTime)); //'Show Full Music Time in left Time Box }, onplay:function () { $('.player-container').removeClass('load-track'); //'Remove Music Loading Animation playInterval= setInterval(playProgress,100); $('.play-btn[playing="1"]').attr('player-target','pause'); }, onend: function () { $('.play-btn[playing="1"]').attr('player-target','play'); //'Show Play Button $('.player-progress-bar').css('width','0%'); //'Reset Progress Bar $('.current-time').html("00:00"); //Set Current Time to 00:00 clearInterval(playInterval); }, onpause: function () { $('.player-container').removeClass('load-track'); //'Remove Music Loading Animation $('#progress'+musicId+', #progress').css('width',soundPercent+'%'); $('.current-time').html('00:00'); $('.current-time#current-time , #current-time-'+musicId).html(secondsToHms(soundCurrentTime)); clearInterval(playInterval); }, onloop: function () { playInterval = setInterval(playProgress,100); } }); $('.music-list-player .play-btn').on('click', function () { //'It happens by Click the list play Button $('.player-container').addClass('load-track'); var playerBtnClass = '.'+this.className; var playingStatus = $(this).attr('player-target') == 'pause' ? playingStatus = 0 : playingStatus = 1; musicId = this.id; musicSrc = $(this).attr('track-file'); if (playingStatus){ //'Play btn is playing if (sound._src !== '/uploads/tracks/'+musicSrc){ //'Music's changed sound.stop(); sound.unload(); console.log(sound); sound._src = '/uploads/tracks/'+musicSrc; sound.load(); $('.player-progress-bar').css('width','0%'); //'Reset Progress Bar $('.player-container').addClass('load-track'); //'add Music Loading Animation } $('.player-artist-name').html($(playerBtnClass+"#"+musicId+" + .artist-name ").html()); $('.player-music-name').html($(playerBtnClass+"#"+musicId+" + .artist-name + .music-name ").html()); $(this).attr('player-target','pause'); $(playerBtnClass+":not(#"+musicId+")").attr('player-target','play'); $('#play-btn').attr('player-target','pause'); sound.play(); } else{ //'Play btn is not playing $(this).attr('player-target','play'); $('#play-btn').attr('player-target','play'); sound.pause(); } });