简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

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

亚连
Release： 2018-06-02 09:43:37
Original
4320 people have browsed it

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
Copy after login

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
   }
 })
Copy after login

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

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 pausedcanplay
When Data supports triggering during playbackplaying
will be triggered regularly during playbackended
Triggered when playback stopserror
Triggered when an error occursupdate: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>
Copy after login

还是有问题，网上查过之后，是因为在执行了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();
Copy after login

错误是这样的

正确的是酱紫的

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

通过在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!

Related labels：
Appear
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
Vue 3 and Vuetify 3 access SCSS/SASS variables in components I want to use predefined variables in my Vue3 component. <template><divclass=&quo...
From 2023-11-17 13:52:29
0
1
293
Module is not defined in Vue project I just created a new Vue application by running npmini tvue@latest as specified in the off...
From 2023-11-17 12:38:53
0
2
394
Validate fields of objects in form - Vue 3 + Vee-validate + yes I have a form where some fields are inside an object: <scriptsetuplang="ts"&g...
From 2023-11-16 13:56:09
0
1
169
Vue 3 dynamically imports based on Props I am using unplugin-icon to create an icon component, normally I can import e.g. //scripti...
From 2023-11-16 11:40:01
0
1
235
Vue 3 Composition API - Disable form submit button until all conditions are met I want to disable the form submit button until all input fields are filled in and there ar...
From 2023-11-13 09:41:53
0
3
438
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！