audio
音频。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| id | String | 否 | audio 组件的唯一标识符 | ||
| src | String | 否 | 要播放音频的资源地址 | ||
| loop | Boolean | false | 否 | 是否循环播放 | |
| controls | Boolean | false | 否 | 是否显示默认控件 | |
| show-progress | 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 事件 |
MediaError.code
| 返回错误码** | 说明 | 最低版本 |
|---|---|---|
| 1 | 获取资源被用户禁止 | |
| 2 | 网络错误 | |
| 3 | 解码错误 | |
| 4 | 不合适资源 |
示例代码：
<!--pages/component/pages/audio/audio.mcml-->
<view class="container">
<view class="statement">音频。</view>
<view>
<audio id="audio"
name="{{name}}"
poster="{{poster}}"
author="{{author}}"
controls="{{controls}}"
show-progress="{{showProgress}}"
loop="{{loop}}"
binderror="bindevent"
bindplay="bindevent"
bindpause="bindevent"
bindtimeupdate="bindevent"
bindended="bindevent"></audio>
</view>
<view>
<view mc:for="{{audioList}}">{{(index + 1) + '. ' + item.name}}</view>
</view>
<view class="buttonContainer">
<button size="mini" mc:for="{{methods}}" bindtap="{{item.method}}">{{item.desc}}</button>
</view>
<block mc:for="{{properties}}">
<view class="cssname">{{item.name + ': ' + item.desc}}</view>
<checkbox bindtap="propValueChanged" data-index="{{index}}" checked="{{item.value}}" value="{{item.prop}}">{{item.valueDesc}}</checkbox>
</block>
<block mc:for="{{events}}">
<view class="cssname">{{item.name + ":" + item.desc}}, 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{item.detail || ''}}</text>
</block>
</view>
// pages/component/pages/audio/audio.js
Page({
data: {
events:[
{"name" : "bindplay", "desc" : "当开始/继续播放时触发"},
{"name" : "bindtimeupdate", "desc" : "当播放进度改变时触发"},
{"name" : "bindpause", "desc" : "当暂停播放时触发"},
{"name" : "bindended", "desc" : "当播放到末尾时触发"},
{"name" : "binderror", "desc" : "播放出错时触发"}
],
properties: [
{"prop" : "controls", "name" : "controls", "desc": "是否显示默认播放控件", value: true, valueDesc: '显示'},
{"prop" : "showProgress", "name" : "showProgress", "desc": "是否显示进度条", value: true, valueDesc: '显示'},
{"prop" : "loop", "name" : "loop", "desc": "是否循环播放", value: false, valueDesc: '循环播放'}
],
methods:[
{method: 'play', desc: '播放'},
{method: 'pause', desc: '暂停'},
{method: 'seek', desc: '跳转到10秒处播放'},
{method: 'stop', desc: '停止'},
{method: 'setSrc', desc: '下一个'}
],
audioList:[
{
'name' : 'audio1',
'src' : 'http://test/audio1.mp3',
'poster' : '/assets/images/audio/poster1.jpg',
'author' : '作者1'
},
{
'name' : 'audio2',
'src' : 'http://test/audio2.mp3',
'poster' : '/assets/images/audio/poster1.jpg',
'author' : '作者2'
}
],
currentIndex: 0
},
onLoad: function (options) {
var data = {}
for(var i = 0; i < this.data.properties.length; i++){
data[this.data.properties[i].prop] = this.data.properties[i].value
}
this.setData(data);
},
onReady: function(){
this.audioCtx = mc.createAudioContext('audio');
this.setCurrent(this.data.currentIndex);
},
setCurrent: function(index){
var data = this.data.audioList[index];
this.setData(data)
this.audioCtx.setSrc(data.src)
},
setSrc: function(){
this.data.currentIndex += 1;
if(this.data.currentIndex >= this.data.audioList.length){
this.data.currentIndex = 0;
}
this.setCurrent(this.data.currentIndex);
this.playAudio();
},
play: function(){
this.audioCtx.play();
},
pause: function(){
this.audioCtx.pause();
},
seek: function(){
this.audioCtx.seek(10);
},
stop: function() {
this.audioCtx.stop();
},
propValueChanged: function(e){
var item = this.data.properties[e.currentTarget.dataset.index];
item.value = !item.value;
var data = {};
data[item.prop] = item.value;
this.setData(data);
},
bindevent: function(e){
var eventName = 'bind' + e.type;
var index = 0;
for(var i = 0; i < this.data.events.length; i++){
if(this.data.events[i].name == eventName){
index = i;
break;
}
}
var eventIndex = 'events[' + index + '].detail';
this.setData({
[eventIndex] : JSON.stringify(e, null, 2)
})
}
})