微信h5开发踩坑-音频

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

---

自动播放背景音乐

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

// html
<audio id="bgmMusic" src="http://xxx.mp3" loop="loop" class="hide"></audio>

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

当然还有些野生的方法

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

非微信端打开

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

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

// 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的时候去进行调用监听。

wx.ready(function() {
  wx.onVoiceRecordEnd({
    success() {
      // 录音完成
    }
  });
});

---

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

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

wx.ready(function() {
  wx.onVoiceRecordEnd({
    success() {
      // 语音播放完成
    }
  });
});

---

微信开发者工具的坑

上传语音接口(wx.uploadVoice)

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

---

• 推荐两个真机调试工具

• Charles
• Fiddler

---