阅读(1767)
赞(0)
百度智能小程序 音频
2020-08-11 17:39:52 更新
audio 音频
解释：音频
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
id | String | 否 | audio 组件的唯一标识符 | |
src | String | 否 | 要播放音频的资源地址 | |
loop | Boolean | false | 否 | 是否循环播放 |
controls | Boolean | false | 否 | 是否显示默认控件 |
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 事件，detail = {duration} | |
bindpause | EventHandle | 否 | 当暂停播放时触发 pause 事件，detail = {duration} | |
bindtimeupdate | EventHandle | 否 | 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration} | |
bindended | EventHandle | 否 | 当播放到末尾时触发 ended 事件，detail = {duration} |
MediaError.code
| 返回错误码 | 描述 |
|---|---|
1 | 获取资源过程被用户终止 |
2 | 网络错误 |
3 | 当解码时发生错误 |
4 | 不支持音频 |
示例
<audio
poster="{{poster}}"
name="{{name}}"
loop="false"
author="{{author}}"
src="{{src}}"
id="myAudio"
controls
bind:error="audioError"
bind:play="audioPlay"
bind:pause="audioPause"
bind:timeupdate="audioTimeUpdate"
bind:ended="audioEnded">
</audio>Page({
data: {
poster: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/xuezhiqian.jpg',
name: '演员',
author: '薛之谦',
src: 'https://b.bdstatic.com/miniapp/images/yanyuan.mp3'
},
audioError(e) {
console.log('audio ', e.type);
swan.showToast({
title: '加载音频资源出错',
duration: 1000,
icon: 'none'
});
},
audioPlay(e) {
console.log('audio ', e.type);
swan.showToast({
title: '音频开始播放',
duration: 1000,
icon: 'none'
});
},
audioPause(e) {
console.log('audio ', e.type);
swan.showToast({
title: '音频暂停',
duration: 1000,
icon: 'none'
});
},
audioEnded(e) {
console.log('audio ', e.type);
swan.showToast({
title: '音频播放完',
duration: 1000,
icon: 'none'
});
},
audioTimeUpdate(e) {
console.log('audio ', e.type);
}
});