歡迎大家進群，一起探討學習

微信公眾號，每天給大家提供技術干貨

博主技術筆記

博主網站地址1

博主網站地址2

博主開源微服架構前后端分離技術博客項目源碼地址，歡迎各位star

vue引入音樂播放器插件

npm install @moefe/vue-aplayer

main.js引入

import APlayer from '@moefe/vue-aplayer' Vue.use(APlayer, {defaultCover: 'https://github.com/u3u.png',productionTip: true, });

測試

<aplayer :audio="audio" :lrcType="1" fixed />data() {return {audio: [{name: "聽媽媽的話",artist: "周杰倫",url:"http://www.170mv.com/kw/antiserver.kuwo.cn/anti.s?rid=MUSIC_138243&response=res&format=mp3|aac&type=convert_url&br=128kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3",cover: 'http://img1.kuwo.cn/star/starheads/240/42/97/3914752958.jpg', // prettier-ignorelrc:"[00:11.64]小朋友 你是否有很多問號 \n[00:14.26]為什么 別人在那看漫畫 \n[00:16.89]我卻在學畫畫 對這鋼琴說話 \n[00:19.37]別人在玩游戲 我卻靠在墻壁背我的ABC \n[00:22.38]我說我要一架大大的飛機 \n[00:24.91]我卻得到一只舊舊螺旋機 \n[00:27.48]為什么要聽媽媽的話 \n[00:29.79]長大后你就會開始懂得這段話 哼 \n[00:32.26]長大后我開始明白 \n[00:35.23]為什么我 跑得比別人快 \n[00:36.64]飛得比別人高 \n[00:37.88]將來大家看的都是我畫的漫畫 \n[00:40.23]大家唱的都是 我寫的歌 \n[00:42.95]媽媽的辛苦 不讓你看見 \n[00:45.57]溫暖的事都在她心里面 \n[00:48.01]有空就得多摸摸她的手 \n[00:50.70]把手牽著一起夢游 \n[00:53.10]聽媽媽的話 別讓她受傷 \n[01:03.14]想快快長大 才能保護她 \n[01:12.93]美麗的白發 幸福中發芽 \n[01:23.96]天使的魔法 溫暖中慈祥 \n[01:34.43]在你的未來 音樂是你的王牌 \n[01:36.21]那王牌談的戀愛 \n[01:37.68]而我不想把你教壞 \n[01:39.21]還是聽媽媽的話吧 \n[01:40.52]晚點在戀愛吧 \n[01:41.96]我知道你未來的路 \n[01:44.09]干嘛比我更清楚 \n[01:45.40]你因為太多學習的同學 \n[01:46.53]在這塊寫東寫西 \n[01:47.50]但我建議最好聽媽媽 \n[01:49.10]我會用功讀書 \n[01:50.23]用功讀書怎么會從我嘴巴說出 \n[01:52.34]不想你輸所以要叫你用功讀書 \n[01:55.47]媽媽挑給你的毛病你要好好的收著 \n[01:57.56]因為不知道是我要告訴她我還留著 \n[01:59.91]對了 我會遇到了周潤發 \n[02:02.31]所以你可以跟同學炫耀 \n[02:03.38]賭神未來是你爸爸 \n[02:04.47]我找不到你寫的情書 \n[02:06.94]你喜歡的要承認 \n[02:08.02]因為我會了解你會在操場上牽她 \n[02:09.40]你會開始喜歡唱流行歌 \n[02:12.81]因為張學友開始準備唱吻別 \n[02:15.43]聽媽媽的話 別讓她受傷 \n[02:26.22]想快快長大 才能保護她 \n[02:36.16]美麗的白發 幸福中發芽 \n[02:46.66]天使的魔法 溫暖中慈祥 \n[02:56.68]聽媽媽的話 別讓她受傷 \n[03:07.46]想快快長大 才能保護她 \n[03:17.27]長大后我開始明白 為什么我 \n[03:20.81]跑得比別人快 飛得比別人高 \n[03:22.56]將來大家看的都是我畫的漫畫 \n[03:25.52]大家唱的都是我寫的歌 \n[03:28.31]媽媽的辛苦她不讓你看見 \n[03:30.72]溫暖的事都在她心里面 \n[03:33.31]有空就得多摸摸她的手 \n[03:36.15]把手牽著一起夢游 \n[03:38.34]聽媽媽的話 別讓她受傷 \n[03:48.72]想快快長大 才能保護她 \n[03:59.10]美麗的白發 幸福中發芽 \n[04:09.32]天使的魔法 溫暖中慈祥",},{name: "以父之名",artist: "周杰倫",url:"http://www.170mv.com/kw/antiserver.kuwo.cn/anti.s?rid=MUSIC_28386348&response=res&format=mp3|aac&type=convert_url&br=128kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3",cover: 'http://img1.kuwo.cn/star/starheads/240/42/97/3914752958.jpg?param=300y300', // prettier-ignorelrc:"\n[00:18.80]以父之名 \n[00:35.80]周杰倫 \n[00:52.80]制作人：秋曉之 QQ：285552115 \n[01:09.80] \n[01:26.56]微涼的晨露沾濕黑禮服 \n[01:29.67]石板路有霧父在低訴 \n[01:32.52]無奈的覺悟只能更殘酷 \n[01:35.33]一切都為了通往圣堂的路 \n[01:38.02]吹不散的霧隱沒了意圖 \n[01:40.67]誰輕柔踱步停住 \n[01:43.34]還來不及哭穿過的子彈就帶走溫度 \n[01:47.15] \n[01:48.69]我們每個人都有罪 \n[01:50.44]犯著不同的罪 \n[01:51.77]我能決定誰對 \n[01:53.15]誰又該要沉睡 \n[01:54.53]爭論不能解決 \n[01:55.76]在永無止境的夜 \n[01:57.35]關掉你的嘴 \n[01:58.69]唯一的恩惠 \n[01:59.88]擋在前面的人都有罪 \n[02:01.18]后悔也無路可退 \n[02:02.64]以父之名判決 \n[02:03.96]那感覺沒有適合詞匯 \n[02:05.59]就像邊笑邊掉淚 \n[02:07.04]凝視著完全的黑 \n[02:08.42]阻擋悲劇蔓延的悲劇會讓我沉醉 \n[02:10.72]低頭親吻我的左手 \n[02:12.17]換取被寬恕的承諾 \n[02:13.50]老舊管風琴在角落 \n[02:14.93]一直一直一直伴奏 \n[02:16.25]黑色簾幕被風吹動 \n[02:17.66]陽光無言地穿透 \n[02:19.18]灑向那群被我馴服后的 獸 \n[02:21.88]沉默地喊叫沉默地喊叫 \n[02:23.55]孤單開始發酵 \n[02:24.88]不停對著我嘲笑 \n[02:26.29]回憶逐漸燃燒 \n[02:27.66]曾經純真的畫面 \n[02:28.77]殘忍地溫柔出現 \n[02:30.21]脆弱時間到 \n[02:31.33]我們一起來禱告 \n[02:32.95]仁慈的父我已墜入 \n[02:35.73]看不見罪的國度 \n[02:38.77]請原諒我的自負 \n[02:41.68] \n[02:43.77]沒人能說沒人可說 \n[02:46.59]好難承受 \n[02:48.67]榮耀的背后刻著一道孤獨 \n[02:52.52] \n[02:54.66]閉上雙眼我又看見 \n[02:57.67]當年那夢的畫面 \n[03:00.59]天空是蒙蒙的霧 \n[03:03.56] \n[03:05.76]父親牽著我的雙手 \n[03:08.66]輕輕走過 \n[03:10.67]清晨那安安靜靜的石板路 \n[03:14.58] \n[03:46.34]低頭親吻我的左手 \n[03:47.88]換取被寬恕的承諾 \n[03:49.21]老舊管風琴在角落 \n[03:50.68]一直一直一直伴奏 \n[03:52.21]黑色簾幕被風吹動 \n[03:53.55]陽光無言地穿透 \n[03:54.88]灑向那群被我馴服后的 獸 \n[03:57.56]沉默地喊叫沉默地喊叫 \n[03:59.21]孤單開始發酵 \n[04:00.68]不停對著我嘲笑 \n[04:01.77]回憶逐漸燃燒 \n[04:03.33]曾經純真的畫面 \n[04:04.54]殘忍地溫柔出現 \n[04:05.69]脆弱時間到 \n[04:06.88]我們一起來禱告 \n[04:08.65]仁慈的父我已墜入 \n[04:11.90]看不見罪的國度 \n[04:14.58]請原諒我的自負 \n[04:17.97] \n[04:19.88]沒人能說沒人可說 \n[04:22.85]好難承受 \n[04:24.66]榮耀的背后刻著一道孤獨 \n[04:27.67] \n[04:30.84]仁慈的父我已墜入 \n[04:36.44]看不見罪的國度 \n[04:42.07]請原諒我 我的自負 \n[04:47.36]刻著一道孤獨 \n[04:52.74]仁慈的父我已墜入 \n[04:55.56]看不見罪的國度 \n[04:58.28]請原諒我的自負 \n[05:01.75] \n[05:03.58]沒人能說沒人可說 \n[05:06.49]好難承受 \n[05:08.66]榮耀的背后刻著一道孤獨 \n[05:12.29] \n[05:14.32]那斑駁的家徽 我擦拭了一夜(閉上雙眼我又看見) \n[05:17.45]孤獨的光輝 我才懂的感覺(當年那夢的畫面) \n[05:20.13]燭光 不 不 停的 搖晃(天空是蒙蒙的霧) \n[05:22.41]貓頭鷹在 窗欞上 對著遠方眺望 \n[05:25.50]通向 大廳的長廊 (父親牽著我的雙手) \n[05:28.42]一樣 說不出的滄桑(輕輕走過)",},{name: "Wayward One",artist: "Jillian Rae",url:"http://www.170mv.com/kw/antiserver.kuwo.cn/anti.s?rid=MUSIC_72217588&response=res&format=mp3|aac&type=convert_url&br=128kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3",cover: 'https://p1.music.126.net/K0-IPcIQ9QFvA0jXTBqoWQ==/109951163636756693.jpg?param=300y300', // prettier-ignorelrc: "",},{name: "這一路走來 (cover: 楊宗緯) - 竹之顏",artist: " 楊宗緯",url:"http://www.170mv.com/kw/antiserver.kuwo.cn/anti.s?rid=MUSIC_150691890&response=res&format=mp3|aac&type=convert_url&br=128kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3",cover: 'https://p1.music.126.net/K0-IPcIQ9QFvA0jXTBqoWQ==/109951163636756693.jpg?param=300y300', // prettier-ignorelrc: "",},{name: "一定要愛你",artist: " 孫露",url:"https://sharefs.yun.kugou.com/202011071130/3810fcfa192d477d9adc3c2e0b037d8e/G206/M07/14/07/Dg4DAF5gb2WAC_wFAEIUFnm0ih0646.mp3",cover: 'https://p1.music.126.net/K0-IPcIQ9QFvA0jXTBqoWQ==/109951163636756693.jpg?param=300y300', // prettier-ignorelrc: "",},],};},

總結

以上是生活随笔為你收集整理的vue引入音乐播放器插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。