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: '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 objects| Default 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! 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
Hot AI Tools
Undresser.AI UndressAI-powered app for creating realistic nude photos 
AI Clothes RemoverOnline AI tool for removing clothes from photos. 
Undress AI ToolUndress images for free 
Clothoff.ioAI clothes remover 
AI Hentai GeneratorGenerate AI Hentai for free. 
Hot Article
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago
By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle Solution
3 weeks ago
By DDD
What's New in Windows 11 KB5054979 & How to Fix Update Issues
2 weeks ago
By DDD
Will R.E.P.O. Have Crossplay?
1 months ago
By 尊渡假赌尊渡假赌尊渡假赌
Hot Tools
Notepad++7.3.1Easy-to-use and free code editor 
SublimeText3 Chinese versionChinese version, very easy to use 
Zend Studio 13.0.1Powerful PHP integrated development environment 
Dreamweaver CS6Visual web development tools 
SublimeText3 Mac versionGod-level code editing software (SublimeText3)
Hot Topics
CakePHP Tutorial
1382
52
How do I create and publish my own JavaScript libraries?
Mar 18, 2025 pm 03:12 PM
Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies. 
How do I optimize JavaScript code for performance in the browser?
Mar 18, 2025 pm 03:14 PM
The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed. 
What should I do if I encounter garbled code printing for front-end thermal paper receipts?
Apr 04, 2025 pm 02:42 PM
Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing... 
Who gets paid more Python or JavaScript?
Apr 04, 2025 am 12:09 AM
There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills. 
How do I debug JavaScript code effectively using browser developer tools?
Mar 18, 2025 pm 03:16 PM
The article discusses effective JavaScript debugging using browser developer tools, focusing on setting breakpoints, using the console, and analyzing performance. 
How do I use source maps to debug minified JavaScript code?
Mar 18, 2025 pm 03:17 PM
The article explains how to use source maps to debug minified JavaScript by mapping it back to the original code. It discusses enabling source maps, setting breakpoints, and using tools like Chrome DevTools and Webpack. 
How to merge array elements with the same ID into one object using JavaScript?
Apr 04, 2025 pm 05:09 PM
How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID... 
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development. 
|
