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: '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 } })
Attributes
Most of these attributes are the same as Aplayer’s options
Attributes Name | Type | Default value | Description |
---|---|---|---|
Boolean | false | Compact style | |
String | null | Whether to play automatically , null means it will not play automatically | |
Boolean | false | Whether to display lyrics | |
Boolean | false | When one piece of music is playing, pause other music | |
String | '#b7daff'(light blue) | Theme color | |
String | 'circulation' | Play mode, random: random mode sigle: single loop circulation: list loop order: sequential play (stop after the list is played) | |
String | 'auto' | Music loading method, none, metadata, auto | |
String | none | Maximum height of playlist | |
String | Object or Array | Song information, see "Song Information" below for details |
Song Information
Properties music can be either an object type containing song information or an array type containing these objectsDefault value | Description | |
---|---|---|
'Untitled' | Song Title | |
'Unknown' | Singer | ##url |
Song address | pic | |
Song poster | lrc | |
Lyrics Or the address of the lyrics file |
Description | ||
---|---|---|
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: { –2017.12.2 ,现在的代码版本是这样的~ <template> <p class="music"> <a-player v-if='isShow' :autoplay='true' :music="musicList"></a-player> </p> </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> Copy after login 还是有问题,网上查过之后,是因为在执行了play()方法以后立即执行pause()方法,至于解决方法……还在寻找中 之前遇到的问题是 ~~~~想明白了一些 酱紫,this.musicList是空的,obj就是空的喽。 如果先给this.musicList赋值了,那么push之后就会酱紫,重复两遍 其实是很好想明白的哈。 补充的代码,看起来更直观 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(); Copy after login 错误是这样的 正确的是酱紫的 上面是我整理给大家的,希望今后会对大家有帮助。 相关文章: 利用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!
Related labels:
source:php.cn
Previous article:How to use the table in Element-ui to implement filter conditions and change the table content
Next article:How to implement encapsulated components through VUE2.0+Element-UI+Echarts
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Is there a way to set the route prop in vue?
I want to navigate to a specific tab in the page this.$router.push({name:"AdminNotifi...
From 2024-04-06 11:35:59
0
1
456
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
|