Skip to main content
Supported Regions:上海

Audio Playback

WdAudio

Property Description​

External properties received by the component

Property Name
Property Identifier
Type
Description
模板templatestring

指定audio模板

Example: "normal"

音频资源srcstring

音频资源地址不要含有中文，否则会导致某些场景下的兼容问题，如：企业微信小程序内播放该音频失败

音频资源的地址，用于直接播放，支持云文件ID

Example: "https://qcloudimg.tencent-cloud.cn/raw/472043e1e13e1cc06e4afc46407e8c4d.mp4"

自动播放autoplayboolean

从用户的角度来看，网页或应用程序自动地发出噪音而没有警告可能会令人讨厌、不便或令人反感。因此，浏览器通常仅允许在特定情况下进行自动播放。详情参考

根据一般规则，用户和网页已有交互行为时方可自动播放

Example: false

循环播放loopboolean

Example: false

倍速播放playbackRatenumber

Example: 1

开始播放位置（单位：s）startTimenumber

Example: 0

Event Description​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
audio实例初始化完成audioReadyobject
  • audioInstance: object Audio实例

    获取 Audio 实例的引用，当前属性列表只例举了部分关键属性，其他更多的属性方法使用请参考 微信小程序端说明
    • buffered: object 返回一个只读 TimeRanges 对象 返回媒体已缓冲的区域
      • currentTime: number以秒为单位返回当前媒体元素的播放时间
      • duration: number以秒为单位给出媒体的长度，如果没有媒体数据可用，则为零
      • paused: boolean是否正在暂停
      • src: string音频资源
      • autoplay: boolean是否自动播放
      • loop: boolean是否循环播放
      • playbackRate: number播放倍速
      • startTime: number开始播放位置（单位：s）
    • currentTimeStr: string以 00:00 形式返回当前媒体元素的播放时间
    • durationStr: string以 00:00 形式给出媒体的长度
    		Compatible with all platforms

    audio 实例初始化完成时触发

    开始/继续播放playCompatible with all platforms

    当开始/继续播放时触发 play 事件

    结束播放stopCompatible with all platforms

    当结束播放时触发 stop 事件

    暂停播放pauseCompatible with all platforms

    当暂停播放时触发 pause 事件

    播放报错errorobject
    • errMsg: string错误信息

      错误信息
    • errCode: number错误码

      错误码
    		Compatible with all platforms

    当发生错误时触发 error 事件，小程序事件说明 https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.onError.html

    跳转到指定位置seekedobject
    • position: number跳转的时间(单位 s)

      精确到小数点后 3 位，即支持 ms 级别精确度
    		Compatible with all platforms

    当音频跳转到指定位置时触发 seek 事件

    播放到末尾endedCompatible with all platforms

    当播放到末尾时触发 ended 事件

    播放进度变化timeupdateobject
    • currentTime: number当前播放时间

      当前播放时间
    • duration: number音频总时长

      音频总时长
    		Compatible with all platforms

    播放进度变化时触发，event.detail = {currentTime, duration}

    Property API​

    Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

    Read-only Property Name
    Property Identifier
    Type
    Description
    Audio实例audioInstanceobject

    获取 Audio 实例的引用，当前属性列表只例举了部分关键属性，其他更多的属性方法使用请参考 微信小程序端说明

    以 00:00 形式返回当前媒体元素的播放时间currentTimeStrstring
    以 00:00 形式给出媒体的长度durationStrstring
    是否正在播放playedboolean

    Method API​

    Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

    Method Name
    Method Identifier
    Parameters
    Method Description
    播放音频play

    通过 $w.audio1.play() 来播放音频，小程序 API 文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.play.html

    暂停播放pause

    通过 $w.audio1.pause() 来暂停播放，小程序 API 文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.pause.html

    停止播放stop

    通过 $w.audio1.stop() 来停止播放，停止后的音频再播放会从头开始播放，小程序 API 文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.stop.html

    跳转到指定位置seekobject
    • position: number指定位置(单位 s)

      精确到小数点后 3 位，即支持 ms 级别精确度

    通过 $w.audio1.seek({ position } ) 来跳转到指定位置，小程序 API 文档https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.seek.html

    快进fastForwardobject
    • time: number快进的时间(单位 s)

    通过 $w.audio1.fastForward({ time } ) 来快进一段指定时间

    快退backwardobject
    • time: number快退的事件(单位 s)

    通过 $w.audio1.backward({ time } ) 来快退一段指定时间

    销毁当前实例destroy

    通过 $w.audio1.destroy() 来销毁当前实例，小程序 API 文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.destroy.html

    重新初始化当前实例init

    通过 $w.audio1.init() 来重新初始化当前实例，适用于通过 $w.audio1.destroy() 后的重新初始化

    Style API​

    Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

    Name
    Class Name
    Description and Examples
    根元素.wd-audioaudio组件根元素
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-audio {
  /* Write CSS styles here */
}
    PC 端audio组件根元素.wd-pc-audio可以为 PC 端的audio编写样式
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-audio {
  /* Write CSS styles here */
}
    H5 端audio组件根元素.wd-h5-audio可以为 H5 端的audio编写样式
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-audio {
  /* Write CSS styles here */
}
    小程序 端audio组件根元素.wd-mp-audio可以为 小程序 端的audio编写样式
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-audio {
  /* Write CSS styles here */
}

    Learn about Style API