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