WeChat small program media component audio
May 18, 2021 WeChat Mini Program Development Document
Table of contents
audio
Audio.
| The property name | Type | The default | Description |
|---|---|---|---|
| Id | String | A unique identifier for the audio component | |
| Src | String | The resource address to play the audio | |
| loop | Boolean | false | Whether to loop |
| controls | Boolean | true | Whether to display the default control |
| poster | String | The picture resource address of the audio cover page on the default control is set to be invalid if the controls property value is false | |
| name | String | Unknown audio | The audio name on the default control, and if the controls property value is false, setting name is not valid |
| author | String | Unknown author | The author's name on the default control is set to be invalid if the controls property value is false |
| binderror | EventHandle | When an error occurs, the error event is triggered, and the detail is . | |
| bindplay | EventHandle | The play event is triggered when playback starts/continues | |
| bindpause | EventHandle | The pause event is triggered when playback is paused | |
| bindtimeupdate | EventHandle | Timeupdate event is triggered when playback progress changes, detail s.currentTime, duration | |
| bindended | EventHandle | The end event is triggered when playing to the end |
MediaError.code
| Returns the error code | Describe |
|---|---|
| MEDIA_ERR_ABORTED | Getting resources is prohibited by the user |
| MEDIA_ERR_NETWORD | Network error |
| MEDIA_ERR_DECODE | The decoding error |
| MEDIA_ERR_SRC_NOT_SUPPOERTED | Inappropriate resources |
Example code:
<!-- audio.wxml -->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>
// audio.js
Page({
onReady: function (e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context
this.audioCtx = wx.createAudioContext('myAudio')
},
data: {
poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此时此刻',
author: '许巍',
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
},
audioPlay: function () {
this.audioCtx.play()
},
audioPause: function () {
this.audioCtx.pause()
},
audio14: function () {
this.audioCtx.seek(14)
},
audioStart: function () {
this.audioCtx.seek(0)
}
})
Related: wx.createAudioContext