乐趣区

关于音频:vue中使用aplayer插件做一个网页音乐播放器

jiezi

咱们在浏览网页的时候，时常会看到一些网页音乐播放器，本文以 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 官网文档地址

https://aplayer.js.org/#/zh-H…

补充 vue-aplayer

另外再补充一个也还能够的，性能和这个 aplayer 插件相似的音频播放插件，不过集体感觉 aplayer 插件更加好用。

vue-aplayer 官网文档地址

https://github.com/SevenOutma…

退出移动版