js骚之回调函数——歌曲列表循环播放

JS 同时被 2 个专栏收录
27 篇文章 0 订阅
47 篇文章 0 订阅

js的回调函数真的是一门精彩绝伦的技术,每一次使用都很让我感叹,废话不多说。最近再做一个音乐Dome,里面有一个功能是点击歌曲播放后自动播放下一首,然后列表循环播放。这里自动播放下一首的时候自然用到了js骚之回调来侦测当前歌曲是否播放完。为什么是骚之呢,那就看回调函数再列表循环中的表演了,看代码?,忘说了,我是用Vue来实现的,以下代码都是method里面的了。

        //播放控制器
        /**
           这个函数是用来接收子组件传递来的音乐ID
        */
        playMusic($id){
          this.m_id = $id;
          this.play($id,()=>{ //第一次回调,就是这里了,当播放侦测播放完当前歌曲后就播放下一首
            this.playNext();  //播放下一首函数
          });
        },
        //播放控制源
        play(id , callback){
          let $player = document.getElementById('playerControls');
          $player.setAttribute('src' , `https://music.***.com/song/media/outer/url?id=${id}.mp3`);
          setTimeout(()=>{
            $player.play(); //播放歌曲
          },500);
          let lisen_play = setInterval(()=>{ //侦测是否播放完当前歌曲
            if ($player.ended){
              callback();
              window.clearInterval(lisen_play);
            }
          },10);
        },
        //列表循环
        playNext(){
          let musicId = this.m_id;
          let m_index;
          let len = this.m_ids.length;
          for (let i = 0; i < len; i++) {
            if ((musicId+'') === (this.m_ids[i]+'')){
              if (i === len){
                m_index = -1;
              }
              m_index = i+1;
              break;
            }
          }
          this.m_id = this.m_ids[m_index];
          //这里就是第二次回调,就是骚之回调,你回调我,我回调你,拿到数据就让你嘿嘿嘿……
          //使用相互回调来实现列表循环
          this.play(this.m_id,()=>{ 
            this.playNext();
          });
        },

后面Dome做完了再放上源码,js的世界还需要探索,越是探索越想探索。

  • 1
    点赞
  • 0
    评论
  • 3
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:黑客帝国 设计师:我叫白小胖 返回首页

打赏作者

Luck Young

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值