2022年11月

要在一个微信页面上实现录音功能，要求不复杂，一个录音按钮按下开始录音，松开停止（并上传保存）。

以为jq本身对移动端的交互事件支持和优化不够 一开始被 jQuery MOBILE 插件给误导了

研究了半天的 .on("tap") 点按和 .on("taphold")长按，但是没有找到手指离开屏幕的事件，而且触发的顺序总是很奇怪

而且jq mobile 很坑的一个绑定的 css 样式，会令我原有的页面样式搞的支离破碎。

绕回原点发现根本没有那么麻烦，用jq自己的 touchstart 和 touchend 不需要额外的插件。

$("#btn_rec").on("touchstart mousedown",function(){
    rec_start();
});

$("#btn_rec").on("touchend mouseup",function(){
    rec_end();
});

顺带追加一个关于微信 jssdk 录音功能备忘：

文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#23

没有难度，照搬代码就能实现上文的业务功能。

执行顺序分别是

  • wx.startRecord() 开始录音（第一次执行会询问授权）
  • wx.stopRecord() 停止录音 或 wx.onVoiceRecordEnd() 超60秒自动停止，获得本地资源id
  • wx.uploadVoice() 上传本地资源，换领微信服务端临时素材资源id (暂存3天)
  • 从微信服务器下载素材文件到本地或自有服务器：官方文档

需要备忘的是：wx.onVoiceRecordEnd() 只有录制达到60秒的时候自动停止才会触发。它并不是主动停止录音 stopRecord 会回调的事件。

总结：

百度害人呐~~