微信h5开发踩坑-音频

本文最后更新于:3 年前

前言
自己开发微信h5语音项目的实际踩坑记录
主要是微信开发工具者工具的模拟数据会造成各种问题
开发根据真机的去进行调试


自动播放背景音乐

在微信iOS中并不支持设置标签autoplay去实现自动播放,需放置在wx.ready中。

1
2
3
4
5
6
7
8
// html
<audio id="bgmMusic" src="http://xxx.mp3" loop="loop" class="hide"></audio>

// js
let music = document.getElementById("bgmMusic");
wx.ready(() => {
music.play();
});

当然还有些野生的方法

1
2
3
document.addEventListener("WeixinJSBridgeReady", () => {
music.play();
});

非微信端打开

1
2
3
4
const playPromise = music.play();
if (playPromise !== null){
playPromise.catch(() => { music.play(); })
}

还有种业务场景是用户摇一摇手机时,播放一段音频。这个我在开发中遇到,在安卓可以正常播放,但是iOS无法播放,需提前加载音频文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// html
<audio id="rockMusic" src="http://xxx.mp3" class="hide"></audio>

// js
let music = document.getElementById("rockMusic");

wx.ready(() => {
music.load();
});

rock(() => {
music.play();
});

function rock(fn){
if (window.DeviceMotionEvent) {
const speed = 10;
let x, y, z, lastX, lastY, lastZ;
x = y = z = lastX = lastY = lastZ = 0;

window.addEventListener("devicemotion", function(event) {
const acceleration = event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed) {
fn && fn();
}
lastX = x;
lastY = y;
},
false
);
}
}

监听录音自动停止接口(wx.onVoiceRecordEnd)

这个接口必须在wx.ready的时候去进行调用监听。

1
2
3
4
5
6
7
wx.ready(function() {
wx.onVoiceRecordEnd({
success() {
// 录音完成
}
});
});

监听语音播放完毕接口(wx.onVoicePlayEnd)

这个接口必须在wx.ready的时候去进行调用监听。

1
2
3
4
5
6
7
wx.ready(function() {
wx.onVoiceRecordEnd({
success() {
// 语音播放完成
}
});
});

微信开发者工具的坑

上传语音接口(wx.uploadVoice)

在使用上传语音接口(wx.uploadVoice)时,微信官方文档中说在调用成功时会返回一个serverId,即音频id。细心的会发现,每次上传语音,微信服务器都会同一个serverId。所以无法根据该serverId去拿取语音。需在真机上进行调试。
可能有人会说用下载语音接口(wx.downloadVoice)可以进行下载,并且返回了localId。那么可以拿改serverId去这里进行测试测试链接,看是否能返回正确的数据。


  • 推荐两个真机调试工具