• audio

    audio

    音频。

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    √√√x√x

    注意： 微信小程序平台自基础库 1.6.0 版本开始，不再维护 audio 组件，建议在微信小程序平台使用 uni.createInnerAudioContext 替代。

    属性说明

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

    MediaError.code

    返回错误码描述
    1获取资源被用户禁止
    2网络错误
    3解码错误
    4不合适资源

    示例：

    1. <template>
    2.     <view>
    3.         <view class="page-body">
    4.             <view class="page-section page-section-gap" style="text-align: center;">
    5.                 <audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
    6.             </view>
    7.         </view>
    8.     </view>
    9. </template>
    1. export default {
    2.     data() {
    3.         return {
    4.             current: {
    5.                 poster: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.jpg',
    6.                 name: '致爱丽丝',
    7.                 author: '暂无',
    8.                 src: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3',
    9.             },
    10.             audioAction: {
    11.                 method: 'pause'
    12.             }
    13.         }
    14.     }
    15. }

    uniapp

    发现错误？想参与编辑？在 GitHub 上编辑此页面！