在howler.js中更改动态声音src有问题

编程问答 2022-06-12

问题描述

我在页面上添加了按钮，当您单击每个按钮时，它首先卸载the叫对象并更改src，然后播放新音乐。但是问题在于，在两次更改src之后，该脚本无法再次运行

以下代码做什么：

  1. 对象如何产生啸叫

  2. 当您按下具有.play-btn的任何按钮时，每个按钮的来源都会插入._src声音并播放新音乐

    <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');
             sound.pause();
         }
     });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

debuggingdebuggingdebugginghowler.jsjavascriptonunload