百度智能小程序 音频

2020-08-28 15:48 更新

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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号