阅读(1774) 赞(3)

百度智能小程序 音频

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);
    }
});