咱们在浏览网页的时候,时常会看到一些网页音乐播放器,本文以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插件更加好用。
...