微信 JS-SDK 录音功能开发

云娜

今天分享一下我第一次接触微信开发,微信JS-SDK录音功能开发的经历.

在开发微信JS-SDK录音功之前我是没有接触过微信开发的,第一反应就是去百度.建议第一次接触微信开发的同学去微信JSSDK说明文档 - 微信公众平台开发者文档上看看,重点是要仔细看微信网页开发这一栏,先在头脑里有个基本了解.别忘了下载微信web开发者工具,使用方法和介绍也仔细看看.

如果还是感觉一头雾水的同学可以去看看微信JS-SDK Demo.仔细去看看源码,和JSSDK说明文档 - 微信公众平台开发者文档,微信网页开发联系起来看,效果更好!

有了以上的了解后就可以动手开发了,我这里主要讲微信JS-SDK录音功能开发.需要实现 : 开始录音,停止录音,试听录音,删除录音重新录制,确认上传语音到微信服务器(语音只能在微信服务器上保留三天,我还要实现与后台配合,从微信服务器上把语音保存到自己的服务器上).

下面我就直接贴代码了,只要你有仔细看上面的文档和Demo,这些代码对你来说都不是问题.

<html>
<head>
  <meta charset="utf-8">
  <title>音频接口</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
  <script src="js/jquery.js"></script>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wxapi_container">
    <div class="lbox_close wxapi_form">
      <button class="btn btn_primary" id="startRecord">开始</button>
      <button class="btn btn_primary" id="deleteVoice">删除</button>
      <button class="btn btn_primary" id="uploadVoice">确认</button>
    </div>
</div>
<!--引入微信JS-SDK-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    //文档加载完后立即执行
    window.onload=function(){
        wx.config({
            
                debug: true,//开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                
                appId: '',// 必填,公众号的唯一标识
                
                timestamp: '',// 必填,生成签名的时间戳
                
                nonceStr: '',// 必填,生成签名的随机串
                
                signature: '',// 必填,签名
                
                jsApiList: ['startRecord','stopRecord','playVoice','uploadVoice']// 必填,需要使用的JS接口列表
        });
            
        wx.ready(function () {
                var voice = {
                    localId: '',
                    serverId: ''
                };
            var startRecord = document.querySelector('#startRecord');
            var stopClearTimeout;
            startRecord.onclick = function () {
            //开始录音
            if(startRecord.innerHTML == '开始'){
                wx.startRecord({
                    success: function(){
                        startRecord.innerHTML = '停止';
                        //30秒后自动停止;
                        stopClearTimeout = setTimeout(function(){
                            wx.stopRecord({
                                success: function (res) {
                                    voice.localId = res.localId;
                                    startRecord.innerHTML = '试听';
                                }
                            });
                        },30000);
                    },
                });
            }
            
                //结束录音
            if(startRecord.innerHTML =='停止'){
                wx.stopRecord({
                    success: function (res) {
                        clearTimeout(stopClearTimeout);
                        startRecord.innerHTML = '试听';
                        voice.localId = res.localId;
                    },
                    fail: function (res) {
                        alert(JSON.stringify(res));
                    }
                });
            }
    
            //试听音频
            if(startRecord.innerHTML =='试听'){
                if (voice.localId == '') {
                    alert('请先录制一段声音');
                    return;
                }
                wx.playVoice({
                    localId: voice.localId
                });
            }
    
            };
            
                //删除语音,重新录音;
            document.querySelector('#deleteVoice').onclick = function(){
                voice.localId = '';
                startRecord.innerHTML = '开始';
            }
            
                    //确认上传语音
            document.querySelector('#uploadVoice').onclick = function () {
                if (voice.localId == '') {
                  alert('请先录制一段声音');
                  return;
                }
                wx.uploadVoice({
                  localId: voice.localId,
                    success: function (res) {
                        voice.serverId = res.serverId;
                        //把微信服务器上的serverId传给后台,后台再通过serverId到微信服务器上把语音保存到自己服务器上
                        $.ajax({
                            url: '',//后台接收数据地址
                            dataType: "json",
                            type: 'get',
                            data: {'id': voice.serverId},
                            success: function (msg) {
                                alert('上传成功!');
                            },
                        });
                    }
                });
            };
    
        });
    }
</script>
</body>
</html>
  • 网上还有个非常不错的例子可以提供大家参考微信jssdk录音功能开发记录.

  • 写好后就可以交给后台上传服务器,再用微信web开发者工具进行调试.

  • 最后开发完成如图:

微信语音接口
微信语音接口

推荐阅读更多精彩内容