使用Html5 多媒體實現微信語音功能
隨著微信等社交App的興起，語音聊天成為很多App必備功能，大到將語音聊天作為主要功能的社交App，小到電商App的語音客服、店小二功能，語音聊天成為了必不可少的方式。
但是很多人感覺網頁端語音離我們很遙遠，這些更多是本地應用的工作，其實不然，隨著Html5的發展，語音功能也漸漸成為前端必會的功能之一。
為什麼要學會HTML5 的語音呢？
1.Html5 規範推進，手機的更新加速了作業系統更新，語音功能將會變成前端主要的工作之一，就像現在的canvas一樣。前端實現語音功能開發速度更快，更節省人力（這意味著給老闆省錢，給老闆省錢就是在給自己漲工資）
2.即使是現在本地應用做語音功能，熟悉前端語音互動的各種坑能夠讓你們的同事關係更和諧，協作更順暢，而不是互相掐架。
3.瞭解新的技術可以預防面試，二來可以預判技術潮流，不至於學了一堆屠龍之技或者墨守成規，更有利於讓自己的知識和職業核心競爭力一直處在食物鏈的頂端。
4.前端大部分人對語音功能有誤解，以為語音功能就是HTML5 audio標籤而已，事實上真的不是那麼簡單的"而已"
不墨跡那麼多，我們們直接開發一個小專案啥都明明白兒白兒了，先看效果圖
demo1.png
業務邏輯非常簡單，
跟我們微信用法一模一樣，手按下去字變成鬆開結束，同時說話被錄下來，鬆手的時候，變成按下結束，同時傳送語音給對方
我們一步一步一步來，首先我們先整一個html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>微信語音</title>
<link rel="stylesheet" href="css/record.css">
</head>
<body>
<div id="wrap">
<header id="header">
<div id="left">
<i class="material-icons">
chevron_left
</i>
微信(184)
</div>
<div id="mid">艾達·王</div>
<div id="right">
<i class="material-icons">
more_horiz
</i>
</div>
</header>
<div id="contentWrap">
<ul id="chatList">
<li class="item_me">
<div class="chatContent">我是不是你最疼愛的人?
<span class="bot"></span>
<span class="top"></span>
</div>
<div class="avatar">
<img src="images/ava1.png" alt="">
</div>
</li>
<li class="item_you">
<div class="avatar">
<img src="images/ava2.jpg" alt="">
</div>
<div class="chatContent">奔跑吧，兄弟！（滾犢子）
<span class="bot"></span>
<span class="top"></span>
</div>
</li>
<li class="item_me">
<div class="chatContent">這裡我就不多說了，上來就是一梭子程式碼……
<span class="bot"></span>
<span class="top"></span>
</div>
<div class="avatar">
<img src="images/ava1.png" alt="">
</div>
</li>
<li class="item_you">
<div class="avatar">
<img src="images/ava2.jpg" alt="">
</div>
<div class="chatContent">大彬哥，你說你咋這麼優秀呢？看見你我有一種大海的感覺
<span class="bot"></span>
<span class="top"></span>
</div>
</li>
<li class="item_me">
<div class="chatContent">老妹兒，你是不是喜歡上我了呢……
<span class="bot"></span>
<span class="top"></span>
</div>
<div class="avatar">
<img src="images/ava1.png" alt="">
</div>
</li>
<li class="item_you">
<div class="avatar">
<img src="images/ava2.jpg" alt="">
</div>
<div class="chatContent">不是，我暈船，看見你想吐……
<span class="bot"></span>
<span class="top"></span>
</div>
</li>
</ul>
</div>
<footer id="footer">
<div id="keyboard">
<i class="material-icons">
keyboard
</i>
</div>
<div id="sayBtn">
<span id="sendBtn" class="sendBtn">按下 說話</span>
</div>
<div id="icon"><i class="material-icons">
sentiment_satisfied
</i></div>
<div id="add"><i class="material-icons">
add_circle_outline
</i></div>
</footer>
</div>
</body>
</html>
css部分，
*{
margin: 0;
padding: 0;
}
ul li{ list-style: none;}
html,body{
height: 100%;
width: 100%;
overflow: hidden;
}
body{
background: #ebebeb;
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(../css/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(../css/iconfont/MaterialIcons-Regular.woff) format('woff2'),
url(../css/iconfont/MaterialIcons-Regular.woff2) format('woff'),
url(../css/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 32px; /* Preferred icon size */
display: inline-block;
/* line-height: 0.01rem; */
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
#wrap{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
#header{
height: 46px;
line-height: 46px;
background: #363539;
display: flex;
align-items: center;
color: #fff;
justify-content: space-between;
}
#header #left{
display: flex;
align-items: center;
font-size: 14px;
width: 100px;
}
#header #right{
display: flex;
align-items: center;
width: 100px;
justify-content: flex-end;
}
#header #right i{
padding-right: 6px;
}
#header #mid{
text-align: center;
flex: 1;
}
#contentWrap{
flex: 1;
overflow-y:auto;
}
.item_me,.item_audio{
display: flex;
align-items: flex-start;
justify-content:flex-end;
padding: 8px;
}
.item_you{
display: flex;
align-items: flex-start;
justify-content:flex-start;
padding: 8px;
}
.avatar{
width: 40px;
height: 40px;
}
.avatar img{width: 100%;}
.item_me .chatContent{
padding: 10px;
background: #a0e75a;
border: 1px solid #6fb44d;
margin-right: 15px;
border-radius: 5px;
position: relative;
}
.chatContent span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.item_me .chatContent span.bot{
border-width:8px;
border-style:solid dashed dashed;
border-color: transparent transparent transparent #6fb44d;
right:-17px;
top:10px;
}
.item_me .chatContent span.top{
border-width:8px;
border-style:solid dashed dashed;
border-color:transparent transparent transparent #a0e75a ;
right:-15px;
top:10px;
}
.item_you .chatContent{
padding: 10px;
background: #a0e75a;
border: 1px solid #6fb44d;
margin-left: 15px;
border-radius: 5px;
position: relative;
}
.item_you .chatContent span.bot{
border-width:8px;
border-style:solid dashed dashed;
border-color: transparent #6fb44d transparent transparent ;
left:-17px;
top:10px;
}
.item_you .chatContent span.top{
border-width:8px;
border-style:solid dashed dashed;
border-color:transparent #a0e75a transparent transparent ;
left:-15px;
top:10px;
}
#footer{
height: 46px;
padding: 0 4px;
background: #f4f5f6;
border-top: 1px solid #d7d7d8;
display: flex;
align-items: center;
color: #7f8389;
justify-content: space-around;
}
#sayBtn{
flex: 1;
display: flex;
margin: 0 5px;
color:#565656;
font-weight: bold;
}
.sendBtn{
display: block;
flex: 1;
padding: 8px;
background: #f4f5f6;
border:1px solid #bec2c1;
border-radius: 5px;
text-align: center;
}
.activeBtn{
display: block;
flex: 1;
padding: 8px;
background: #c6c7ca;
border:1px solid #bec2c1;
border-radius: 5px;
text-align: center;
}
.item_audio .chatContent{
padding: 6px;
background: #fff;
border: 1px solid #999;
border-radius: 5px;
margin-right: 15px;
position: relative;
width:120px;
min-height: 20px;
}
.item_audio .chatContent span.bot{
border-width:8px;
border-style:solid dashed dashed;
border-color: transparent transparent transparent #999;
right:-17px;
top:10px;
}
.item_audio .chatContent span.top{
border-width:8px;
border-style:solid dashed dashed;
border-color:transparent transparent transparent #fff ;
right:-15px;
top:10px;
}
.material-icons_wifi{
transform: rotate(90deg);
color: #a5a5a5;
font-size: 22px;
}
.redDot{
background: #f45454;
border-radius: 50%;
width: 8px;
height: 8px;
margin-right: 10px;
}
這裡我說兩個注意點，
1.html部分：
圖省事我並沒有畫素級切圖，圖省事我也直接用了svg圖示，具體庫我使用的是
https://material.io/tools/icons/?style=outline
2.css部分：使用flex佈局。我只是為了講解Html5功能，所以flex並沒有寫相容性寫法，另外App頭部部分寫法大家注意一下，那裡是非常常用的。
下面說重點js部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>微信語音</title>
<link rel="stylesheet" href="css/record.css">
<script>
document.addEventListener('DOMContentLoaded', function () {
var oSendBtn = document.getElementById('sendBtn');
var soundClips = document.querySelector('.sound-clips');
var mediaRecorder;
var oChatList = document.getElementById('chatList');
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(
// constraints - only audio needed for this app
{
audio: true
})
// Success callback
.then(function (stream) {
rec(stream);
})
// Error callback
.catch(function (err) {
}
);
} else {
}
function rec(stream) {
mediaRecorder = new MediaRecorder(stream);
oSendBtn.addEventListener('touchstart', function (ev) {
ev.preventDefault();
this.innerHTML = '鬆開 結束';
this.classList.add('activeBtn');
mediaRecorder.start();
}, false);
oSendBtn.addEventListener('touchend', function (ev) {
ev.preventDefault();
this.innerHTML = '按下 說話';
this.classList.remove('activeBtn');
mediaRecorder.stop();
}, false);
mediaRecorder.ondataavailable = function (e) {
var clipContainer = document.createElement('li');
var audio = document.createElement('audio');
clipContainer.classList.add('item_audio');
clipContainer.innerHTML = `
<div class = "redDot"></div>
<div class="chatContent">
<i class="material-icons material-icons_wifi">wifi</i>
<span class="bot"></span>
<span class="top"></span>
</div>
<div class="avatar">
<img src="images/ava1.png" alt="">
</div>`;
audio.setAttribute('controls', '');
oChatList.appendChild(clipContainer);
var audioURL = window.URL.createObjectURL(e.data);
audio.src = audioURL;
oChatList.addEventListener('touchstart', function (ev) {
if (ev.srcElement.parentNode.className!== 'item_audio') return;
audio.play();
ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode.children[0])
}, false);
};
}
}, false);
</script>
</head>
<body>
<div id="wrap">
<header id="header">
<div id="left">
<i class="material-icons">
chevron_left
</i>
微信(184)
</div>
<div id="mid">艾達·王</div>
<div id="right">
<i class="material-icons">
more_horiz
</i>
</div>
</header>
<div id="contentWrap">
<ul id="chatList">
<li class="item_me">
<div class="chatContent">我是不是你最疼愛的人?
<span class="bot"></span>
<span class="top"></span>
</div>
<div class="avatar">
<img src="images/ava1.png" alt="">
</div>
</li>
<li class="item_you">
<div class="avatar">
<img src="images/ava2.jpg" alt="">
</div>
<div class="chatContent">奔跑吧，兄弟！（滾犢子）
<span class="bot"></span>
<span class="top"></span>
</div>
</li>
<li class="item_me">
<div class="chatContent">這裡我就不多說了，上來就是一梭子程式碼……
<span class="bot"></span>
<span class="top"></span>
</div>
<div class="avatar">
<img src="images/ava1.png" alt="">
</div>
</li>
<li class="item_you">
<div class="avatar">
<img src="images/ava2.jpg" alt="">
</div>
<div class="chatContent">大彬哥，你說你咋這麼優秀呢？看見你我有一種大海的感覺
<span class="bot"></span>
<span class="top"></span>
</div>
</li>
<li class="item_me">
<div class="chatContent">老妹兒，你是不是喜歡上我了呢……
<span class="bot"></span>
<span class="top"></span>
</div>
<div class="avatar">
<img src="images/ava1.png" alt="">
</div>
</li>
<li class="item_you">
<div class="avatar">
<img src="images/ava2.jpg" alt="">
</div>
<div class="chatContent">不是，我暈船，看見你想吐……
<span class="bot"></span>
<span class="top"></span>
</div>
</li>
</ul>
</div>
<footer id="footer">
<div id="keyboard">
<i class="material-icons">
keyboard
</i>
</div>
<div id="sayBtn">
<span id="sendBtn" class="sendBtn">按下 說話</span>
</div>
<div id="icon"><i class="material-icons">
sentiment_satisfied
</i></div>
<div id="add"><i class="material-icons">
add_circle_outline
</i></div>
</footer>
</div>
</body>
</html>
這裡實現的錄影功能要注意的點很多，我們一個個說，
第一個東西，
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(
{
audio: true
})
// Success callback
.then(function (stream) {
rec(stream);
})
// Error callback
.catch(function (err) {
}
);
} else {
}
當大家看一些html5關於錄音的介面的時候，你看到這個
Navigator.getUserMedia()
就要小心了，這個是老規範的東西了，被廢了，新的是
navigator.mediaDevices.getUserMedia
html5 多媒體裡面的語音這塊換了好幾茬規範，很亂，有些標籤甚至一個瀏覽器都沒實現過，未曾綻放就枯萎了，你也不用關心也沒必要浪費那個時間知道，你只要知道我說這些就夠了，因為你知道那些被廢掉的過往沒啥用，有那個時間還不如來一局LOL或者王者榮耀（雖然我並不懂二者的區別，不過這兩個遊戲應該都挺好玩吧，沒玩過不懂）。
裡面的東西大家也不需要看懂，什麼promise了，什麼媒體流了，你不用知道，你就知道這樣一件事就行了，
上面的程式碼就相當於開啟了水龍頭（或者說按下的錄音機的錄音鍵），那麼我們得有東西接著水啊，我們可以用電飯鍋（錄音機的話就是磁帶）放水龍頭下面看著它往裡面ci（我們老家話，射的意思），如下程式碼
mediaRecorder = new MediaRecorder(stream);
接下來就是，一按按鈕就生米煮成熟飯了，對應錄音機就是錄完了按按鈕就播放了，但是在我們程式裡面要想播放你不僅要有磁帶，還得有錄音機，錄音機就是audio標籤，沒有好辦，我們new一個。這個世界上沒有什麼物件是程式設計師不敢new的，new一個不行，就new兩個。剩下的程式碼除了嚇人之外，沒啥缺點，簡單的令人髮指。
mediaRecorder.ondataavailable = function (e) {
var clipContainer = document.createElement('li');
var audio = document.createElement('audio');
clipContainer.classList.add('item_audio');
clipContainer.innerHTML = `
<div class = "redDot"></div>
<div class="chatContent">
<i class="material-icons material-icons_wifi">wifi</i>
<span class="bot"></span>
<span class="top"></span>
</div>
<div class="avatar">
<img src="images/ava1.png" alt="">
</div>`;
audio.setAttribute('controls', '');
oChatList.appendChild(clipContainer);
var audioURL = window.URL.createObjectURL(e.data);
audio.src = audioURL;
oChatList.addEventListener('touchstart', function (ev) {
if (ev.srcElement.parentNode.className!== 'item_audio') return;
audio.play();
ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode.children[0])
}, false);
};
其實就是錄好了就播。
OK，是不是很簡單 ，整個專案我說幾個點吧：
1.切圖結構合理是你後面做功能的前提，結構做的好，後面就省事，想想諸葛不亮吧，未出茅廬人家就把html5結構搭好了，有三個section.
2.原生js和ES6的基礎打牢可以為你提供不同的思路，比如我這裡就使用了事件委託，還有ES6模板引擎。尤其是事件委託，不用的話查詢節點很麻煩，另外程式碼套來套去也容易亂。
3.新的 知識和技術其實並不複雜，其實很簡單，你想如果新技術不是為了讓功能更好實現，更能解決我們的問題，那開發新技術幹嘛？因為那幫大鬍子的大牛們沒事幹怕被領導說工作量不飽和？技術是為了解決問題和讓我們生活更美好服務的。
4.這個專案IOS 11以下跑不通，因為IOS 11.2之前不支援這個方法，需要IOS本地應用開發人員給你提供支援，但是在android下面是很OK的。而且可以預見，再過幾年IOS 原生也不用給你支援都支援了，那你開發效率得多高。不要以為這些技術很遙遠，html5真正商用也不過15年左右（vue 、react、angular大規模使用才幾年？），機會留給有準備的人。
整個專案細節和要注意的點還是很多的，希望大家真正自己敲一遍，因為你看懂了我的文章跟你會用這個技術兩碼事，祝大家在前端的路上越走越遠（記得常回來看看_）。
原文地址：https://segmentfault.com/a/1190000017308695?share_user=1030000008915224
相關文章
- Html5實現的語音搜尋功能HTML
- 微信小程式使用同聲傳譯實現語音識別功能微信小程式
- 掌握HTML5中的多媒體–音訊(audio)HTML音訊
- html5多媒體格式支援HTML
- 微信語音連播的實現思路
- HTML5 語音聊天 IM|仿微信語音介面|搖一搖效果HTML
- html5錄音功能實戰HTML
- 【多媒體之聲音總結】
- 使用 HTML5 Canvas 實現簽名功能HTMLCanvas
- 在VB中用API實現多媒體 (轉)API
- 實現微信分享功能
- 流媒體軟體系統可實現哪些功能IPTV？
- Android -- 多媒體播放之MediaPlayer使用內部實現簡析Android
- 微信小程式語音同步智慧識別的實現案例微信小程式
- 前端Html5（2）之多媒體音訊視訊標籤前端HTML音訊
- OpenHarmony 3.2 Beta多媒體系列——音影片播放框架框架
- 《HTML5多媒體應用開發》——1.2 HTML5的發展HTML
- H5實現移動端語音錄製功能H5
- HTML5 之多媒體HTML
- 使用Go語言實現爬蟲功能Go爬蟲
- 《HTML5多媒體應用開發》——1.4 小結HTML
- Html5多媒體相關的API---videoHTMLAPIIDE
- 掌握HTML5中的多媒體–視訊(video)HTMLIDE
- Android多媒體之認識聲音、錄音與播放(PCM)Android
- 基於環信實現實時視訊語音通話功能
- 如何實現前端錄音功能前端
- 微信小程式 遮罩功能實現微信小程式遮罩
- Android 多媒體之 Silk 格式音訊解碼Android音訊
- 鴻蒙ArkWeb 元件多媒體探究：從影片到音訊鴻蒙Web元件音訊
- 語音翻譯軟體怎麼用？怎麼實現語音的翻譯
- 語音喚醒實現
- [- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言S3特效
- 簡單介紹recorder.js 基於Html5錄音功能的實現JSHTML
- 機器配音微信小程式原始碼 多種語音任微信小程式原始碼
- Insights直播回顧 | 多媒體管線服務助您快速實現音影片業務創新
- vue實現錄音功能（pc端）Vue
- TouchEvent實現前端錄音打分功能前端
- 利用ATL實現QuickTime多媒體檔案播放 (轉)UI