[番外] 来个音乐拨放器 Play! (续)

Data

data 起手式，记得要回传物件

data () {
    return {}
}

data 中大概会有这些内容

  data () {
    return {
      songList : [
        {
          name: 'Oceans',
          singer:'Seafret ',
          src: require('./assets/xxxx.mp3')
        },
         {
          name: 'No song without you',
          singer:'HONNE',
          src: require('./assets/xxxx.mp3')
        },
        {
          name: '我是第三首',
          singer:'我是第三首',
          src: require('./assets/xxxx.mp3')
        },

      ],
      index: 0, // 目前拨放第几首
      current: {}, // 目前拨放内容
      isPlaying: false, // 目前是否正在拨放
      isSingleLoop: false, // * 是否单首循环
      isRandomPlay: false, // * 是否随机拨放
      player: new Audio() 
    }
  },

参考 APP 音乐拨放器，还可以增加单首循环或是随机拨放的选项

Methods

`play`

用来控制拨放/暂停

ex:

play () {
    this.isPlaying? this.player.pause(): this.player.play();
    this.isPlaying = !this.isPlaying;
}

<button class="btn" @click="play">{{isPlaying? '暂停': '播放'}}</button>

`changeSong`

切换上下首，传入+1 或 -1
ex:

 changeSong (value) {
    this.index = this.index + value;
    this.checkValidIndex();
    this.current = this.songList[this.index];
    this.player.src = this.current.src;
},

<button class="btn" @click="changeSong(-1)">上一首</button>

其他

在变更 index 後，要记得检查 index 是否有效

ex:

if (this.index > this.songList.length -1) {
    this.index = 0;
}
if (this.index < 0) {
    this.index = this.songList.length -1;
}

监听音乐 ended 事件

ex: 播完时，自动拨放下一首

this.player.addEventListener('ended', function () {
    this.index++;
    if (this.index > this.songList.length - 1) {
      this.index = 0;
    }

    this.current = this.songList[this.index];
    this.play(this.current);
}.bind(this));