微信小程序播放器的功能和使用方法
类似于酷狗之类的音乐播放器,作为App来说都太占内存了。但是自从有了小程序,就可以完全使用微信小程序播放器的功能,简单又轻便。那么微信小程序播放器有些什么功能呢?要如何使用微信小程序播放器?
微信小程序播放器功能清单
基础功能:播放,暂停,进度,停止
扩展功能:播放列表,歌曲切换,播放模式,播放事件
处理官方API的坑(BUG?)
Andriod,从暂停状态恢复播放,不会触发播放事件
手机终端,歌曲播放完成后,停止事件会触发两次
手机终端,后台播放器如果处于播放暂停状态时,播放其他歌曲会变成继续播放当前歌曲
处理不了的坑
iOS,设置进度会有严重的延迟,播放进度显示不同步,多次设置进度还会是播放器变得不稳定,所以暂时不做进度控制的功能
iOS,当小程序切换到后台执行时,除了之前播放过的歌曲,播放其他歌曲会失效
在官方的后台音乐播放API的基础上, 封装了播放器的常用功能。
如何使用微信小程序播放器
//引入
var Player=require('player.js');
//创建一个播放器实例
var player = new Player();
//小程序监听播放事件
player.event.on('play',function(data){
console.log('播放事件触发!');
});
//创建播放列表
player.list.create([
{
dataUrl:'your_music_url',
title:'music title'
id:'music id'
}
]);
//开始播放
player.start();
小程序API
player
播放器控制方法
invoke(int index)
播放列表中的指定歌曲, index为歌曲在列表中的索引。
start()
开始播放, 等同于 invoke(0)
pause()
暂停播放
resume()
恢复播放
stop()
停止播放
next()
播放下一首
prev()
播放上一首
toggleMode()
切换播放模式
return : int
当前的模式标识 1:列表循环 2:单曲循环 3:随机
data()
获取播放器信息
return: object
{
status : 1, //状态 1:播放中 2:停止 0:暂停
audio : {}, //当前播放歌曲对象
mode : 1 //播放模式
}
isPlaying() 是否播放中
return : boolean
isStopped() 是否停止
return : boolean
isPaused() 是否暂停
return : boolean
player.list
播放列表方法
create(array list[, list_id])
创建播放列表
params:
list array 歌曲列表
[
{
id:'music id' //歌曲ID,必填
dataUrl:'your_music_url', //播放地址
title:'music title' //歌曲名
coverImgUrl:'cover_url' //歌曲封面
custom:'....' //其他自定义属*
}
]
list_id int | string 列表ID
clear()
清空播放列表
current()
获取当前歌曲
return : object
first()
获取列表的第一首歌曲
return : object
next()
获取下一首歌曲
return : object
prev()
获取上一首歌曲
return : object
get(int index)
获取指定索引歌曲
return : object
player.event
播放器事件方法
on(string name,function callback)
开始监听事件
off(string name)
停止监听事件
hold(string name)
暂停监听事件
isHold(string name)
事件是否被暂停
resume(string name)
继续监听事件
trigger(string name)
触发指定事件
defaults(object events)
设置事件的默认回调, 该回调优先于普通回调执行。
默认支持的事件列表
play 开始播放
pause 暂停
stop 停止播放
end 播放结束
timeupdate 播放中,该事件的触发时间间隔为250ms
preplay 准备播放
小程序自定义事件
player.event.on('listchange',function(data){
console.log('播放列表更改!');
player.stop();
});
//设置播放列表
player.list.create(data,1);
player.event.trigger('listchange');
小编在上文中详细介绍了微信小程序播放器的功能和使用方法,大家掌握了吗?如果需要开发一个小程序播放器,大家还可以在微信小程序商店找到相关的素材,喜欢就赞一个吧!
怎么设置微信小程序循环播放?
微信小程序录音播放怎么弄?
小程序监听音乐播放停止如何实现?
上一篇:微信小程序播放视频有哪些软件?
下一篇:怎么实现微信小程序图片轮播?