使用vue-aplayer插件時出現(xiàn)的問題的解決
本文介紹了使用vue-aplayer插件時出現(xiàn)的問題的解決,分享給大家,具體如下:
安裝
$ 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的選項一樣
屬性名 | 類型 | 默認值 | 描述 |
---|---|---|---|
narrow | Boolean | false | 緊湊樣式 |
autoplay | String | null | 是否自動播放,為null表示不會自動播放 |
showlrc | Boolean | false | 是否顯示歌詞 |
mutex | Boolean | false | 當(dāng)一首音樂正在播放時,暫停其他音樂 |
theme | String | '#b7daff'(淺藍色) | 主題顏色 |
mode | String | 'circulation' | 播放模式,random:隨機模式 sigle:單曲循環(huán) circulation:列表循環(huán) order:順序播放(列表播放完即停止) |
preload | String | 'auto' | 音樂加載方式,none,metadata,auto |
listmaxheight | String | none | 播放列表的最大高度 |
music | String | Object or Array | 歌曲信息,詳情見下方“歌曲信息” |
歌曲信息
屬性music既可以是包含歌曲信息的對象類型,也可以是包含這些對象的數(shù)組類型
屬性名 | 默認值 | 描述 |
---|---|---|
title | 'Untitled' | 歌曲名 |
author | 'Unknown' | 歌手 |
url | required | 歌曲地址 |
pic | none | 歌曲海報 |
lrc | none | 歌詞或者歌詞文件的地址 |
事件
事件名 | 參數(shù) | 描述 |
---|---|---|
play | none | 開始播放時觸發(fā) |
pause | none | 暫停時觸發(fā) |
canplay | none | 當(dāng)數(shù)據(jù)支持播放時觸發(fā) |
playing | none | 播放時會定時觸發(fā) |
ended | none | 停止播放時觸發(fā) |
error | none | 錯誤出現(xiàn)時觸發(fā) |
update:mode | none | 見上面的mode屬性 |
剛剛接觸vue-aplayer,從github上找到了用法,首先需要npm install vue-aplayer –save ,之后在組件中引入import VueAplayer from ‘vue-aplayer',別忘了注冊components: {
'a-player': VueAplayer
}
這里還有一個問題,用v-if,而不是v-show,因為是異步請求,所以一開始播放器中是沒有歌曲的,所有給了個v-if不然會插件默認會先生成播放器,導(dǎo)致報錯
–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ǎng)上查過之后,是因為在執(zhí)行了play()方法以后立即執(zhí)行pause()方法,至于解決方法……還在尋找中
之前遇到的問題是
~~~~想明白了一些
醬紫,this.musicList是空的,obj就是空的嘍。
如果先給this.musicList賦值了,那么push之后就會醬紫,重復(fù)兩遍
其實是很好想明白的哈。
補充的代碼,看起來更直觀
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();
錯誤是這樣的
正確的是醬紫的
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue3中keep-alive和vue-router的結(jié)合使用方式
這篇文章主要介紹了vue3中keep-alive和vue-router的結(jié)合使用方式,?具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue.js中Vue-router 2.0基礎(chǔ)實踐教程
這篇文章主要給大家介紹了關(guān)于vue.js中Vue-router 2.0基礎(chǔ)實踐的相關(guān)資料,其中包括vue-router 2.0的基礎(chǔ)用法、動態(tài)路由匹配、嵌套路由、編程式路由、命名路由以及命名視圖等相關(guān)知識,需要的朋友可以參考借鑒,下面來一起看看吧。2017-05-05Vue?warn:Property?"state"?was?accessed?during
這篇文章主要為大家介紹了Vue?warn:Property?"state"?was?accessed?during?render的報錯解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06