HTML5 實現錄音，然後上傳到伺服器，有現成方案嗎？

01-07

HTML5 實現錄音，然後上傳到伺服器，有現成方案嗎？

https://github.com/mattdiamond/Recorderjs

最近研究這塊，起因是這個視頻

接下來我們看下一個案例，推薦戴上耳機觀看~

八分音符醬（嘟督不噶油） - 騰訊視頻視頻聽著這魔性的聲音笑的停不下來，如果有聲音就會移動，如果聲音很大就會跳起來，但是這個是基於Windows安裝版的，不是HTML5。

題主問「HTML5 實現錄音，然後上傳到伺服器」拆開來看，「HTML5 實現錄音」「然後上傳到伺服器」。上傳伺服器沒有任何技術問題。主要問題是「HTML5能夠實現錄音么？」

兩種解決方案。

1、HTML5介面

首先需要這個API--getUserMedia，然後我通過http://caniuse.com查了一下這個API的兼容性。

數據感人，iOS Safari Safari 直接不支持，沒有任何商量餘地，也就是說想在iOS上使用麥克風？沒門！

而安卓陣營，原生瀏覽器5.x以上是支持的，但是國內是見不到原生安卓瀏覽器的。

貌似走到死胡同了。

TBS 3.0

柳暗花明！騰訊瀏覽服務簡稱TBS在2016年11月12號發布了TBS 3.0，在這個版本中支持了getUserMedia的API。

內置TBS 3.0的APP如下

TBS 3.0基本覆蓋了國內的手機用戶。

文檔在這裡：Media Capture and Streams

2、微信JSSDK

微信官方已經實現了這個介面

文檔在這裡：微信JSSDK說明文檔 - 微信公眾平台開發者文檔

這兩種方案你都可以選擇，但是有點略微的區別。

Enjoy！

--------------------------------2017.3.10更新---------------------------------------

第一種方案有幾點需要注意一下

1、大家不要用網上最多的「navigator.getUserMedia」這個介面，這個介面已經被廢除請用最新的介面「navigator.mediaDevices.getUserMedia」

2、如果要用到聲音介面的話域名要求打開https

Enjoy！

Since Chrome version 47, Voice Recording works only on HTTPS sites

目前基於webikit(谷歌之類的webikit)和Gecko(Firefox 52~57)都可以(不支持蘋果移動設備)，測試地址 https://sms.reyo.cn/ 用戶名:aa 密碼：123456

我們就是想實現像微信一樣的能發送語音的聊天數據(只是我們用h5在網頁上實現)：

可以用 html5 的 Audio Api 獲取音頻源（還能獲取攝像頭）

教程在這裡：

http://www.html5rocks.com/en/tutorials/webaudio/intro/

同問，現在有成熟的方案么？

HTML Media Capture

僅適用於手機。

樓主你好，請問你這個問題解決了嗎，如果解決了能給一下具體操作嗎

同問，你們怎樣解決的

你這個問題解決了嗎？H5實現錄音

把實時通話的語音數據寫入mongodb是怎麼樣實現的

有啊，不過我的音頻全部上傳到了又拍雲。是通過html5上傳的。

方案有很多啊，比如jRecorder