HTML5網(wǎng)頁錄音和上傳到服務(wù)器，支持PC、Android，支持IOS微信

備做一個網(wǎng)頁版聊天界面，表情啊、圖片啊、上傳文件啊都應(yīng)該要有，視頻就算了，語音還是要的。

本文記錄的是在網(wǎng)頁上用GitHub上的Recorder進(jìn)行在線錄音和上傳到服務(wù)器，前幾天升了一下級，以后有時間再專門寫一篇記錄。

錄音代碼

本示例代碼支持PC、Android、IOS(僅Safari)中使用，如果用RecordApp可增加對IOS(微信瀏覽器、小程序)的支持。

看萬遍代碼不如行動一遍，新建一個html文件，把下面三段代碼復(fù)制到文件內(nèi)，雙擊瀏覽器打開就能進(jìn)行測試。

<!-- 先加載js錄音庫，注意：你應(yīng)該把js clone到本地使用 --><meta charset="utf-8" />
<script src="https://xiangyuecn.github.io/Recorder/recorder.mp3.min.js"></script>
<input type="button" onclick="startRec()" value="開始錄音">
<hr>
<input type="button" onclick="playRec()" value="結(jié)束并播放">
<input type="button" onclick="uploadRec()" value="結(jié)束并上傳">
<script>
var rec;
function startRec(){
 rec=Recorder();//使用默認(rèn)配置，mp3格式
 
 //打開麥克風(fēng)授權(quán)獲得相關(guān)資源
 rec.open(function(){
 //開始錄音
 rec.start();
 },function(msg,isUserNotAllow){
 //用戶拒絕了權(quán)限或?yàn)g覽器不支持
 alert((isUserNotAllow?"用戶拒絕了權(quán)限，":"")+"無法錄音:"+msg);
 });
};
</script>

上傳服務(wù)器代碼

<script>
function uploadRec(){
 //停止錄音，得到了錄音文件blob二進(jìn)制對象，想干嘛就干嘛
 rec.stop(function(blob,duration){
 /*
 blob文件對象，可以用FileReader讀取出內(nèi)容
 ，或者用FormData上傳，本例直接上傳二進(jìn)制文件
 ，對于普通application/x-www-form-urlencoded表單上傳
 ，請參考github里面的例子
 */
 var form=new FormData();
 form.append("upfile",blob,"recorder.mp3"); //和普通form表單并無二致，后端接收到upfile參數(shù)的文件，文件名為recorder.mp3
 
 //直接用ajax上傳
 var xhr=new XMLHttpRequest();
 xhr.open("POST","http://baidu.com/修改成你的上傳地址");//這個假地址在控制臺network中能看到請求數(shù)據(jù)和格式，請求結(jié)果無關(guān)緊要
 xhr.onreadystatechange=function(){
 if(xhr.readyState==4){
 alert(xhr.status==200?"上傳成功":"測試請先打開瀏覽器控制臺，然后重新錄音，在network選項(xiàng)卡里面就能看到上傳請求數(shù)據(jù)和格式了");
 }
 }
 xhr.send(form);
 },function(msg){
 alert("錄音失敗:"+msg);
 });
};</script>

立即播放代碼

<script>
function playRec(){
 //停止錄音，得到了錄音文件blob二進(jìn)制對象，想干嘛就干嘛
 rec.stop(function(blob,duration){
 var audio=document.createElement("audio");
 audio.controls=true;
 document.body.appendChild(audio);
 
 //非常簡單的就能拿到blob音頻url
 audio.src=URL.createObjectURL(blob);
 audio.play();
 },function(msg){
 alert("錄音失敗:"+msg);
 });
};</script>

Recorder

GitHub地址：https://github.com/xiangyuecn/Recorder

在線測試: https://xiangyuecn.github.io/Recorder/

Recorder用于html5錄音，為一個純粹的js庫，支持大部分已實(shí)現(xiàn)getUserMedia的移動端、PC端瀏覽器，包括騰訊Android X5內(nèi)核(QQ、微信)。

錄音默認(rèn)輸出mp3格式，另外可選wav格式（此格式錄音文件超大）；有限支持ogg、webm、amr格式；支持任意格式擴(kuò)展（前提有相應(yīng)編碼器）。

小巧：如果對錄音文件大小沒有特別要求，可以僅僅使用錄音核心+wav編碼器，源碼不足300行，壓縮后的recorder.wav.min.js不足4kb。mp3使用lamejs編碼，壓縮后的recorder.mp3.min.js開啟gzip后54kb。

