Changing dynamic sound src in howler.js has problems

1.4k Views Asked by At

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:

  1. The how object creates howling

  2. 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();
             }
         });
    
0

There are 0 best solutions below