Vue使用vue-aplayer实现音乐播放
Vue Nuxt 使用 vue-aplayer 组件实现音乐播放!
本文使用 vue-aplayer 组件实现音乐播放!
实现样式:
引入依赖
npm install vue-aplayer --save
注意
本文使用的是 vue-aplayer 并不是 @moefe/vue-aplayer,两者之间有些配置项不同,这里暂时不做赘述。
这里也可能会发生一个警告
Can't resolve 'hls.js' in 'D:\MyProject\private-ashcan\frontend\node_modules\vue-aplayer\dist'
解决办法是引入 hls.js 依赖
npm install hls.js --save
要确保 pom.xml 文件中有 hls.js 才是引入成功,如果引不进来,可以直接将 "hls.js": "^0.14.17" 复制到 pom.xml 文件中。
页面使用
首先在页面引入 vue-aplayer 组件,然后如下使用;
<template>
<div>
<a-player
:music="audio[0]"
:list="audio"
autoplay
/>
</div>
</template>
<script>
import APlayer from 'vue-aplayer'
export default {
components: { APlayer },
data () {
return {
// 音频列表
audio: [
{
title: '天空之城',
artist: '黄叶',
url: 'http://xxx.mp3',
pic: 'http://xxx.jpg',
lrc: '[00:12.09]作词:林夕[00:12.33]作曲:徐伟贤[00:14.40]对我好对我好'
}
]
}
},
}
</script>
配置项说明
Props
名称 | 类型 | 默认值 | 说明 |
music | Object | 必填项 | 当前播放的音乐。具体值请看下面的 music |
list | Array | [] | 播放列表。如果 list 不是空数组,播放列表就会显示出来。 |
mini | Boolean | false | 迷你模式 |
float | Boolean | false | 浮动模式。允许在页面随意拖放播放器 |
showLrc | Boolean | false | 是否显示歌词 |
mutex | Boolean | true | 是否在该播放器播放时暂停其他播放器 |
theme | String | '#41b883' | 主题色。如果当前歌曲也设置了 theme 则以歌曲的为准 |
shuffle | Boolean | false | 随机播放 |
repeat | String | 'no-repeat' | 轮播模式。值可以是 'repeat-one'(单曲循环)、'repeat-all'(列表循环)或者 'no-repeat'(不循环) |
listMaxHeight | String | none | 播放列表面板最大高度 |
listFolder | Boolean | false | 默认收起播放列表 |
music
名称 | 默认值 | 说明 |
src | 必填项 | 音频文件的路径 |
title | 'Untitled' | 歌曲名称 |
artist | 'Untitled' | 演唱者 |
pic | none | 封面图片路径 |
lrc | none | 歌词或者歌词文件的路径 |
theme | none | 歌曲的主题色,会覆盖播放器的主题色 |
event
事件名 | 参数 | 说明 |
play | none | 开始播放时触发 |
pause | none | 暂停时触发 |
canplay | none | 当数据支持播放时触发 |
playing | none | 播放时会定时触发 |
ended | none | 停止播放时触发 |
error | none | 错误出现时触发 |
update:mode | none | mode 属性更改时触发 |
动态获取音乐自动播放问题
在动态获取音乐信息时,需要注意自动播放失效的问题;个人理解是因为在还没有取回音乐信息时,页面进行了渲染,播放器已经被渲染好了。
解决办法是使用 v-if ,在查询到音乐信息时再加载播放器,另外我也额外给了 audio 一个初始值,避免报错;
注意,在 beforeDestroy 时将 isShow 重置为 false,这一步也不能省略;如果是 dialog,则在关闭时重置即可。
<template>
<a-player
v-if="isShow"
:music="audio[0]"
:list="audio"
:showlrc="true"
float
autoplay
mode="circulation"
repeat="repeat-all"
:style="{ width: '500px', marginLeft: '500px' }"
/>
</template>
<script>
import APlayer from 'vue-aplayer'
export default {
name: 'DefaultLayout',
components: { APlayer },
data () {
return {
// 音频列表
audio: [
{
title: '天空之城',
artist: '黄叶',
url: 'http://music.163.com/song/media/outer/url?id=1947208581.mp3',
pic: 'http://p2.music.126.net/O-G03h3Y18Hb75ZzFXrxXg==/109951167515869204.jpg',
lrc: '[00:12.09]作词:林夕[00:12.33]'
}
],
isShow: false
}
},
mounted () {
this.getMusic()
},
beforeDestroy () {
this.isShow = false
},
methods: {
getMusic () {
this.$nextTick(() => {
this.$axios.$request({
url: '/songs/list',
method: 'get'
}).then((res) => {
this.audio = res
// 如果不使用 v-if,会导致播放器已经渲染好了才给值,那自动播放会失效
this.isShow = true
})
})
}
}
}
</script>
获取音乐
把我这次获取音乐信息的方式和大家分享一下;本文以网易云为例。
首先在网站中打开网易云,随便选择一首歌进到详细页,在网址把这首歌的 id 复制下来;
然后打开这个网站 全网音乐免费下载 - 音乐搜索,音乐在线试听,下载,在线解析网 (sonimei.cn)
选择音乐ID、网易,将 id 粘贴到输入框后,点击 Get
然后就可以得到这首音乐的信息;
封面这里没有直接给出路径,但是我们只要 F12 一下就可以啦
感谢
如果对您有帮助,麻烦点赞收藏鼓励一下,栓q!
更多推荐
所有评论(0)