使用vue-aplayer插件時(shí)出現(xiàn)的問題的解決
本文介紹了使用vue-aplayer插件時(shí)出現(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的選項(xiàng)一樣
屬性名 | 類型 | 默認(rèn)值 | 描述 |
---|---|---|---|
narrow | Boolean | false | 緊湊樣式 |
autoplay | String | null | 是否自動(dòng)播放,為null表示不會(huì)自動(dòng)播放 |
showlrc | Boolean | false | 是否顯示歌詞 |
mutex | Boolean | false | 當(dāng)一首音樂正在播放時(shí),暫停其他音樂 |
theme | String | '#b7daff'(淺藍(lán)色) | 主題顏色 |
mode | String | 'circulation' | 播放模式,random:隨機(jī)模式 sigle:單曲循環(huán) circulation:列表循環(huán) order:順序播放(列表播放完即停止) |
preload | String | 'auto' | 音樂加載方式,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',別忘了注冊components: {
'a-player': VueAplayer
}
這里還有一個(gè)問題,用v-if,而不是v-show,因?yàn)槭钱惒秸埱螅砸婚_始播放器中是沒有歌曲的,所有給了個(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ǎng)上查過之后,是因?yàn)樵趫?zhí)行了play()方法以后立即執(zhí)行pause()方法,至于解決方法……還在尋找中
之前遇到的問題是
~~~~想明白了一些
醬紫,this.musicList是空的,obj就是空的嘍。
如果先給this.musicList賦值了,那么push之后就會(huì)醬紫,重復(fù)兩遍
其實(shí)是很好想明白的哈。
補(bǔ)充的代碼,看起來更直觀
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ò)誤是這樣的
正確的是醬紫的
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04對(duì)vue中methods互相調(diào)用的方法詳解
今天小編就為大家分享一篇對(duì)vue中methods互相調(diào)用的方法詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08vue3中keep-alive和vue-router的結(jié)合使用方式
這篇文章主要介紹了vue3中keep-alive和vue-router的結(jié)合使用方式,?具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue項(xiàng)目在IE瀏覽器下運(yùn)行空白問題及解決
IE11瀏覽器無法解析ES6語法導(dǎo)致Vue項(xiàng)目在IE11下顯示空白,解決方法包括安裝babel-polyfill,并在項(xiàng)目的main.js文件中引入babel-polyfill,此外,js-base64版本3及以上不兼容IE11,解決辦法是使用版本3以下的js-base64,這些措施可以幫助兼容IE11,確保項(xiàng)目正常運(yùn)行2024-09-09vue.js中Vue-router 2.0基礎(chǔ)實(shí)踐教程
這篇文章主要給大家介紹了關(guān)于vue.js中Vue-router 2.0基礎(chǔ)實(shí)踐的相關(guān)資料,其中包括vue-router 2.0的基礎(chǔ)用法、動(dòng)態(tài)路由匹配、嵌套路由、編程式路由、命名路由以及命名視圖等相關(guān)知識(shí),需要的朋友可以參考借鑒,下面來一起看看吧。2017-05-05詳解vue2.0模擬后臺(tái)json數(shù)據(jù)
這篇文章主要介紹了vue2.0模擬后臺(tái)json數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05Vue?warn:Property?"state"?was?accessed?during
這篇文章主要為大家介紹了Vue?warn:Property?"state"?was?accessed?during?render的報(bào)錯(cuò)解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06