使用Vue製作一個屬於自己的音樂播放器！

個人部落格原文地址(支援程式碼預覽) 雲墨白的部落格https://www.yunmobai.cn/blog/7

前言

其中在想在部落格中新增音樂播放功能的時候，也考慮也其它音樂播放器外掛如APlayer,頁面和功能都能滿足要求。而且播放頁面也很好看，功能幾乎都有。但是我不需要那麼多功能，所以我自己嘗試製作一個屬於自己部落格的音樂播放器。頁面佈局及樣式參考APlayer

此文來自個人部落格總結實現音樂播放器
原始碼：gitee.com/baymaxsjj/by-vue-blog/bl...
完成功能：播放，暫停，快進，下一曲，上一曲，順序播放，迴圈播放，播放列表，播放動畫！

案例預覽（請移步部落格預覽）

常用屬性

內容來源—W3School

js建立（本案例使用）

//建立audio,不會在頁面中顯示。
 var audio=document.createElement("audio");
//設定src,播放地址。
audio.src ='http://url'

事件

內容來源—W3School

案例準備

格式化時間

// 獲取音樂總時長
    getTime() {
      let time = this.audio.duration;
      this.max = time;
      //總共時長的秒數
      this.time = this.transTime(time);
    },
    // 時間格式化位00：00
    formatTime(value) {
      let time = "";
      let s = value.split(":");
      let i = 0;
      for (; i < s.length - 1; i++) {
        time += s[i].length == 1 ? "0" + s[i] : s[i];
        time += ":";
      }
      time += s[i].length == 1 ? "0" + s[i] : s[i];
      return time;
    },
    // 把毫秒變成時分秒
    transTime(value) {
      let time = "";
      let h = parseInt(value / 3600);
      value %= 3600;
      let m = parseInt(value / 60);
      let s = parseInt(value % 60);
      if (h > 0) {
        time = this.formatTime(h + ":" + m + ":" + s);
      } else {
        time = this.formatTime(m + ":" + s);
      }
      return time;
    },

建立及繫結事件

created() {
    // 建立Audio    
    this.audio = document.createElement("audio");
    this.getList();
    let that = this;
    // 當音樂準備就緒時的操作
    this.audio.addEventListener(
      "canplay",
      function () {
        console.log("載入成功");
        console.log(that.musicInfo.url);
        that.canplay = true;
    //防止自動播放
        if (that.loading) {
          that.audio.play(); // 播放
          that.isPlay = true;
        }
        that.getTime();
        // that.pause()
      },
      false
    ),
//快進時的操作，同步時間
      this.audio.addEventListener(
        "timeupdate",
        function () {
          that.numb = that.audio.currentTime;
          that.newTime = that.transTime(that.audio.currentTime);
        },
        false
      );
//當音樂播放到結束後的操作，
    this.audio.addEventListener(
      "ended",
      function () {
        if (that.cycle == 0) {
          that.audio.pause(); // 暫停
          that.isPlay = false;
        } else if (that.cycle == 1) {
          that.audio.play(); // 播放
          that.isPlay = true;
        } else {
            that.index == that.musics.length - 1 ? 0 : that.index + 1;
        }
      },
      false
    );
  },

播放暫停、快進

// 播放暫停
    pause() {
      if (this.audio !== null && this.canplay) {
        this.loading = true;
        if (this.audio.paused) {
          this.audio.play(); // 播放
          this.isPlay = true;
        } else {
          this.audio.pause(); // 暫停
          this.isPlay = false;
          console.log("暫停被呼叫了");
        }
      } else {
        this.$message({
          showClose: true,
          message: "音樂還沒有載入成功呢！",
          type: "warning",
        });
      }
    },
    // 快進音樂
    getVal() {
      if (!this.audio.paused || this.audio.currentTime != 0) {
        this.audio.currentTime = this.numb;
        if (this.numb == Math.floor(this.max)) {
          this.audio.pause();
          this.isPlay = false;
        }
      }
    },

切換

主要時透過監聽器，監聽音樂id的變化來切換歌曲

 watch: {
    index(val) {
      if (this.loading) {
        this.audio.play(); // 播放
        this.isPlay = true;
      }
      this.canplay = false;
      this.audio.currentTime = 0;
      // this.audio.pause();
      this.audio.src = "";
      this.getMusic();
    },
  },

本作品採用《CC 協議》，轉載必須註明作者和本文連結