audio

解释:音频

属性说明:

属性名类型默认值说明
idStringaudio 组件的唯一标识符
srcString要播放音频的资源地址
loopBooleanfalse是否循环播放
controlsBooleanfalse是否显示默认控件
posterString默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效
nameString未知音频默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效
authorString未知作者默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效
binderrorEventHandle当发生错误时触发 error 事件,detail = {errMsg: MediaError.code}
bindplayEventHandle当开始/继续播放时触发play事件
bindpauseEventHandle当暂停播放时触发 pause 事件
bindtimeupdateEventHandle当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}
bindendedEventHandle当播放到末尾时触发 ended 事件

MediaError.code

返回错误码描述
1获取资源过程被用户终止
2当下载时发生错误
3当解码时发生错误
4不支持音频

示例:在开发者工具中预览效果

  1. <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls="true" bind:error="error" bind:play="audioPlay" bind:pause="audioPause" bind:timeupdate="timeupdate" bind:ended="audioEnded"></audio>

  1. Page({
    data: {
    poster: 'http://c.hiphotos.baidu.com/super/pic/item/8b13632762d0f703e34c0f6304fa513d2797c597.jpg',
    name: '演员',
    author: '薛之谦',
    src: 'http://vd3.bdstatic.com/mda-ic7mxzt5cvz6f4y5/mda-ic7mxzt5cvz6f4y5.mp3'
    },
    error: function (e) {
    console.log(e);
    },
    audioPlay: function (e) {
    console.log('audio play');
    swan.showToast({
    title: '音频开始播放',
    duration: 1000
    });
    },
    audioPause: function (e) {
    console.log('audio pause');
    swan.showToast({
    title: '音频暂停',
    duration: 1000
    });
    },
    audioEnded: function () {
    console.log('audio ended');
    swan.showToast({
    title: '音频播放完',
    duration: 1000
    });
    },
    timeupdate: function () {
    console.log('audio update');
    }
    });