摘要:具體請看我在提問里的回答下載七牛云文件間歇性失敗總結至此,在微信開發中關于錄音這一塊兒的功能,就已經介紹完畢。
原文是在我自己博客中,小伙伴也可以點閱讀原文進行跳轉查看,還有好聽的背景音樂噢~
????一年的時間里,前前后后都在搞微信開發的相關模塊,這不前一陣子,公司又開了個新項目,其中有一個就是類似于微信朋友圈的功能(我也不知道為啥要開發微信已有的功能啊,淚奔...),其中包含上傳圖片、錄音、視頻等,由于微信端上傳圖片和視頻這塊也是頭一遭做,圖片采用了微信的相關插件,視頻嘛用的是百度的webupload插件,感覺也相當不錯,采用了分片上傳技術。今天這篇就主要介紹一下,錄音的相關功能。
微信錄音這塊,其實面對這項功能的時候,不用我多說,都知道要先去看開發文檔,查閱相關資料等準備工作;我先貼個地址,免得看我這篇文檔的時候再去查找網頁:微信公眾號開發-微信JS-SDK說明文檔。進入到這個頁面找到第5小節,音頻接口這里,就是本篇要說的東西了。
微信錄音分為如下幾個接口(這里歸納一下,文檔里有,詳細內容自己去看吧):
開始錄音接口
停止錄音接口
監聽錄音自動停止接口
播放語音接口
暫停播放接口
停止播放接口
監聽語音播放完畢接口
上傳語音接口
下載語音接口
看到以上,是不是覺得蠻多的,配合起來使用才提供了這么一個完整(好像也并不怎么完整,沒有提供方便的轉碼及下載本地機制)的錄音功能。好話說在前頭:你弄完了當你再去看這塊代碼的時候,發現還真他娘的亂啊。。。所以,我寫這篇記錄的原因就在這里了,狗頭.png
還有一個就是接口權限(一張圖片來表述,圖片來源微信文檔...):
上傳代碼梳理本章會以文字和代碼的形式進行梳理,過程應該會蠻多的,不過看完之后直接拿去使用,問題也應該不大,如是說道。
JS-SDK庫的使用步驟,這里就不過多介紹了,文檔里也有,也是簡單整理下幾個所需步驟吧:
綁定域名
引入JS文件
config接口注入權限驗證配置
ready接口處理成功驗證
error接口處理失敗驗證
config事件我們直接從注入API列表說起,config接口有如下幾個屬性(不知道屬性是否合適,姑且叫為屬性吧),
/** * 微信jssdk調用接口初始化 */ wx.config({ debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。 appId: "", // 必填,公眾號的唯一標識 timestamp: , // 必填,生成簽名的時間戳 nonceStr: "", // 必填,生成簽名的隨機串 signature: "",// 必填,簽名 jsApiList: [ "startRecord", // 錄音開始api "stopRecord", // 錄音結束api "uploadVoice", // 上傳錄音api "onVoiceRecordEnd", // 超過一分鐘自動停止api "playVoice", // 播放錄音api "pauseVoice", // 暫停錄音api "onVoicePlayEnd", // 監聽語音播放完畢api ] });
代碼中的jsApiList就是錄音功能所用到的所有接口了。其他幾個屬性的值,就不介紹如何生成的了,調用jssdk的類庫,通過公眾號的appid和secret就能獲取到。嗯...還是貼下這部分的代碼吧:
// 引入jssdk庫 require_once APPPATH . "libraries/weixin/jssdk.php"; // 傳入appid和secret實例化jssdk類 $JsSdk = new JSSDK("wxa318c6979e231ffa", "301d8f04a0f2ba3098135a162165c991"); // 得到相關時間戳和隨機字符串 $data["signPackage"] = $JsSdk->getSignPackage(); // 獲取當前頁面url $data["signPackage"]["url"] = explode("?", $data["signPackage"]["url"])[0];
注意:調用JSSDK類的時候,會在項目根目錄下生成兩個文件access_token.php和jsapi_ticket.php,里面放的是過期時間和token、ticket值。
ready事件ready注冊錄音播放結束監聽事件:
wx.ready(function(){ // 監聽事件一開始就加載 wx.onVoicePlayEnd({ success: function (res) { layer.msg("播放完畢"); // 這里用了layer彈框 } }); });錄音事件
本小節主要是關于錄音事件的介紹,代碼行中的注釋應該寫的很清楚,不清楚的留言問吧:
// 聲明一個錄音數組 以存放錄音臨時ID var voice = { localId: [] }; // 手指按下錄音鍵 $("#micb").on("touchstart", function(event){ // 取消事件的默認動作 event.preventDefault(); // 賦值當前的錄音開始時間戳到全局變量 START = new Date().getTime(); recordTimer = setTimeout(function(){ // 錄音開始 wx.startRecord({ success: function(){ // 錄音不能超過一分鐘 超過一分鐘自動停止 并觸發該事件 wx.onVoiceRecordEnd({ // 錄音時間超過一分鐘沒有停止的時候會執行 complete 回調 complete: function (res) { // 給出提示 layer.msg("最多只能錄制一分鐘", {icon:2, time:1000}); // 記錄錄音的臨時ID voice.localId = res.localId; uploadVoice(); } }); }, cancel: function () { alert("用戶拒絕授權錄音"); } }); },300); }); // 松手結束錄音 $("#micb").on("touchend", function(event){ event.preventDefault(); // 獲取錄音停止時間戳 END = new Date().getTime(); // 獲取錄音總時長 duration = END - START; // 如果小于300ms則視為時間太短 拋出提示 if(duration < 300){ END = 0; START = 0; layer.msg("時間太短", {icon:2, time:1000}); //小于300ms,不錄音 clearTimeout(recordTimer); }else{ wx.stopRecord({ success: function (res) { voice.localId = res.localId; // 上傳錄音 uploadVoice(); }, fail: function (res) { alert(JSON.stringify(res)); } }); } }); // 上傳錄音 function uploadVoice() { // 調用微信的上傳錄音接口把本地錄音先上傳到微信的服務器 // 不過,微信只保留3天,而我們需要長期保存,我們需要把資源從微信服務器下載到自己的服務器 wx.uploadVoice({ localId: voice.localId, // 需要上傳的音頻的本地ID,由stopRecord接口獲得 isShowProgressTips: 1, // 默認為1,顯示進度提示 success: function (res) { // 把錄音在微信服務器上的id(res.serverId)發送到自己的服務器供下載。 $.ajax({ url: "down_file.php", type: "post", data: {serverId: res.serverId}, dataType: "json", success: function (data) { if(data.status == 200) { layer.msg("語音保存成功", {icon:1, time:2000}); } }, error: function (xhr, errorType, error) { console.log(error); } }); } }); } /** * 播放音頻 */ function playVoice() { wx.playVoice({ localId: voice.localId // 需要播放的音頻的本地ID,由stopRecord接口獲得 }) }
以上就是微信錄音在前端的JS代碼,接下來說明服務器(PHP)端下載錄音到本地的代碼,下載代碼具體在download_media()方法中,其他都是一些輔助方法:
下載input->post("serverId"); if ($media_id) { // 獲取access_token $access_tokens = $this->getWechatAccessToken(); // 下載素材接口 $down_media_url = "https://api.weixin.qq.com/cgi-bin/media/get"; /** * 根據access_tokens獲取素材 */ $get_media_url = $down_media_url . "?access_token=" . $access_tokens . "&media_id=" . $media_id; // 獲取文件流 $file_flow = file_get_contents($get_media_url); // 本地保存目錄 $save_path = "resource/uploads/"; if( !is_dir($save_path) ) { mkdir(iconv("UTF-8", "GBK", $save_path), 0777, TRUE); } // 生成文件名 $filename = $this->msectime() . $this->salt(6) . ".amr"; // 寫入文件流到本地 $flag = file_put_contents($save_path . "/" . $filename, $file_flow); unset($file_flow); if($flag !== FALSE) { return $save_path . "/" . $filename; }else { return FALSE; } } } }
由于微信保存錄音的格式.amr,所以下載的時候只能下載amr格式的音頻,強行下載成MP3格式的話,播放可能會出現一些問題,接下來就說下轉碼的幾種方式;
轉碼 第三方工具 FFmpeg FFmpeg介紹FFmpeg是一套可以用來記錄、轉換數字音頻、視頻,并能將其轉化為流的開源計算機程序。FFmpeg在Linux平臺下開發,但它同樣也可以在其它操作系統環境中編譯運行,包括Windows、Mac OS X等。———來自百度的介紹。下載
通過這個網址下載ffmpeg.exe程序 https://ffmpeg.zeranoe.com/bu...,選擇shared這個類型,如下圖:
下載完成后,解壓在bin目錄可以看到ffmpeg.exe
轉碼cmd命令行轉碼:
直接切換到ffmpeg.exe的目錄,在命令行輸入
ffmpeg.exe -i E:wodeffmpegamr.amr E:wodeffmpegarm.mp3
即可,就可以看到整個轉碼的過程。下圖所示:
php轉碼:
那么如何利用php來調用exe軟件來進行轉碼呢?很方便的是php提供了相應的函數,exec和system,他們都可以調用cmd的命令,比如調用ffmpeg.exe來進行轉碼:
exec("E:wodeffmpeginffmpeg.exe -i E:wodeffmpegamr.amr E:wodeffmpegexec.mp3");
就是這么簡單了。當然ffmpeg也支持其他格式的轉碼,音頻、視頻等都可以。
PS:會把測試的amr文件貼在下面的資源節里,有需要的小伙伴可以下載測試,因為現在的amr格式的文件都挺難找的,別問我怎么知道的....
第三方平臺 七牛云除了通過php外部命令調用軟件進行轉碼之外,還可以通過第三方平臺實現轉碼操作,這里就舉例七牛云,首先貼兩個鏈接:
七牛開發者SDK列表
七牛文件上傳說明
上面的的一個鏈接里顯示的是七牛官方所有的SDK文檔列表,可以根據后端語言的不同進行選擇查看;第二個鏈接就是本小節要說的利用七牛云上傳文件。下面來瞧一下代碼,也同樣封裝成類的形式:
"", // 配置七牛AccessKey "SecretKey" => "", // 配置七牛SecretKey "bucket" => "cxiansheng", // 七牛的存儲空間名,我的是cxiansheng "voice-pipeline" => "cxiansheng", // 設置轉碼隊列名 "voice-domain" => "http://***.com/" // 你的CDN加速域名 上傳文件成功后通過這個域名+文件名就可以訪問到相應的資源 ]; /** * 上傳微信錄音文件到七牛并轉碼mp3 * @param string $trans_ext 本地文件路徑 */ public function upload_qiniu($file_path) { // 獲取七牛auth對象 $auth = new Auth($this->qiniu["AccessKey"], $this->qiniu["SecretKey"]); // 定義轉碼后的mp3文件名 $qiniu_filename = "qiniu" . $this->msectime() . $this->salt(6) . ".mp3"; // 指定上傳文件成功后的后續處理 這里為轉碼操作 $savekey = Qiniuase64_urlSafeEncode($this->qiniu["bucket"] . ":" . $qiniu_filename); $fops = "avthumb/mp3/ab/128k/ar/44100/acodec/libmp3lame|saveas/" . $savekey; /** * 設置轉碼格式和轉碼隊列名 */ $policy = [ "persistentOps" => $fops, "persistentPipeline" => $this->qiniu["voice-pipeline"] ]; /** * 設置上傳到七牛的原始amr臨時文件名 * @var string */ $qiniu_tmp_filename = "originamrtmp.amr"; // 獲取上傳token $uptoken = $auth->uploadToken($this->qiniu["bucket"], null, 3600, $policy); // 調用上傳類 $uploadMgr = new UploadManager(); // 調用 UploadManager 的 putFile 方法進行文件的上傳。 list($ret, $err) = $uploadMgr->putFile($uptoken, $qiniu_tmp_filename, $file_path); // 資源管理類 $bucketMgr = new BucketManager($auth); if($ret["key"]) { // 刪除原始amr臨時文件 $err = $bucketMgr->delete($this->qiniu["bucket"], $ret["key"]); unlink($file_path); //刪除服務器上的amr文件 // 返回在七牛上的資源路徑 return $this->qiniu["voice-domain"] . $qiniu_filename; }else { return FALSE; } } }
上面的代碼應該不用我做過多介紹,里面的注釋每一步應該都寫得很清楚。
PS:在通過第三方轉碼的時候,調用api成功之后,由于要待轉碼的文件一般都會處于轉碼隊列中,可能還沒有立即轉碼成功我們想要的文件。所以不能根據轉碼過后的文件名去下載,需要等待一會兒,或者可以先把轉碼后的文件名保存在數據庫中,用定時任務去下載到本地。具體請看我在SF提問里的回答--下載七牛云mp3文件間歇性失敗
總結至此,在微信開發中關于錄音這一塊兒的功能,就已經介紹完畢。如果有寫錯的地方,歡迎拍磚。同樣看完還不是很理解的朋友,也可以留言。
以上。
composer安裝PHP-FFmpeg
ffmpeg-php擴展
微信jssdk錄音功能開發記錄
amr格式文件
其他另外兩篇自己關于微信開發的總結推薦:
微信開發之微信公眾號支付
微信開發之微信登錄
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/28342.html
項目需求簡單描述 用戶長按錄音,松手后直接結束錄音,結束錄音后,用戶可以選擇重新錄音、播放剛才的錄音,上傳錄音(這里的上傳錄音指上傳到自己服務器,上傳步驟是,前端調用wx.uploadVoice,后臺再到微信服務器下載音頻文件,上傳到自己的服務器)。注意,音頻文件自上傳時間算起在微信服務器的有效期為3天。由于后臺從微信服務器下載的音頻文件是amr格式的,需要后臺先把amr文件轉換成MP3,前端用a...
摘要:開源庫隨著支持功能的增多,音頻轉碼處理效率漸漸的跟不上需求了,近期抽時間對音頻轉碼部分進行了升級優化,以支持更多實用的功能。基于以上兩點問題,似乎只有多線程能夠解決。 Recorder H5 GitHub開源庫隨著支持功能的增多,音頻轉碼處理效率漸漸的跟不上需求了,近期抽時間對音頻轉碼部分進行了升級優化,以支持更多實用的功能。另外IOS的Hybrid App也完成了移植,Android...
摘要:前不久寫了個工具型微信小程序周邊,里面用到了語音識別技術。當然如果你要兼容低端微信用戶需要使用做兼容處理。如果發現不當之處歡迎微信交流。想看實際案例的可以微信掃碼關于安裝關于安裝關于安裝 前不久寫了個工具型微信小程序(Find周邊),里面用到了語音識別技術。現將實現細節整理如下: 接口預覽 通過閱讀了解科大訊飛接口文檔、小程序接口開發文檔以及對后端ThinkPhp框架的學習,我整理...
摘要:前不久寫了個工具型微信小程序周邊,里面用到了語音識別技術。當然如果你要兼容低端微信用戶需要使用做兼容處理。如果發現不當之處歡迎微信交流。想看實際案例的可以微信掃碼關于安裝關于安裝關于安裝 前不久寫了個工具型微信小程序(Find周邊),里面用到了語音識別技術。現將實現細節整理如下: 接口預覽 通過閱讀了解科大訊飛接口文檔、小程序接口開發文檔以及對后端ThinkPhp框架的學習,我整理...
閱讀 1829·2021-09-14 18:03
閱讀 2267·2019-08-30 15:48
閱讀 1120·2019-08-30 14:09
閱讀 506·2019-08-30 12:55
閱讀 2723·2019-08-29 11:29
閱讀 1482·2019-08-26 13:43
閱讀 2311·2019-08-26 13:30
閱讀 2368·2019-08-26 12:17