跳到主要内容

音频播放

WdAudio

属性说明​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
模板templatestring

指定audio模板

示例："normal"

音频资源srcstring

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

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

示例："https://qcloudimg.tencent-cloud.cn/raw/472043e1e13e1cc06e4afc46407e8c4d.mp4"

自动播放autoplayboolean

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

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

示例：false

循环播放loopboolean

示例：false

倍速播放playbackRatenumber

示例：1

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

示例：0

事件说明​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
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 形式给出媒体的长度
    		兼容三端

    audio 实例初始化完成时触发

    开始/继续播放play兼容三端

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

    结束播放stop兼容三端

    当结束播放时触发 stop 事件

    暂停播放pause兼容三端

    当暂停播放时触发 pause 事件

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

      错误信息
    • errCode: number错误码

      错误码
    		兼容三端

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

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

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

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

    播放到末尾ended兼容三端

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

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

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

      音频总时长
    		兼容三端

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

    属性 API​

    通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

    只读属性名
    属性标识
    类型
    说明
    Audio实例audioInstanceobject

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

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

    方法 API​

    通过方法 API，可以通过程序触发组件内部的方法，比如提交表单，显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法，如 $w.form1.submit()

    方法名
    方法标识
    参数
    方法说明
    播放音频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() 后的重新初始化

    样式 API​

    通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

    名称
    类名
    说明和示例
    根元素.wd-audioaudio组件根元素
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-audio {
  /* 在这里编写CSS 样式 */
}
    PC 端audio组件根元素.wd-pc-audio可以为 PC 端的audio编写样式
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-audio {
  /* 在这里编写CSS 样式 */
}
    H5 端audio组件根元素.wd-h5-audio可以为 H5 端的audio编写样式
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-audio {
  /* 在这里编写CSS 样式 */
}
    小程序 端audio组件根元素.wd-mp-audio可以为 小程序 端的audio编写样式
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-audio {
  /* 在这里编写CSS 样式 */
}

    了解样式 API