使用vue-aplayer插件时出现的问题的解决
程序员文章站
2022-05-25 21:39:09
本文介绍了使用vue-aplayer插件时出现的问题的解决,分享给大家,具体如下:
安装
$ npm install vue-aplayer --save...
本文介绍了使用vue-aplayer插件时出现的问题的解决,分享给大家,具体如下:
安装
$ npm install vue-aplayer --save
使用
<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 } })
属性
这些属性大部分跟aplayer的选项一样
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
narrow | boolean | false | 紧凑样式 |
autoplay | string | null | 是否自动播放,为null表示不会自动播放 |
showlrc | boolean | false | 是否显示歌词 |
mutex | boolean | false | 当一首音乐正在播放时,暂停其他音乐 |
theme | string | '#b7daff'(浅蓝色) | 主题颜色 |
mode | string | 'circulation' | 播放模式,random:随机模式 sigle:单曲循环 circulation:列表循环 order:顺序播放(列表播放完即停止) |
preload | string | 'auto' | 音乐加载方式,none,metadata,auto |
listmaxheight | string | none | 播放列表的最大高度 |
music | string | object or array | 歌曲信息,详情见下方“歌曲信息” |
歌曲信息
属性music既可以是包含歌曲信息的对象类型,也可以是包含这些对象的数组类型
属性名 | 默认值 | 描述 |
---|---|---|
title | 'untitled' | 歌曲名 |
author | 'unknown' | 歌手 |
url | required | 歌曲地址 |
pic | none | 歌曲海报 |
lrc | none | 歌词或者歌词文件的地址 |
事件
事件名 | 参数 | 描述 |
---|---|---|
play | none | 开始播放时触发 |
pause | none | 暂停时触发 |
canplay | none | 当数据支持播放时触发 |
playing | none | 播放时会定时触发 |
ended | none | 停止播放时触发 |
error | none | 错误出现时触发 |
update:mode | none | 见上面的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> <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>
还是有问题,网上查过之后,是因为在执行了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();
错误是这样的
正确的是酱紫的
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
Microsoft Visual Studio 2010 Ultimate 下安装wcsf 2010出现问题的解决方法
-
Tomcat中应用调用Libvirt库进行控制时可能导致线程卡死问题的解决方法
-
php生成二维码时出现中文乱码的解决方法
-
AndroidStudio中AVD虚拟机设备空间不足调试过程出现的黑屏问题及解决方案
-
VUE使用vuex解决模块间传值问题的方法
-
MySQL插入时间差八小时问题的解决方法
-
风行播放时花屏怎么办?解决风行播放器花屏问题的方法
-
iPad Air的12个使用问题及解决办法汇总
-
解决MYSQL出现Can''t create/write to file ''#sql_5c0_0.MYD''的问题
-
在使用MAC OS X打印文件时发生各种问题的解决方法