How to solve some problems when using the vue-aplayer plug-in

This article mainly introduces the solutions to the problems that occur when using the vue-aplayer plug-in. Now I will share it with you and give you a reference.

This article introduces the solution to the problems that occur when using the vue-aplayer plug-in, and shares it with everyone, as follows:

Installation

$ npm install vue-aplayer --save

Use

<aplayer autoplay :music="{
 title: &#39;Preparation&#39;,
 author: &#39;Hans Zimmer/Richard Harvey&#39;,
 url: &#39;http://devtest.qiniudn.com/Preparation.mp3&#39;,
 pic: &#39;http://devtest.qiniudn.com/Preparation.jpg&#39;,
 lrc: &#39;[00:00.00]lrc here\n[00:01.00]aplayer&#39;
}">
</aplayer>
// ES6
 import Aplayer from &#39;vue-aplayer&#39;
  
 new Vue({
   components: {
     Aplayer
   }
 })

Attributes

Most of these attributes are the same as Aplayer’s options

##narrowBooleanfalseCompact styleautoplayStringnullWhether to play automatically , null means it will not play automaticallyshowlrcBooleanfalseWhether to display lyricsmutexBooleanfalseWhen one piece of music is playing, pause other music themeString'#b7daff'(light blue)Theme colormode String'circulation'Play mode, random: random mode sigle: single loop circulation: list loop order: sequential play (stop after the list is played) preloadString'auto'Music loading method, none, metadata, autolistmaxheight StringnoneMaximum height of playlistmusicStringObject or ArraySong information, see "Song Information" below for details

Attributes Name	Type	Default value	Description

Song Information

Properties music can be either an object type containing song information or an array type containing these objects

Attribute nameDefault valueDescriptiontitle'Untitled'Song Title## author##urlrequiredSong addresspicnoneSong posterlrcnoneLyrics Or the address of the lyrics fileEvent

'Unknown'	Singer

Event name Parameter Description##playnonenonenonenonenonenonenone

Triggered when starting playback		pause
Triggered when paused		canplay
When Data supports triggering during playback		playing
will be triggered regularly during playback		ended
Triggered when playback stops		error
Triggered when an error occurs		update:mode
See mode attribute above		刚刚接触vue-aplayer,从github上找到了用法，首先需要npm install vue-aplayer –save ，之后在组件中引入import VueAplayer from ‘vue-aplayer'，别忘了注册components: { 'a-player': VueAplayer } 这里还有一个问题，用v-if,而不是v-show,因为是异步请求，所以一开始播放器中是没有歌曲的，所有给了个v-if不然会插件默认会先生成播放器，导致报错 –2017.12.2 ,现在的代码版本是这样的~ <template> <p class="music"> <a-player v-if=&#39;isShow&#39; :autoplay=&#39;true&#39; :music="musicList"></a-player> </p> </template> <script> import Axios from &#39;axios&#39; import VueAplayer from &#39;vue-aplayer&#39; export default{ data(){ return { musicList:[], isShow:false } }, mounted(){ Axios.get(&#39;../static/data/musicdata.json&#39;).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: { &#39;a-player&#39;: VueAplayer } } </script> <style> .music{ margin:1rem 0; } </style> 还是有问题，网上查过之后，是因为在执行了play()方法以后立即执行pause()方法，至于解决方法……还在寻找中 之前遇到的问题是 ~~~~想明白了一些 酱紫，this.musicList是空的，obj就是空的喽。 如果先给this.musicList赋值了，那么push之后就会酱紫，重复两遍 其实是很好想明白的哈。 补充的代码，看起来更直观 Axios.get(&#39;../static/data/musicdata.json&#39;).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(); 错误是这样的 正确的是酱紫的 上面是我整理给大家的，希望今后会对大家有帮助。 相关文章： 通过在vue项目中使用ueditor（详细教程） 通过在vue项目中引入noVNC远程桌面的方法步骤有哪些 利用nodejs爬虫使用superagent和cheerio的方法

The above is the detailed content of How to solve some problems when using the vue-aplayer plug-in. For more information, please follow other related articles on the PHP Chinese website!