這篇文章主要介紹如何解決使用vue-aplayer插件時(shí)出現(xiàn)的問(wèn)題,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
我們提供的服務(wù)有:成都網(wǎng)站制作、網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、白城ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的白城網(wǎng)站制作公司
具體如下:
安裝
$ npm install vue-aplayer --save
使用
<aplayer autoplay :music="{ title: 'Preparation', author: 'Hans Zimmer/Richard Harvey', url: 'http://devtest.qiniudn.com/Preparation.mp3', pic: 'http://devtest.qiniudn.com/Preparation.jpg', lrc: '[00:00.00]lrc here\n[00:01.00]aplayer' }"> </aplayer> // ES6 import Aplayer from 'vue-aplayer' new Vue({ components: { Aplayer } })
屬性
這些屬性大部分跟Aplayer的選項(xiàng)一樣
屬性名 | 類型 | 默認(rèn)值 | 描述 |
---|---|---|---|
narrow | Boolean | false | 緊湊樣式 |
autoplay | String | null | 是否自動(dòng)播放,為null表示不會(huì)自動(dòng)播放 |
showlrc | Boolean | false | 是否顯示歌詞 |
mutex | Boolean | false | 當(dāng)一首音樂(lè)正在播放時(shí),暫停其他音樂(lè) |
theme | String | '#b7daff'(淺藍(lán)色) | 主題顏色 |
mode | String | 'circulation' | 播放模式,random:隨機(jī)模式 sigle:單曲循環(huán) circulation:列表循環(huán) order:順序播放(列表播放完即停止) |
preload | String | 'auto' | 音樂(lè)加載方式,none,metadata,auto |
listmaxheight | String | none | 播放列表的最大高度 |
music | String | Object or Array | 歌曲信息,詳情見下方“歌曲信息” |
歌曲信息
屬性music既可以是包含歌曲信息的對(duì)象類型,也可以是包含這些對(duì)象的數(shù)組類型
屬性名 | 默認(rèn)值 | 描述 |
---|---|---|
title | 'Untitled' | 歌曲名 |
author | 'Unknown' | 歌手 |
url | required | 歌曲地址 |
pic | none | 歌曲海報(bào) |
lrc | none | 歌詞或者歌詞文件的地址 |
事件
事件名 | 參數(shù) | 描述 |
---|---|---|
play | none | 開始播放時(shí)觸發(fā) |
pause | none | 暫停時(shí)觸發(fā) |
canplay | none | 當(dāng)數(shù)據(jù)支持播放時(shí)觸發(fā) |
playing | none | 播放時(shí)會(huì)定時(shí)觸發(fā) |
ended | none | 停止播放時(shí)觸發(fā) |
error | none | 錯(cuò)誤出現(xiàn)時(shí)觸發(fā) |
update:mode | none | 見上面的mode屬性 |
剛剛接觸vue-aplayer,從github上找到了用法,首先需要npm install vue-aplayer –save ,之后在組件中引入import VueAplayer from ‘vue-aplayer',別忘了注冊(cè)components: {
'a-player': VueAplayer
}
這里還有一個(gè)問(wèn)題,用v-if,而不是v-show,因?yàn)槭钱惒秸?qǐng)求,所以一開始播放器中是沒(méi)有歌曲的,所有給了個(gè)v-if不然會(huì)插件默認(rèn)會(huì)先生成播放器,導(dǎo)致報(bào)錯(cuò)
–2017.12.2 ,現(xiàn)在的代碼版本是這樣的~
<template> <div class="music"> <a-player v-if='isShow' :autoplay='true' :music="musicList"></a-player> </div> </template> <script> import Axios from 'axios' import VueAplayer from 'vue-aplayer' export default{ data(){ return { musicList:[], isShow:false } }, mounted(){ Axios.get('../static/data/musicdata.json').then(res=>{ let List = res.data.musicData; // console.log(res); List.forEach(element => { let obj = { title:element.title, pic:element.musicImgSrc, url:element.src, author:element.author, lrc:"../static/"+element.lrc } this.musicList.push(obj); }); this.isShow=true; console.log(this.musicList); }).catch(); }, components: { 'a-player': VueAplayer } } </script> <style> .music{ margin:1rem 0; } </style>
還是有問(wèn)題,網(wǎng)上查過(guò)之后,是因?yàn)樵趫?zhí)行了play()方法以后立即執(zhí)行pause()方法,至于解決方法……還在尋找中
之前遇到的問(wèn)題是
~~~~想明白了一些
醬紫,this.musicList是空的,obj就是空的嘍。
如果先給this.musicList賦值了,那么push之后就會(huì)醬紫,重復(fù)兩遍
其實(shí)是很好想明白的哈。
補(bǔ)充的代碼,看起來(lái)更直觀
Axios.get('../static/data/musicdata.json').then(res=>{ // let List = res.data.musicData; // console.log(res); this.musicList.forEach(element => { let obj = { title:element.title, pic:element.musicImgSrc, url:element.src, author:element.author, lrc:"../static/"+element.lrc } this.musicList.push(obj); console.log(this.musicList); }); this.isShow=true; console.log(this.musicList); }).catch();
錯(cuò)誤是這樣的
正確的是醬紫的
以上是“如何解決使用vue-aplayer插件時(shí)出現(xiàn)的問(wèn)題”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
當(dāng)前文章:如何解決使用vue-aplayer插件時(shí)出現(xiàn)的問(wèn)題
文章位置:http://muchs.cn/article6/pgosig.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營(yíng)銷、關(guān)鍵詞優(yōu)化、建站公司、虛擬主機(jī)、Google、服務(wù)器托管
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)