nuxt.js项目中添加vue-aplayer音乐播放器
nuxt.js项目中添加vue-aplayer音乐播放器
1.安装
npm install hls.js
npm install vue-aplayer
2. plugins文件夹新建aplayer.js
import Vue from 'vue'
import vueAplayer from 'vue-aplayer'
Vue.component('aplayer', vueAplayer);
3.nuxt.config.js添加
export default {
plugins: [
{
src: '@/plugins/aplayer',
ssr: false
}
],
}
4.在需要引入的vue页面 (音乐值可以从后端获取)
<template>
<div style="width:100%;">
<aplayer :music="videoUpload.music" :showLrc="true" :mini="false" :float="true" :list="list" :listFolded="true" repeat="repeat-all"></aplayer>
</div>
</template>
<script>
export default {
data() {
return {
list:[{
title: '稻香',
author: '周杰伦',
url: 'https://oss.barbed.cn/music/4113470514.mp3',
pic:'https://img4.kuwo.cn/star/albumcover/120/72/44/3648126291.jpg', // 封面图片
lrc:
' [00:00.000] 作词 : 周杰伦'+
'[00:01.000] 作曲 : 周杰伦'+
'[00:03.00]编曲:黄雨勋'+
'[00:04.00]制作人:周杰伦'+
'[00:05.00]合声编写:周杰伦'+
'[00:06.00]合声:周杰伦'+
'[00:07.00]录音师:杨瑞代'+
'[00:08.00]录音室:JVR Studio'+
'[00:09.00]混音师:杨大纬'+
'[00:10.00]混音录音室:杨大纬录音工作室'+
'[00:11.00]OP:JVR Music Intl Ltd.'+
'[00:12.00]ISRC TW-K97-08-015-11'+
'[00:31.00]对这个世界如果你有太多的抱怨'+
'[00:34.05]跌倒了就不敢继续往前走'+
'[00:37.02]为什么人要这么的脆弱 堕落'+
'[00:41.55]请你打开电视看看'+
'[00:43.14]多少人为生命在努力勇敢的走下去'+
'[00:46.89]我们是不是该知足'+
'[00:49.43]珍惜一切 就算没有拥有'+
'[00:54.24]还记得你说家是唯一的城堡'+
'[00:57.49]随着稻香河流继续奔跑'+
'[01:00.42]微微笑 小时候的梦我知道'+
'[01:05.51]不要哭让萤火虫带着你逃跑'+
'[01:09.21]乡间的歌谣永远的依靠'+
'[01:12.12]回家吧 回到最初的美好'+
'[01:41.14]不要这么容易就想放弃 就像我说的'+
'[01:44.59]追不到的梦想 换个梦不就得了'+
'[01:47.55]为自己的人生鲜艳上色 先把爱涂上喜欢的颜色'+
'[01:51.80]笑一个吧 功成名就不是目的'+
'[01:55.62]让自己快乐快乐这才叫做意义'+
'[01:58.51]童年的纸飞机 现在终于飞回我手里'+
'[02:04.41]所谓的那快乐 赤脚在田里追蜻蜓追到累了'+
'[02:08.62]偷摘水果被蜜蜂给叮到怕了 谁在偷笑呢'+
'[02:13.16]我靠着稻草人吹着风唱着歌睡着了'+
'[02:16.72]哦 哦 午后吉它在虫鸣中更清脆'+
'[02:19.58]哦 哦 阳光洒在路上就不怕心碎'+
'[02:22.53]珍惜一切 就算没有拥有'+
'[02:27.36]还记得你说家是唯一的城堡'+
'[02:31.24]随着稻香河流继续奔跑'+
'[02:34.18]微微笑 小时候的梦我知道'+
'[02:39.35]不要哭让萤火虫带着你逃跑'+
'[02:42.94]乡间的歌谣永远的依靠'+
'[02:45.91]回家吧 回到最初的美好'+
'[02:51.03]还记得你说家是唯一的城堡'+
'[02:54.55]随着稻香河流继续奔跑'+
'[02:57.62]微微笑 小时候的梦我知道'+
'[03:02.67]不要哭让萤火虫带着你逃跑'+
'[03:06.35]乡间的歌谣永远的依靠'+
'[03:09.23]回家吧 回到最初的美好'
},
{
title: '稻香2',
author: '周杰伦2',
url: 'https://oss.barbed.cn/music/4113470514.mp3',
pic:'https://img4.kuwo.cn/star/albumcover/120/72/44/3648126291.jpg', // 封面图片
lrc:
' [00:00.000] 作词 : 周杰伦'+
'[00:01.000] 作曲 : 周杰伦'+
'[00:03.00]编曲:黄雨勋'+
'[00:04.00]制作人:周杰伦'+
'[00:05.00]合声编写:周杰伦'+
'[00:06.00]合声:周杰伦'+
'[00:07.00]录音师:杨瑞代'+
'[00:08.00]录音室:JVR Studio'+
'[00:09.00]混音师:杨大纬'+
'[00:10.00]混音录音室:杨大纬录音工作室'+
'[00:11.00]OP:JVR Music Intl Ltd.'+
'[00:12.00]ISRC TW-K97-08-015-11'+
'[00:31.00]对这个世界如果你有太多的抱怨'+
'[00:34.05]跌倒了就不敢继续往前走'+
'[00:37.02]为什么人要这么的脆弱 堕落'+
'[00:41.55]请你打开电视看看'+
'[00:43.14]多少人为生命在努力勇敢的走下去'+
'[00:46.89]我们是不是该知足'+
'[00:49.43]珍惜一切 就算没有拥有'+
'[00:54.24]还记得你说家是唯一的城堡'+
'[00:57.49]随着稻香河流继续奔跑'+
'[01:00.42]微微笑 小时候的梦我知道'+
'[01:05.51]不要哭让萤火虫带着你逃跑'+
'[01:09.21]乡间的歌谣永远的依靠'+
'[01:12.12]回家吧 回到最初的美好'+
'[01:41.14]不要这么容易就想放弃 就像我说的'+
'[01:44.59]追不到的梦想 换个梦不就得了'+
'[01:47.55]为自己的人生鲜艳上色 先把爱涂上喜欢的颜色'+
'[01:51.80]笑一个吧 功成名就不是目的'+
'[01:55.62]让自己快乐快乐这才叫做意义'+
'[01:58.51]童年的纸飞机 现在终于飞回我手里'+
'[02:04.41]所谓的那快乐 赤脚在田里追蜻蜓追到累了'+
'[02:08.62]偷摘水果被蜜蜂给叮到怕了 谁在偷笑呢'+
'[02:13.16]我靠着稻草人吹着风唱着歌睡着了'+
'[02:16.72]哦 哦 午后吉它在虫鸣中更清脆'+
'[02:19.58]哦 哦 阳光洒在路上就不怕心碎'+
'[02:22.53]珍惜一切 就算没有拥有'+
'[02:27.36]还记得你说家是唯一的城堡'+
'[02:31.24]随着稻香河流继续奔跑'+
'[02:34.18]微微笑 小时候的梦我知道'+
'[02:39.35]不要哭让萤火虫带着你逃跑'+
'[02:42.94]乡间的歌谣永远的依靠'+
'[02:45.91]回家吧 回到最初的美好'+
'[02:51.03]还记得你说家是唯一的城堡'+
'[02:54.55]随着稻香河流继续奔跑'+
'[02:57.62]微微笑 小时候的梦我知道'+
'[03:02.67]不要哭让萤火虫带着你逃跑'+
'[03:06.35]乡间的歌谣永远的依靠'+
'[03:09.23]回家吧 回到最初的美好'
}
],
videoUpload: {
//progress: false,
// progressPercent: 0,
// successPercent: 0,
theme: '#ffc0cb',
autoplay: true,
repeat: 'repeat-one', // 轮播模式。值可以是 'repeat-one'(单曲循环)'repeat-all'(列表循环)或者 'no-repeat'(不循环)。为了好记,还可以使用对应的 'music' 'list' 'none'
mini: true, // 迷你模式
float: true, // 浮动模式。你可以在页面上随意拖放你的播放器
music: { // 当前播放的音乐
title: '稻香',
author: '周杰伦',
url: 'https://oss.barbed.cn/music/4113470514.mp3',
pic:'https://img4.kuwo.cn/star/albumcover/120/72/44/3648126291.jpg', // 封面图片
lrc:
' [00:00.000] 作词 : 周杰伦'+
'[00:01.000] 作曲 : 周杰伦'+
'[00:03.00]编曲:黄雨勋'+
'[00:04.00]制作人:周杰伦'+
'[00:05.00]合声编写:周杰伦'+
'[00:06.00]合声:周杰伦'+
'[00:07.00]录音师:杨瑞代'+
'[00:08.00]录音室:JVR Studio'+
'[00:09.00]混音师:杨大纬'+
'[00:10.00]混音录音室:杨大纬录音工作室'+
'[00:11.00]OP:JVR Music Intl Ltd.'+
'[00:12.00]ISRC TW-K97-08-015-11'+
'[00:31.00]对这个世界如果你有太多的抱怨'+
'[00:34.05]跌倒了就不敢继续往前走'+
'[00:37.02]为什么人要这么的脆弱 堕落'+
'[00:41.55]请你打开电视看看'+
'[00:43.14]多少人为生命在努力勇敢的走下去'+
'[00:46.89]我们是不是该知足'+
'[00:49.43]珍惜一切 就算没有拥有'+
'[00:54.24]还记得你说家是唯一的城堡'+
'[00:57.49]随着稻香河流继续奔跑'+
'[01:00.42]微微笑 小时候的梦我知道'+
'[01:05.51]不要哭让萤火虫带着你逃跑'+
'[01:09.21]乡间的歌谣永远的依靠'+
'[01:12.12]回家吧 回到最初的美好'+
'[01:41.14]不要这么容易就想放弃 就像我说的'+
'[01:44.59]追不到的梦想 换个梦不就得了'+
'[01:47.55]为自己的人生鲜艳上色 先把爱涂上喜欢的颜色'+
'[01:51.80]笑一个吧 功成名就不是目的'+
'[01:55.62]让自己快乐快乐这才叫做意义'+
'[01:58.51]童年的纸飞机 现在终于飞回我手里'+
'[02:04.41]所谓的那快乐 赤脚在田里追蜻蜓追到累了'+
'[02:08.62]偷摘水果被蜜蜂给叮到怕了 谁在偷笑呢'+
'[02:13.16]我靠着稻草人吹着风唱着歌睡着了'+
'[02:16.72]哦 哦 午后吉它在虫鸣中更清脆'+
'[02:19.58]哦 哦 阳光洒在路上就不怕心碎'+
'[02:22.53]珍惜一切 就算没有拥有'+
'[02:27.36]还记得你说家是唯一的城堡'+
'[02:31.24]随着稻香河流继续奔跑'+
'[02:34.18]微微笑 小时候的梦我知道'+
'[02:39.35]不要哭让萤火虫带着你逃跑'+
'[02:42.94]乡间的歌谣永远的依靠'+
'[02:45.91]回家吧 回到最初的美好'+
'[02:51.03]还记得你说家是唯一的城堡'+
'[02:54.55]随着稻香河流继续奔跑'+
'[02:57.62]微微笑 小时候的梦我知道'+
'[03:02.67]不要哭让萤火虫带着你逃跑'+
'[03:06.35]乡间的歌谣永远的依靠'+
'[03:09.23]回家吧 回到最初的美好'
}
}
}
},
},
mounted():{
this.openInfo()
},
methods:{
openInfo() {
const h = this.$createElement;
const notify = this.$notify({
title: '播放音乐',
message: h(
"p",
{
style:"width: 250px;display: flex;justify-content: space-between;",
},
[
h("span", null, '是否播放音乐'),
h(
"a",
{
style: "color: #409EFF;cursor: pointer;",
on: {
click: this.openMusic,
},
},
"点击播放"
),
]
),
position: "top-right",
duration: 10000,
customClass: "custom-class",
});
this.notify = notify;
},
openMusic() {
console.log('打开音乐');
this.$refs.aplayer.play();
this.notify.close();
},
}
参考文章:https://blog.csdn.net/tt18473481961/article/details/108438668
点击查看项目中文文档
nuxt.js项目中添加vue-aplayer音乐播放器