Maison > interface Web > js tutoriel > le corps du texte

Comment résoudre certains problèmes lors de l'utilisation du plug-in vue-aplayer

亚连
Libérer: 2018-06-02 09:43:37
original
4368 Les gens l'ont consulté

Cet article présente principalement les solutions aux problèmes qui surviennent lors de l'utilisation du plug-in vue-aplayer. Maintenant, je le partage avec vous et vous donne une référence.

Cet article présente la solution aux problèmes qui surviennent lors de l'utilisation du plug-in vue-aplayer. J'aimerais le partager avec vous. Les détails sont les suivants :

. Installation

$ npm install vue-aplayer --save
Copier après la connexion

Utilisez les attributs

<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
   }
 })
Copier après la connexion

La plupart de ces attributs sont les mêmes comme options d'Aplayer

属性名类型默认值描述
narrowBooleanfalse紧凑样式
autoplayStringnull是否自动播放,为null表示不会自动播放
showlrcBooleanfalse是否显示歌词
mutexBooleanfalse当一首音乐正在播放时,暂停其他音乐
themeString'#b7daff'(浅蓝色)主题颜色
modeString'circulation'播放模式,random:随机模式 sigle:单曲循环 circulation:列表循环 order:顺序播放(列表播放完即停止)
preloadString'auto'音乐加载方式,none,metadata,auto
listmaxheightStringnone播放列表的最大高度
musicStringObject or Array歌曲信息,详情见下方“歌曲信息”

Informations sur la chanson

La musique d'attribut peut être soit un type d'objet contenant des informations sur la chanson, soit un type de tableau contenant ces objets

属性名默认值描述
title'Untitled'歌曲名
author'Unknown'歌手
urlrequired歌曲地址
picnone歌曲海报
lrcnone歌词或者歌词文件的地址

Événement

事件名参数描述
playnone开始播放时触发
pausenone暂停时触发
canplaynone当数据支持播放时触发
playingnone播放时会定时触发
endednone停止播放时触发
errornone错误出现时触发
update:modenone见上面的mode属性

刚刚接触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>
Copier après la connexion

还是有问题,网上查过之后,是因为在执行了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();
Copier après la connexion

错误是这样的

正确的是酱紫的

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

相关文章:

通过在vue项目中使用ueditor(详细教程)

通过在vue项目中引入noVNC远程桌面的方法步骤有哪些

利用nodejs爬虫使用superagent和cheerio的方法

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!