Skip to main content
Supported Regions:上海

Audio Playback

WdAudio

Property Description​

External properties received by the component

Property Name
Property Identifier
Type
Description
Templatetemplatestring

Designate an audio template

Example: "normal"

audio resourcesrcstring

Do not include Chinese in audio resource host addresses, as it may lead to compatibility issues, for example, playback failure in Enterprise WeChat Mini Program.

Domain names or IP addresses of audio resources for playing directly, support Cloud File ID

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

autoplayautoplayboolean

From the user's perspective, web pages or apps automatically sending noise without warning may be annoying, inconvenient, or disliked. Therefore, browsers usually only allow autoplay under specific circumstances. For details, see (https://developer.mozilla.org/zh-CN/docs/Web/Media/Autoplay_guide)

When interactive behavior exists between the user and the web page, autoplay is enabled.

Example: false

loop playbackloopboolean

Example: false

playback speedplaybackRatenumber

Example: 1

Start playback position (unit: 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 instance initialization completeaudioReadyobject
  • 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

    Trigger upon completion of audio instance initialization

    start/continue playbackplayCompatible with all platforms

    Trigger the play event when start/continue playback

    stop playbackstopCompatible with all platforms

    Trigger the stop event when stopping playback

    pause playbackpauseCompatible with all platforms

    Trigger the pause event when pausing playback

    playback errorerrorobject
    • errMsg: string错误信息

      错误信息
    • errCode: number错误码

      错误码
    		Compatible with all platforms

    Trigger an error event when an error occurs. Mini program event description: https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.onError.html

    Navigate to specified positionseekedobject
    • position: number跳转的时间(单位 s)

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

    Audio skip to specified position triggers seek event

    Play to the endendedCompatible with all platforms

    Trigger the ended event at the end of playback

    playback progress adjustmenttimeupdateobject
    • currentTime: number当前播放时间

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

      音频总时长
    		Compatible with all platforms

    Trigger when playback progress changes, 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 instanceaudioInstanceobject

    Retrieve the reference of the Audio instance. The current attribute list only shows some key attributes. For more attributes and methods, refer to WeChat Mini Program Documentation.

    Return the current playback time of the media element in 00:00 formatcurrentTimeStrstring
    00:00 format for media lengthdurationStrstring
    Whether playingplayedboolean

    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 audioplay

    Use `$w.audio1.play()` to play audio. See the mini program API document: https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.play.html

    pause playbackpause

    Use `$w.audio1.pause()` to pause playback. Mini Program API document: https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.pause.html

    stop playbackstop

    Use `$w.audio1.stop()` to stop playback. The audio will replay from the beginning after stopping. Mini Program API document: https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.stop.html

    Navigate to specified positionseekobject
    • position: number指定位置(单位 s)

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

    Use `$w.audio1.seek({ position })` to navigate to the specified position. See the mini program API document: https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.seek.html

    fast-forwardfastForwardobject
    • time: number快进的时间(单位 s)

    Fast forward for a specified time with $w.audio1.fastForward({ time })

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

    Rewind for a specified time with $w.audio1.backward({ time })

    Terminate the current instancedestroy

    Use `$w.audio1.destroy()` to terminate the current instance. Mini Program API document: https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.destroy.html

    Reinitialize the current instanceinit

    Reinitialize the current instance with $w.audio1.init(), suitable for reinitialization after $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
    root element.wd-audioaudio component root element
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-audio {
  /* Write CSS styles here */
}
    PC-side audio component root element.wd-pc-audioWrite styles for audio on the PC side
    /* :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 component root element.wd-h5-audioWrite styles for audio on the H5 side
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-audio {
  /* Write CSS styles here */
}
    Mini program audio component root element.wd-mp-audioWrite style for mini program 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