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));

每日一句:
有禮拜天晚上不憂鬱的辦法嗎