隨著微信等社交App的興起，語音聊天成為許多App必備功能，大到將語音聊天作為主要功能的社交App，小到電商App的語音客服、店小二功能，語音聊天成為了必不可少的方式。
但很多人覺得網頁端語音離我們很遙遠，這些比較是本地應用的工作，其實不然，隨著Html5的發展，語音功能也漸漸成為前端必會的功能之一。
為什麼要學會HTML5 的語音呢？1.Html5 規範推進，手機的更新加速了作業系統更新，語音功能將會變成前端主要的工作之一，就像現在的canvas一樣。前端實現語音功能開發速度更快，更節省人力（這意味著給老闆省錢，給老闆省錢就是在給自己加薪）
2.即使是現在本地應用做語音功能，熟悉前端語音互動的各種坑能夠讓你們的同事關係更和諧，協作更順暢，而不是互相掐架。
3.了解新的技術可以預防面試，二來可以預判技術潮流，不至於學了一堆屠龍之技或墨守成規，更有利於讓自己的知識和職業核心競爭力一直處在食物鏈的頂端。
4.前端大部分人對語音功能有誤解，以為語音功能就是HTML5 audio標籤而已，事實上真的不是那麼簡單的而已
不墨跡那麼多，咱們直接開發一個小專案啥都明明白兒白兒了，先看效果圖
clipboard.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 </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </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 </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </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 </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </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: letter-spacing: normal; word-wrap: normal; white-space: nowrapite-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 */ -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: #363539; display: flex; align-items:; #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； 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 transparente ; 15px; top:10px;} .item_you .chatContent{ padding: 10px; background: #a0e75a; border: 1px solid #6fb44d; margin-left: 15px; border-radius: 5px; position: relative; 8px; border-style:solid dashed dashed; border-color: transparent #6fb44d transparent transparent ; left:-17px; top:10px;}.item_you .chatContent span.top{ border-width:8px;}.item_you .chatContent span.top{ border-width:8px; border-color:transparent #a0e75a transparent transparent ; left:-15px; top:10px;} #footer{ height: 46px; padding: 0 4px; background: #f4f5f6; border-top: 1px solid #d7d7d8; playsplay: flex 筆; #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:flexpx; #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 .chatContorderan. :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-orderstyle:solid dashed dashed; b-color:width:8px; border-orderstyle:solid dashed dashed； transparent #fff ; right:-15px; top:10px;} .material-icons_wifi{ transform: rotate(90deg); color: #a5a5a5; font-size: 22px;}.redDot{ background: #f45454; border-radius: 50%; width: background: #f45454; border-radius: 50%; width: 88px; 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'); getElementById('chatList'); navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); if (navigator.mediaDevices && navigator. 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 </div>`; audio.setAttribute('controls', ''); oChatList.appendChild(clipContainer); var audioURL = window.URL.createObjectURL(e.data); audio.src = audioURL; oChatList.addEventListenerener('touchev', function ('unction ) { 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 </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </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 </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </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 </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </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。 // 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。 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 </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. == '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大規模使用才幾年？），機會留給有準備的人。
整個專案細節和要注意的點還是很多的，希望大家真正自己敲一遍，因為你看懂了我的文章跟你會用這個技術兩碼事，祝大家在前端的路上越走越遠（記得常回來看看^_^）。
總結以上所述是小編給大家介紹的使用Html5多媒體實現微信語音功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！