👨🎓作者简介：一位喜欢写作，计科专业大二菜鸟
如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦
『从零开始学小程序』媒体组件audio组件
- 1.简介
- 2.audio组件
- 3.AudioContext
- 4.InnerAudioContext
多媒体包括音频、视频和相机等，为了更好地在小程序中使用这些多媒体功能，微信官方也为开发者提供了一系列多媒体组件和API接口。多媒体组件如下所示：
- video组件：视频组件
- camera组件：相机组件
- audio组件：音频组件
- image组件：图片组件
1.简介
audio组件：音频组件。在页面插入一段音频或者播放音乐有3种处理方法。
- 简单的插入audio组件，并利用组件的属性控制播放
- 利用AudioContext类，通过指定方法获取实例
- 使用功能最全的InnerAudioContext
下面我们来一一了解三种方法的使用。不过在基础库1.6.0版本之后就不再维护前两种方法了，我们实际开发还是用第三种InnerAudioContext
2.audio组件
首先来看看audio组件常见的属性：
属性 | 类型 | 默认值 | 必填 | 说明 |
id | string | 否 | audio 组件的唯一标识符 | |
src | string | 否 | 要播放音频的资源地址 | |
loop | boolean | false | 否 | 是否循环播放 |
controls | boolean | false | 否 | 是否显示默认控件 |
poster | string | 否 | 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效 | |
name | string | 未知音频 | 否 | 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效 |
author | string | 未知作者 | 否 | 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效 |
<!-- audio.wxml -->
<audio author="Taylor Swift" name="Gorgeous"
poster="https://636c-cloud1-0gq03z948cf60a2f-1313616796.tcb.qcloud.la/111111.png?sign=9d6db5733a31686af7132b981d4e9c88&t=1663494912"
src="https://636c-cloud1-0gq03z948cf60a2f-1313616796.tcb.qcloud.la/Gorgeous%20-%20Taylor%20Swift.mp3?sign=1bc3a85378f63986bbf6f8cbe8f032e9&t=1663494659"
id="myAudio" controls loop
bindplay="funPlay"
bindpause="funPause"
></audio>// audio.js
Page({
funPlay:function(){
console.log("audio play");
},
funPause:function(){
console.log("audio pause");
}
})除了上述的基本属性外。audio还有一些属性可以监听音频的播放状态。可以看到每次点击让音频播放或暂停都会触发bindplay和bindpause属性。
属性 | 类型 | 默认值 | 必填 | 说明 |
bindplay | eventhandle | 否 | 当开始/继续播放时触发 play 事件 | |
bindpause | eventhandle | 否 | 当暂停播放时触发 pause 事件 |
3.AudioContext
通过AudioContext类中的createAudioContext方法可以根据audio的id属性来获取到audio实例。然后进行属性操控。
类方法 | 说明 |
setSrc(String src) | 设置音频地址 |
play() | 播放音频 |
pause() | 暂停音频 |
seek(number position) | 跳转到指定位置 |
// audio.js
Page({
onReady: function (e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context
this.audioCtx = wx.createAudioContext('myAudio')
},
data: {
name: 'Gorgeous',
author: 'Taylor Swift',
poster:'https://636c-cloud1-0gq03z948cf60a2f-1313616796.tcb.qcloud.la/111111.png?sign=9d6db5733a31686af7132b981d4e9c88&t=1663494912',
src: 'https://636c-cloud1-0gq03z948cf60a2f-1313616796.tcb.qcloud.la/Gorgeous%20-%20Taylor%20Swift.mp3?sign=1bc3a85378f63986bbf6f8cbe8f032e9&t=1663494659',
},
funPlay:function(){
console.log("audio play");
},
funPause:function(){
console.log("audio pause");
},
audioPlay: function () {
this.audioCtx.play()
},
audioPause: function () {
this.audioCtx.pause()
},
audio14: function () {
this.audioCtx.seek(14)
},
audioStart: function () {
this.audioCtx.seek(0)
}
})<audio author="{{author}}" name="{{name}}"
poster="{{poster}}"
src="{{src}}"
id="myAudio" controls loop
bindplay="funPlay"
bindpause="funPause"
></audio>
<view class="container">
<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>
</view>
4.InnerAudioContext
InnerAudioContext是官方推荐功能最全的音频类，其实例可在js文件的生命周期函数中通过调用createInnerAudioContext接口获取。
InnerAudioContext类的中包括了audio的属性，除这些属性外它新增的常见属性说明如下：可在js函数中获取实例后通过“this.audioCtx.属性名”的写法获取相应的属性值。
属性 | 类型 | 说明 |
obeyMuteSwitch | boolean | 是否遵循系统静音，默认为true |
number | startTime | 开始播放的位置，默认值为0 |
volume | number | 音量，范围0~1，默认为1 |
duration | number | 当前音频的长度 |
currentTime | number | 当前音频的播放位置，单位为s |
buffered | number | 当前音频缓冲的时间点 |
同样的InnerAudioContext类中的类方法也包括了AudioContext类的方法，除此之外它还新增了许多其他的类方法，读者可自行查阅官方文档。InnerAudioContext | 微信开放文档 (qq.com)
使用方法与AudioContext大同小异，无非是在获取实例时使用createInnerAudioContext方法替代createAudioContext方法。
onReady: function (e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context
this.audioCtx = wx.createInnerAudioContext('myAudio')
},t方法。
onReady: function (e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context
this.audioCtx = wx.createInnerAudioContext('myAudio')
},
