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 不支持音频

# 示例

在开发者工具中预览效果

# 扫码体验

请使用百度APP扫码

# 代码示例

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