音频。1.6.0版本开始，该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| id | string | 否 | audio 组件的唯一标识符 | 1.0.0 | |
| src | string | 否 | 要播放音频的资源地址 | 1.0.0 | |
| loop | boolean | false | 否 | 是否循环播放 | 1.0.0 |
| controls | boolean | false | 否 | 是否显示默认控件 | 1.0.0 |
| poster | string | 否 | 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效 | 1.0.0 | |
| name | string | 未知音频 | 否 | 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效 | 1.0.0 |
| author | string | 未知作者 | 否 | 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效 | 1.0.0 |
| binderror | eventhandle | 否 | 当发生错误时触发 error 事件，detail = {errMsg:MediaError.code} | 1.0.0 | |
| bindplay | eventhandle | 否 | 当开始/继续播放时触发play事件 | 1.0.0 | |
| bindpause | eventhandle | 否 | 当暂停播放时触发 pause 事件 | 1.0.0 | |
| bindtimeupdate | eventhandle | 否 | 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration} | 1.0.0 | |
| bindended | eventhandle | 否 | 当播放到末尾时触发 ended 事件 | 1.0.0 |
MediaError.code
| 返回错误码 | 描述 |
|---|---|
| 1 | 获取资源被用户禁止 |
| 2 | 网络错误 |
| 3 | 解码错误 |
| 4 | 不合适资源 |
示例代码
index.xml
<view class="page">
<view class="page__hd">
<text class="page__title">audio</text>
<text class="page__desc">音频</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<audio src="{{current.src}}" poster="{{current.poster}}" name="{{current.name}}" author="{{current.author}}" action="{{audioAction}}" bindplay="audioPlayed" bindtimeupdate="audioTimeUpdated" controls></audio>
</view>
</view>
<view class="section section_gap">
<text class="section__title">播放</text>
<view class="body-view">
<button bindtap="playAudio">播放</button>
</view>
</view>
<view class="section section_gap">
<text class="section__title">暂停</text>
<view class="body-view">
<button bindtap="pauseAudio">暂停</button>
</view>
</view>
<view class="section section_gap">
<text class="section__title">进度</text>
<view class="body-view">
<slider bindchange="timeSliderChanged" left-icon="cancel" right-icon="success_no_circle"/>
</view>
</view>
<view class="section section_gap">
<text class="section__title">播放速率</text>
<view class="body-view">
<slider min="1" max="4" bindchange="playbackRateSliderChanged" left-icon="cancel" right-icon="success_no_circle"/>
</view>
</view>
</view>
index.js
Page({
data: {
current: {
poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此时此刻',
author: '许巍',
src: 'https://win-web-nf01-sycdn.kuwo.cn/dfec2ffc8e070e96101b21bd804de6e7/60bed777/resource/n1/73/40/4073043717.mp3',
},
audioAction: {
method: 'pause'
}
},
audioPlayed: function (e) {
console.log('audio is played')
},
audioTimeUpdated: function (e) {
this.duration = e.detail.duration;
},
timeSliderChanged: function (e) {
if (!this.duration)
return;
var time = this.duration * e.detail.value / 100;
this.setData({
audioAction: {
method: 'setCurrentTime',
data: time
}
});
},
playbackRateSliderChanged: function (e) {
this.setData({
audioAction: {
method: 'setPlaybackRate',
data: e.detail.value
}
})
},
playAudio: function () {
this.setData({
audioAction: {
method: 'play'
}
});
},
pauseAudio: function () {
this.setData({
audioAction: {
method: 'pause'
}
});
}
})
运行效果：
微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。