由于IOS(11.X、12.X)上只有Safari支持getUserMedia，其他瀏覽器均不支持H5錄音，因此額外針對IOS對Recorder進(jìn)行了進(jìn)一步的兼容封裝，升級成了RecordApp，用于支持微信（含瀏覽器、小程序web-view），另外RecordApp對Hybrid App也提供了更加優(yōu)秀的支持。

由于RecordApp需要微信公眾(訂閱)號提供JsSDK錄音支持，所以開發(fā)難度會大些，但支持的環(huán)境更多。Recorder拿來就能用，具體使用哪個請參考下表：

最后

如果這個庫有幫助到您，請 Star 一下。

原文作者：高堅(jiān)果兄弟

原文地址：https://www.cnblogs.com/xiangyuecn/p/10772227.html

兩天發(fā)布了一篇關(guān)于利用html5在手機(jī)端進(jìn)行撥號和發(fā)送短信的教程，今天再說一下利用html5在手機(jī)端調(diào)用攝像頭以及錄音的教程

HTML5 調(diào)用手機(jī)攝像頭

在html5中可以利用type類型為file的input的標(biāo)簽調(diào)起手機(jī)的攝像頭

例：html5調(diào)用手機(jī)攝像頭進(jìn)行拍照

<input type="file" accept="image/*" capture="camera">

例：html5調(diào)用手機(jī)攝像頭進(jìn)行錄像

<input type="file" accept="video/*" capture="camera">

HTML5 進(jìn)行手機(jī)錄音

input 標(biāo)簽，不僅僅可以調(diào)用起手機(jī)的攝像頭，還可以錄音呢

例：

<input type="file" accept="audio/*" capture="microphone">

input代碼解析

input accept 屬性

accept屬性可以限制可用文件的類型，當(dāng) input 標(biāo)簽的 type 屬性為 file 時，可以規(guī)定服務(wù)器所接受的文件類型

例如：

accept="audio/*" 表示所有音頻文件
accept="video/*" 表示視頻文件
accept="image/"* 表示圖片文件

當(dāng)然你也可以使用文件后綴名的形式

例：

accept="image/png* 表示只接收后綴名為 png 的圖片
accept="image/jpg* 表示只接收后綴名為 jpg 的圖片
accept=".png, .jpg, .jpeg" 表示可以同時接收 png jpg jpeg 后綴的文件

input capture 屬性

篇文章主要介紹了recorder.js 基于Html5錄音功能的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

recorder.js

microphone基于HTML5的錄音功能，輸出格式為mp3文件。

前言

完全依賴H5原生API

所涉及的API：WebRTC、AudioContext、Worker、Video/Audio API、Blob、URL

兼容性

Chrome、FF、Edge、QQ、360(注：目前IE和Safari全版本不兼容)

其中Chrome47以上以及QQ瀏覽器強(qiáng)制要求HTTPS的支持

請嘗試使用FF、Edge、360等瀏覽器進(jìn)行體驗(yàn)，或?qū)㈨?xiàng)目下載到本地通過localhost的方式

使用方式

var recorder = new Recorder({
    sampleRate: 44100, //采樣頻率，默認(rèn)為44100Hz(標(biāo)準(zhǔn)MP3采樣率)
    bitRate: 128, //比特率，默認(rèn)為128kbps(標(biāo)準(zhǔn)MP3質(zhì)量)
    success: function(){ //成功回調(diào)函數(shù)
    },
    error: function(msg){ //失敗回調(diào)函數(shù)
    },
    fix: function(msg){ //不支持H5錄音回調(diào)函數(shù)
    }
});

API

//開始錄音
recorder.start();
//停止錄音
recorder.stop();
//獲取MP3編碼的Blob格式音頻文件
recorder.getBlob(function(blob){ //獲取成功回調(diào)函數(shù)，blob即為音頻文件
//  ...
},function(msg){ //獲取失敗回調(diào)函數(shù)，msg為錯誤信息
//  ...
});

到此這篇關(guān)于recorder.js 基于Html5錄音功能的實(shí)現(xiàn)的文章就介紹到這了。

在線咨詢

上一篇：javascript 字符串大小寫轉(zhuǎn)換的方法
下一篇：BI 數(shù)據(jù)可視化平臺建設(shè)（1）—交叉表組件演變實(shí)戰(zhàn)

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5網(wǎng)頁錄音和上傳到服務(wù)器，支持PC、Android，支持IOS微信