微信音訊介面呼叫demo
阿新 • • 發佈：2018-12-26
前幾天做一個錄音送祝福的專案，事先做了一個demo，記錄一下，方便日後需要時套上直接使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=640, user-scalable=no"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <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"> <meta name="apple-mobile-web-app-title" content=""> <title>錄音test</title> <style type="text/css"> @charset "utf-8"; *{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);} html{ max-width:640px; margin:0 auto;} body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微軟雅黑","Microsoft YaHei"; font-size:24px; line-height:1.5em; color:#000; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-callout:none; } .start_btn , .play_btn , .send_btn{ width:250px; height:60px; line-height:60px; margin:20px auto; text-align:center; border:#eee solid 2px; cursor:pointer;} .start_btn_in , .stop_btn{ color:#f00; border:#f00 solid 2px;} </style> </head> <body> <div class="start_btn">按住不放即可錄音</div> <div class="play_btn">點我播放</div> <div class="send_btn">點我儲存</div> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script type="text/javascript"> wx.config({ debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。 appId: '', // 必填，公眾號的唯一標識 timestamp: '', // 必填，生成簽名的時間戳 nonceStr: '', // 必填，生成簽名的隨機串 signature: '',// 必填，簽名，見附錄1 jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','startRecord','stopRecord','onVoiceRecordEnd','playVoice','stopVoice','onVoicePlayEnd','uploadVoice'] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2 }); wx.ready(function(){ //返回音訊的本地ID var localId; //返回音訊的伺服器端ID var serverId; //錄音計時,小於指定秒數(minTime = 10)則設定使用者未錄音 var startTime , endTime , minTime = 2; //***********************************// //開始錄音 $('.start_btn').on('touchstart',function(e){ e.preventDefault(); var $this = $(this); $this.addClass('start_btn_in'); startTime = new Date().getTime(); //開始錄音 wx.startRecord(); }); //***********************************// //停止錄音介面 $('.start_btn').on('touchend', function(){ var $this = $(this); $this.removeClass('start_btn_in'); //停止錄音介面 wx.stopRecord({ success: function (res) { localId = res.localId; } }); endTime = new Date().getTime(); alert((endTime - startTime) / 1000); if((endTime - startTime) / 1000 < minTime){ localId = ''; alert('錄音少於' + minTime + '秒，錄音失敗，請重新錄音'); } }); //監聽錄音自動停止介面 wx.onVoiceRecordEnd({ //錄音時間超過一分鐘沒有停止的時候會執行 complete 回撥 complete: function (res) { localId = res.localId; $('.start_btn').removeClass('start_btn_in'); } }); //***********************************// $('.play_btn').on('click',function(){ if(!localId){ alert('您還未錄音，請錄音後再點選播放'); return; } var $this = $(this); if($this.hasClass('stop_btn')){ $(this).removeClass('stop_btn').text('點我播放'); // //暫停播放介面 // wx.pauseVoice({ // //需要暫停的音訊的本地ID，由 stopRecord 或 onVoiceRecordEnd 介面獲得 // localId: localId // }); //停止播放介面 wx.stopVoice({ //需要停止的音訊的本地ID，由 stopRecord 或 onVoiceRecordEnd 介面獲得 localId: localId }); }else{ $this.addClass('stop_btn').text('點我停止'); //播放語音介面 wx.playVoice({ //需要播放的音訊的本地ID，由 stopRecord 或 onVoiceRecordEnd 介面獲得 localId: localId }); } }); //監聽語音播放完畢介面 wx.onVoicePlayEnd({ //需要下載的音訊的伺服器端ID，由uploadVoice介面獲得 serverId: localId, success: function (res) { $('.play_btn').removeClass('stop_btn').text('點我播放'); //返回音訊的本地ID //localId = res.localId; } }); //***********************************// //上傳語音介面 $('.send_btn').on('click',function(){ if(!localId){ alert('您還未錄音，請錄音後再儲存'); return; } alert('上傳語音,測試，並未提交儲存'); return; //上傳語音介面 wx.uploadVoice({ //需要上傳的音訊的本地ID，由 stopRecord 或 onVoiceRecordEnd 介面獲得 localId: localId, //預設為1，顯示進度提示 isShowProgressTips: 1, success: function (res) { //返回音訊的伺服器端ID serverId = res.serverId; } }); }); }); </script> </body> </html>