整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
備做一個(gè)網(wǎng)頁(yè)版聊天界面，表情啊、圖片啊、上傳文件啊都應(yīng)該要有，視頻就算了，語(yǔ)音還是要的。
本文記錄的是在網(wǎng)頁(yè)上用GitHub上的Recorder進(jìn)行在線錄音和上傳到服務(wù)器，前幾天升了一下級(jí)，以后有時(shí)間再專門寫一篇記錄。
本示例代碼支持PC、Android、IOS(僅Safari)中使用，如果用RecordApp可增加對(duì)IOS(微信瀏覽器、小程序)的支持。
看萬遍代碼不如行動(dòng)一遍，新建一個(gè)html文件，把下面三段代碼復(fù)制到文件內(nèi)，雙擊瀏覽器打開就能進(jìn)行測(cè)試。
<!-- 先加載js錄音庫(kù)，注意：你應(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>
<script>
function uploadRec(){
//停止錄音，得到了錄音文件blob二進(jìn)制對(duì)象，想干嘛就干嘛
rec.stop(function(blob,duration){
/*
blob文件對(duì)象，可以用FileReader讀取出內(nèi)容
，或者用FormData上傳，本例直接上傳二進(jìn)制文件
，對(duì)于普通application/x-www-form-urlencoded表單上傳
，請(qǐng)參考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/修改成你的上傳地址");//這個(gè)假地址在控制臺(tái)network中能看到請(qǐng)求數(shù)據(jù)和格式，請(qǐng)求結(jié)果無關(guān)緊要
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
alert(xhr.status==200?"上傳成功":"測(cè)試請(qǐng)先打開瀏覽器控制臺(tái)，然后重新錄音，在network選項(xiàng)卡里面就能看到上傳請(qǐng)求數(shù)據(jù)和格式了");
}
}
xhr.send(form);
},function(msg){
alert("錄音失敗:"+msg);
});
};</script>
<script>
function playRec(){
//停止錄音，得到了錄音文件blob二進(jìn)制對(duì)象，想干嘛就干嘛
rec.stop(function(blob,duration){
var audio=document.createElement("audio");
audio.controls=true;
document.body.appendChild(audio);
//非常簡(jiǎn)單的就能拿到blob音頻url
audio.src=URL.createObjectURL(blob);
audio.play();
},function(msg){
alert("錄音失敗:"+msg);
});
};</script>
GitHub地址：https://github.com/xiangyuecn/Recorder
在線測(cè)試: https://xiangyuecn.github.io/Recorder/
Recorder用于html5錄音，為一個(gè)純粹的js庫(kù)，支持大部分已實(shí)現(xiàn)getUserMedia的移動(dòng)端、PC端瀏覽器，包括騰訊Android X5內(nèi)核(QQ、微信)。
錄音默認(rèn)輸出mp3格式，另外可選wav格式（此格式錄音文件超大）；有限支持ogg、webm、amr格式；支持任意格式擴(kuò)展（前提有相應(yīng)編碼器）。
小巧：如果對(duì)錄音文件大小沒有特別要求，可以僅僅使用錄音核心+wav編碼器，源碼不足300行，壓縮后的recorder.wav.min.js不足4kb。mp3使用lamejs編碼，壓縮后的recorder.mp3.min.js開啟gzip后54kb。
由于IOS(11.X、12.X)上只有Safari支持getUserMedia，其他瀏覽器均不支持H5錄音，因此額外針對(duì)IOS對(duì)Recorder進(jìn)行了進(jìn)一步的兼容封裝，升級(jí)成了RecordApp，用于支持微信（含瀏覽器、小程序web-view），另外RecordApp對(duì)Hybrid App也提供了更加優(yōu)秀的支持。
由于RecordApp需要微信公眾(訂閱)號(hào)提供JsSDK錄音支持，所以開發(fā)難度會(huì)大些，但支持的環(huán)境更多。Recorder拿來就能用，具體使用哪個(gè)請(qǐng)參考下表：
如果這個(gè)庫(kù)有幫助到您，請(qǐng) Star 一下。
原文作者：高堅(jiān)果兄弟
原文地址：https://www.cnblogs.com/xiangyuecn/p/10772227.html
在很多網(wǎng)站上都會(huì)使用到視頻和音頻，HTML5 中提供了展示視頻和音頻的標(biāo)簽。向網(wǎng)頁(yè)嵌入視頻可以使用 <video> 標(biāo)簽，而嵌入音頻可以使用 <audio> 標(biāo)簽。這兩個(gè)標(biāo)簽都是 HTML 5 中新增的標(biāo)簽，兩個(gè)標(biāo)簽中的屬性和方法也很類似，但也有些不同。其中 audio 元素用于定義聲音，比如音樂， video 元素用于定義視頻，如電影等。
<video> 標(biāo)簽可以用于定義視頻，且提供了播放、暫停、音量控件來控制視頻。舉個(gè)例子，像我們俠課島網(wǎng)站上，課程視頻播放，就是通過 <video> 標(biāo)簽來實(shí)現(xiàn)的。下面我們來看一下如何向網(wǎng)頁(yè)中嵌入一個(gè)視頻。
示例：
首先我們準(zhǔn)備一個(gè)視頻，例如一個(gè) test.mp4，然后使用 <video> 標(biāo)簽嵌入視頻，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5學(xué)習(xí)(9xkd.com)</title>
</head>
<body>
<video src="./test.mp4" controls="controls" width="700px" height="400px"></video>
</body>
</html>
在瀏覽器中的預(yù)覽效果：
從上圖中可以看到，我們通過 <video> 標(biāo)簽成功向網(wǎng)頁(yè)中插入了一個(gè)視頻， 其中 src 屬性用于引入要播放的視頻的 URL，注意視頻地址一定要正確，如果地址錯(cuò)誤，視頻是不能顯示的。然后我們通過 width、height 屬性設(shè)置了視頻的寬度為 700px ，高度為 400px。
然后可以看到，視頻上還顯示了播放、調(diào)整音量等控件，當(dāng)我們點(diǎn)擊播放按鈕時(shí)，視頻就會(huì)開始播放。這是因?yàn)槲覀冊(cè)O(shè)置了 controls 屬性，如果我們沒有設(shè)置這個(gè)屬性，視頻將會(huì)顯示一個(gè)靜止的畫面，并且不管怎么點(diǎn)擊都是沒有反應(yīng)的。大家可以試一下，不設(shè)置 controls 屬性然后在瀏覽器中查看演示效果，這里就不演示給大家看了。
video 元素中的常用屬性如下所示：
有些比較老的瀏覽器可能不支持 <video> 標(biāo)簽，例如 IE8 及以下的瀏覽器就不支持，而 IE9+、Firefox、Opera、Chrome、Safari 等瀏覽器都支持 <video> 標(biāo)簽。
所以我們可以在 <video> 標(biāo)簽中放置文本內(nèi)容，這樣當(dāng)某個(gè)瀏覽器不支持此標(biāo)簽時(shí)，就可以顯示提示內(nèi)容：
<video src="./test.mp4" controls="controls" width="700px" height="400px">
您的瀏覽器不支持 video 標(biāo)簽
</video>
這樣用戶就會(huì)知道，是因?yàn)闉g覽器不支持所以加載視頻不成功，可以換一個(gè)瀏覽器。
像我們平時(shí)看到的視頻格式有很多種，例如常見的有 mp4、AVI、mov、rmvb、Ogg 等等， 目前 video 元素支持的視頻格式有下面三種：
這三種視頻格式，在不同的瀏覽器中兼容性不同，例如 MP4 格式不支持 Firefox 和 Opera 瀏覽器，Ogg 格式不支持IE、Safari 瀏覽器，WebM 格式不支持IE、Safari 瀏覽器等。
所以我們可能需要在不同的瀏覽器中使用不同的視頻格式，這需要用到 <source> 標(biāo)簽。
<source> 標(biāo)簽可以為媒體元素定義媒介資源，例如 video 和 audio 元素。
例如 <video> 標(biāo)簽中可以包含多個(gè) <source> 標(biāo)簽，<source> 標(biāo)簽可以鏈接不同的視頻文件，瀏覽器將使用第一個(gè)可識(shí)別的格式。
示例：
例如我們插入的視頻播放器，帶有兩個(gè)源文件，瀏覽器會(huì)根據(jù)需要來選擇源文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5學(xué)習(xí)(9xkd.com)</title>
</head>
<body>
<video controls="controls" width="700px" height="400px">
<source src="./test.mp4" type="video/mp4">
<source src="./test.ogg" type="video/ogg">
您的瀏覽器不支持 video 標(biāo)簽
</video>
</body>
</html>
像上述代碼中，如果是 Safari 瀏覽器就會(huì)選擇第一個(gè)源文件，如果是 Firefox 瀏覽器則會(huì)選擇第二個(gè)源文件。
<source> 標(biāo)簽有三個(gè)屬性：
向網(wǎng)頁(yè)中嵌入音頻可以使用 <audio> 標(biāo)簽，此標(biāo)簽的使用和 <video> 標(biāo)簽類似。插入視頻是有畫面的，我們也可以調(diào)整視頻的寬和高等，而插入音頻是沒有畫面的。
audio 元素支持的格式和 video 元素也有一點(diǎn)區(qū)別：
示例：
例如我們插入一段音頻，在瀏覽器中可以看到，是沒有畫面的，只有聲音：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5學(xué)習(xí)(9xkd.com)</title>
</head>
<body>
<audio controls="controls">
<source src="./test.mp4" type="audio/mpeg">
<source src="./test.ogg" type="audio/ogg">
您的瀏覽器不支持 audio 標(biāo)簽
</audio>
</body>
</html>
在瀏覽器中的演示效果：
向網(wǎng)頁(yè)中嵌入音頻時(shí)，也可以通過 <source> 標(biāo)簽來指定兩個(gè)源文件，<source> 標(biāo)簽允許規(guī)定兩個(gè)視頻或者音頻文件供瀏覽器根據(jù)它對(duì)媒體類型或者編解碼器的支持進(jìn)行選擇。
audio 元素中的常用屬性和 video 元素差不多，但是 audio 元素中沒有 width、height 等屬性。
常用屬性如下所示：
向網(wǎng)頁(yè)中嵌入視頻和音頻其實(shí)很簡(jiǎn)單，要注意 video 元素 和 audio 元素支持的視頻、音頻格式類型，如果插入的視頻格式不支持，則視頻或音頻不會(huì)顯示。
更多可以查看鏈接：https://www.9xkd.com/
音頻是網(wǎng)頁(yè)承載內(nèi)容很重要的一個(gè)元素，也是必不可少的網(wǎng)頁(yè)表現(xiàn)形式（圖、文、表、視、音）之一。缺少聲音的網(wǎng)站，就如同人不能說話一樣。曾經(jīng)網(wǎng)頁(yè)要想播放音頻，必須得用第三方插件flash。隨著html5標(biāo)準(zhǔn)逐漸普及，如今幾乎所有的瀏覽器都使用html5來播放音頻。
目標(biāo)
作用是在 HTML 頁(yè)面中嵌入音頻元素，來播放聲音文件或者音頻流。
網(wǎng)頁(yè)版的音樂播放器
src 音頻的播放源（必須）
controls 瀏覽器自帶的控制條（必須）
autoplay 自動(dòng)播放
loop 循環(huán)播放
preload 預(yù)加載
音頻代碼
每一種瀏覽器自帶的音頻播放控制器都不一樣，但功能都一樣。網(wǎng)上看到的播放器，大多數(shù)都是改過它的樣式。
瀏覽器自帶的音頻控制條
<audio> 元素支持三種視頻格式： MP4, WebM, 和 Ogg。
如果不確定音頻格式是哪個(gè)格式，可以使用source標(biāo)簽。<source> 元素可以鏈接不同格式的視頻文件，瀏覽器將使用第一個(gè)可識(shí)別的格式。
支持多種格式
audio總結(jié)
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
