Solve the problem when using the vue-aplayer plug-in, vue-aplayer plug-in

Solve the problem when using the vue-aplayer plug-in, vue-aplayer plug-in

This article describes how to solve the problem when using the vue-aplayer plug-in:

Install

$ npm install vue-aplayer --save

Use

<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   } })

Attribute

Most of these attributes are the same as those of Aplayer.

Attribute name	Type	Default Value	Description
Narrow	Boolean	False	Compact style
Autoplay	String	Null	Whether to play the video automatically. If it is null, the video will not be played automatically.
Showlrc	Boolean	False	Show lyrics
Mutex	Boolean	False	Pause other music when playing a music.
Theme	String	'# B7daff' (light blue)	Subject color
Mode	String	'Circulation'	Playing mode, random: random mode sigle: Single Loop circulation: List loop order: sequential playback (after the list is played, it stops)
Preload	String	'Auto'	Music loading method, none, metadata, auto
Listmaxheight	String	None	Maximum height of the playlist
Music	String	Object or Array	Song information. For details, see "song information" below"

Song Information

Attribute music can be an object type that contains song information or an array type that contains these objects.

Attribute name	Default Value	Description
Title	'Untidled'	Song name
Author	'Unknown'	Artist
Url	Required	Song address
Pic	None	Song poster
Lrc	None	Address of the lyrics or lyrics File

Event

Event name	Parameters	Description
Play	None	Triggered when playing
Pause	None	Triggered when paused
Canplay	None	Triggered when data supports playback.
Playing	None	Timed triggering during playback
Ended	None	Triggered when playback is stopped.
Error	None	Triggered when an error occurs
Update: mode	None	See the mode attribute above.

I just contacted vue-aplayer and found its usage on github. First, we need npm install vue-aplayer-save, and then import VueAplayer from 'vue-aplay' to the component ', do not forget to register components :{
'A-player': VueAplayer
}
There is another problem here: Use v-if instead of v-show. Because it is an asynchronous request, there is no song in the player at first, otherwise, the plug-in will become a player by default, resulting in an error.

-2017.12.2: the current code version is like this ~

<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>

There is still a problem. After checking it online, it is because the pause () method is executed immediately after the play () method is executed. As for the solution ...... Still searching

The problem we encountered earlier was:

~~~~ Want to understand some

This. musicList is empty, and obj is empty.

If you assign a value to this. musicList, the push operation will be performed twice.

Actually, I really want to understand it.

The supplemented code looks more intuitive.

 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(); 

The error is:

The correct one is soy sauce.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.