英语音标.JPG
界面如上图所示，实现效果，点击音标或单词，播放对应的音频。
js代码
1. 首先定义 innerAudioContext 实例
const innerAudioContext = wx.createInnerAudioContext({
useWebAudioImplement: true // 默认关闭。对于短音频、播放频繁的音频建议开启此选项
})
2. 初始化音频监听事件
代码中定义了自动开始播放 innerAudioContext.autoplay = true
onLoad(options) {
// 初始化音频事件
this.initAudioEvent()
},
// 初始化音频事件
initAudioEvent() {
innerAudioContext.autoplay = true
innerAudioContext.onCanplay(() => {
console.log('onCanplay')
})
innerAudioContext.onPlay(() => {
console.log('onPlay')
wx.showLoading({
title: '播放中',
mask: true,
})
})
innerAudioContext.onPause(() => {
console.log('onPause')
})
innerAudioContext.onStop(() => {
console.log('onStop')
})
innerAudioContext.onEnded(() => {
console.log('onEnded')
innerAudioContext.src = 'null.m4a'
wx.hideLoading({
success: (res) => {},
})
})
innerAudioContext.onError((res) => {
console.log('onError')
console.log(res.errMsg)
console.log(res.errCode)
})
innerAudioContext.onWaiting(() => {
console.log('onWaiting')
})
},
3. 页面点击执行 onPlaySound 播放声音
直接设置音频地址后会自动播放音频 innerAudioContext.src
音频地址无误的情况下监听事件执行的顺序如下：
1）onCanplay
2）onPlay
3）onPause
4）onEnded
所以在 onPlaySound 方法中弹出 loading 提示框，mask=true，防止重复点击音频文件
另外在 onEnded 监听事件中隐藏 loading 提示框
需注意 onEnded 监听事件中，单播放结束，赋予了一个错误的音频地址 innerAudioContext.src = 'null.m4a'
其目的是当点击相同的音频文件时依然能够播放
// 播放声音
onPlaySound: function(e) {
wx.showLoading({
title: '请稍后',
mask: true,
})
let url = '可播放的音频文件地址.m4a'
this.playAudio(url)
},
// 处理音频
playAudio(url) {
innerAudioContext.src = url
},
