一、audio标签
audio为小程序中的音频组件,我们可以轻松的在小程序中播放音频。
- 下面是组件的相关属性的说明
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
id | String | video 组件的唯一标识符 | |
src | String | 要播放音频的资源地址 | |
loop | Boolean | false | 是否循环播放 |
controls | Boolean | true | 是否显示默认控件 |
poster | String | 默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 | |
name | String | 未知音频 | 默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效 |
author | String | 未知作者 | 默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效 |
binderror | EventHandle | 当发生错误时触发 error 事件,detail = {errMsg: MediaError.code} | |
bindplay | EventHandle | 当开始/继续播放时触发play事件 | |
bindpause | EventHandle | 当暂停播放时触发 pause 事件 | |
bindtimeupdate | EventHandle | 当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration} | |
bindended | EventHandle | 当播放到末尾时触发 ended 事件 |
备注:loop和controls属性的值尽管是boolean,但是需要加{{}}才是生效,而id则不需要,这是小程序的设计bug
二、audio对应的api
前面我们介绍了一下audio标签的属性及事件监听,那么用这些属性能够实现我们正常的音频操作呢?显然是不行的,要进行音频操作就需要使用到微信小程序给audio提供的对应的api了。下面我们来看看都有哪些常用的api吧。
第一步:我们要获取到audio的上下文对相关,就像canvas的使用一样哦。
this.audioContext = wx.createAudioContext('audio');//参数就是audio属性的id值
audioContext 通过 audioId 跟一个 组件绑定,通过它可以操作对应的 组件,这样我们就可以通过这个对象操作音频了。
第二步:对应的操作方法
- play():播放;
- pause():暂停;
- seek(postion):设置当前播放位置点,postion的单位是s;
- setSrc(src):设置要播放的音频地址;
以上就是audio音频组件的常用属性以及常用api了。下面我们将用这些属性方法,做一个简单的音频播放。
三、音频播放小案例
需求:
- 能够正常开始暂停播放;
- 循环播放;
- 快进暂停;
//对应的audio.js
Page({
data:{
audioContext:'',
audio:{
poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此时此刻',
author: '许巍',
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=4',
currentTime:0,
currtRate:0
}
},
//以下是状态监听
audioError:function(resp){
console.log(resp);
},
audioPlay:function(resp){
console.log(resp);
console.log('开始播放');
},
playEnd:function(resp){
console.log(resp);
console.log('播放结束');
},
timeUpdate:function(resp){
this.setData({
currtRate:(100*resp.detail.currentTime/resp.detail.duration)
});//总时长
this.currentTime = resp.detail.currentTime;//当前时长
console.log(resp);
console.log('播放进度变化');
},
//以下是操作
play:function(){
this.audioContext.play();
},
pause:function(){
this.audioContext.pause();
},
goFast:function(){
this.audioContext.seek(this.currentTime+20);
},
onLoad:function(options){
// 生命周期函数--监听页面加载
this.audioContext=wx.createAudioContext('audio');
},
onShareAppMessage: function() {
// 用户点击右上角分享
return {
title: 'title', // 分享标题
desc: 'desc', // 分享描述
path: 'path' // 分享路径
}
}
})
//对应的audio.wxml
<view class="title text-center">
audio音频组件示例</view>
<view class="text-center">
<audio id="audio" src="{{audio.src}}" loop="{{true}}" controls="{{true}}" poster="{{audio.poster}}" name="{{audio.name}}" author="{{audio.author}}" binderror="audioError" bindplay="audioPlay" bindeneded="playEnd" bindtimeupdate="timeUpdate"></audio>
</view>
<view class="row">
<button class="col" type="primary" size="mini" bindtap="play">播放</button>
<button class="col" type="primary" size="mini" bindtap="pause">暂停</button>
<button class="col" type="primary" size="mini" bindtap="goFast">快进</button>
</view>
本来想搞个播放进度条展示到下面的,可是发现slider的value不能动态设置。等后面找到解决方案了在补充吧。