vue中使用aplayer外掛做一個網頁音樂播放器

李云蹊發表於2024-04-19
Vue網頁播放器

我們在瀏覽網頁的時候，時常會看到一些網頁音樂播放器，本文以vue為例，使用aplayer外掛，做一個簡單的網頁播放器。我們先看一下效果圖

效果圖

正常模式

vue中使用aplayer外掛做一個網頁音樂播放器

吸底模式

vue中使用aplayer外掛做一個網頁音樂播放器

當然還有迷你模式，就是能隱藏的都隱藏，這裡不贅述，做相應配置就會出現對應效果。

注意，吸底模式會出現上一曲下一曲按鈕，以及歌詞按鈕。正常模式是沒這個的。不過我個人更加喜歡正常模式。

使用步驟

第一步，npm下載aplayer外掛：cnpm install aplayer --save

第二步，搭配下載hls.js：cnpm i hls.js --save

第三步，在需要使用的頁面引入外掛，也要引入外掛的樣式

程式碼如下

直接複製貼上即可看到效果：

<template>
  <div id="app">
    <h2>aplayer播放器</h2>
    <br />
    <!-- 準備一個容器用來存放音樂播放器 -->
    <div id="aplayer"></div>
  </div>
</template>

<script>
import APlayer from "APlayer"; // 引入音樂外掛
import "APlayer/dist/APlayer.min.css"; // 引入音樂外掛的樣式
export default {
  name: "App",
  data() {
    return {
      audio: [ // 歌曲列表
        {
          name: "Windy Hill", // 歌曲名字
          artist: "鋼琴-羽腫", // 歌曲演唱者
          url: // 歌曲地址（這裡用外鏈地址）
            "https://sharefs.ali.kugou.com/202110281324/e793a5ebf43ef95bb75f64d07ef246e4/G167/M02/15/07/h5QEAF1KXo2ALzKrAEtAl_Oe_Fo659.mp3",
          cover: "http://imge.kugou.com/stdmusic/150/20170815/20170815070007812976.jpg", // 歌曲頭像
          lrc: "", // 歌詞
          theme: "rgb(127, 218, 180)", // 播放這首歌曲時的主題色
        },
        {
          name: "女兒情",
          artist: "古箏-付娜",
          url:
            "https://sharefs.ali.kugou.com/202110281338/150a7c708ed5e20a47e8a9b80cf1200a/G235/M00/0F/05/i4cBAF77vP2AFdNjAChBofqgQnw363.mp3",
          cover: "http://imge.kugou.com/stdmusic/150/20200606/20200606220631519630.jpg",
          lrc: "",
          theme: "rgb(61, 162, 230)",
        },
        {
          name: "故郷の原風景",
          artist: "陶笛-猶豫的泥巴",
          url:
            "https://sharefs.ali.kugou.com/202110281310/bdb53444846cecd8d45a64e2aab3b6ca/G228/M0A/1B/13/xJQEAF9kx46AZ3IaAEjEvnEtWQw706.mp3",
          cover: "http://imge.kugou.com/stdmusic/150/20200812/20200812134914113741.jpg",
          lrc: "",
          theme: "#baf",
        },
      ],
      info: {
        fixed: false, // 不開啟吸底模式
        listFolded: true, // 摺疊歌曲列表
        autoplay: true, // 開啟自動播放
        preload: "auto", // 自動預載入歌曲
        loop: "all", // 播放迴圈模式、all全部迴圈 one單曲迴圈 none只播放一次
        order: "list", //  播放模式，list列表播放, random隨機播放
      },
    };
  },
  mounted() {
    // 初始化播放器
    this.initAudio();
  },
  methods: {
    initAudio() {
      // 建立一個音樂播放器例項，並掛載到DOM上，同時進行相關配置
      const ap = new APlayer({
        container: document.getElementById("aplayer"),
        audio: this.audio, // 音樂資訊
        ...this.info, // 其他配置資訊
      });
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100%;
  padding: 50px;
  #aplayer {
    width: 480px; // 定個寬度
  }
}
</style>

本例中只舉例了常用的配置項，完整配置項，還是要看官網文件哦

aplayer官方文件地址

aplayer.js.org/#/zh-Hans/

補充vue-aplayer

另外再補充一個也還可以的，功能和這個aplayer外掛類似的音訊播放外掛，不過個人覺得aplayer外掛更加好用。

vue-aplayer官方文件地址

github.com/SevenOutman…

相關文章