隨著微信等社交App的興起，語(yǔ)音聊天成為很多App必備功能，大到將語(yǔ)音聊天作為主要功能的社交App，小到電商App的語(yǔ)音客服、店小二功能，語(yǔ)音聊天成為了必不可少的方式。
但是很多人感覺(jué)網(wǎng)頁(yè)端語(yǔ)音離我們很遙遠(yuǎn)，這些更多是本地應(yīng)用的工作，其實(shí)不然，隨著Html5的發(fā)展，語(yǔ)音功能也漸漸成為前端必會(huì)的功能之一。
為什么要學(xué)會(huì)HTML5 的語(yǔ)音呢？
1.Html5 規(guī)范推進(jìn)，手機(jī)的更新加速了操作系統(tǒng)更新，語(yǔ)音功能將會(huì)變成前端主要的工作之一，就像現(xiàn)在的canvas一樣。前端實(shí)現(xiàn)語(yǔ)音功能開(kāi)發(fā)速度更快，更節(jié)省人力（這意味著給老板省錢(qián)，給老板省錢(qián)就是在給自己漲工資）
2.即使是現(xiàn)在本地應(yīng)用做語(yǔ)音功能，熟悉前端語(yǔ)音交互的各種坑能夠讓你們的同事關(guān)系更和諧，協(xié)作更順暢，而不是互相掐架。
3.了解新的技術(shù)可以預(yù)防面試，二來(lái)可以預(yù)判技術(shù)潮流，不至于學(xué)了一堆屠龍之技或者墨守成規(guī)，更有利于讓自己的知識(shí)和職業(yè)核心競(jìng)爭(zhēng)力一直處在食物鏈的頂端。
4.前端大部分人對(duì)語(yǔ)音功能有誤解，以為語(yǔ)音功能就是HTML5 audio標(biāo)簽而已，事實(shí)上真的不是那么簡(jiǎn)單的"而已"
不墨跡那么多，咱們直接開(kāi)發(fā)一個(gè)小項(xiàng)目啥都明明白兒白兒了，先看效果圖
clipboard.png
業(yè)務(wù)邏輯非常簡(jiǎn)單，
跟我們微信用法一模一樣，手按下去字變成松開(kāi)結(jié)束，同時(shí)說(shuō)話(huà)被錄下來(lái)，松手的時(shí)候，變成按下結(jié)束，同時(shí)發(fā)送語(yǔ)音給對(duì)方
我們一步一步一步來(lái)，首先我們先整一個(gè)html頁(yè)面
<!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>微信語(yǔ)音</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">艾達(dá)·王</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">我是不是你最疼愛(ài)的人? <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">這里我就不多說(shuō)了，上來(lái)就是一梭子代碼…… <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">大彬哥，你說(shuō)你咋這么優(yōu)秀呢？看見(jiàn)你我有一種大海的感覺(jué) <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">不是，我暈船，看見(jiàn)你想吐…… <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">按下 說(shuō)話(huà)</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;}這里我說(shuō)兩個(gè)注意點(diǎn)，
1.html部分：
圖省事我并沒(méi)有像素級(jí)切圖，圖省事我也直接用了svg圖標(biāo)，具體庫(kù)我使用的是
https://material.io/tools/icons/?style=outline
2.css部分：使用flex布局。我只是為了講解Html5功能，所以flex并沒(méi)有寫(xiě)兼容性寫(xiě)法，另外App頭部部分寫(xiě)法大家注意一下，那里是非常常用的。
下面說(shuō)重點(diǎn)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>微信語(yǔ)音</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 = '松開(kāi) 結(jié)束'; this.classList.add('activeBtn'); mediaRecorder.start(); }, false); oSendBtn.addEventListener('touchend', function (ev) { ev.preventDefault(); this.innerHTML = '按下 說(shuō)話(huà)'; 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.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">艾達(dá)·王</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">我是不是你最疼愛(ài)的人? <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">這里我就不多說(shuō)了，上來(lái)就是一梭子代碼…… <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">大彬哥，你說(shuō)你咋這么優(yōu)秀呢？看見(jiàn)你我有一種大海的感覺(jué) <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">不是，我暈船，看見(jiàn)你想吐…… <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">按下 說(shuō)話(huà)</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>這里實(shí)現(xiàn)的錄影功能要注意的點(diǎn)很多，我們一個(gè)個(gè)說(shuō)，
第一個(gè)東西，
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 { }
當(dāng)大家看一些html5關(guān)于錄音的接口的時(shí)候，你看到這個(gè)
Navigator.getUserMedia()
就要小心了，這個(gè)是老規(guī)范的東西了，被廢了，新的是
navigator.mediaDevices.getUserMedia
html5 多媒體里面的語(yǔ)音這塊換了好幾茬規(guī)范，很亂，有些標(biāo)簽甚至一個(gè)瀏覽器都沒(méi)實(shí)現(xiàn)過(guò)，未曾綻放就枯萎了，你也不用關(guān)心也沒(méi)必要浪費(fèi)那個(gè)時(shí)間知道，你只要知道我說(shuō)這些就夠了，因?yàn)槟阒滥切┍粡U掉的過(guò)往沒(méi)啥用，有那個(gè)時(shí)間還不如來(lái)一局LOL或者王者榮耀（雖然我并不懂二者的區(qū)別，不過(guò)這兩個(gè)游戲應(yīng)該都挺好玩吧，沒(méi)玩過(guò)不懂）。
里面的東西大家也不需要看懂，什么promise了，什么媒體流了，你不用知道，你就知道這樣一件事就行了，
上面的代碼就相當(dāng)于打開(kāi)了水龍頭（或者說(shuō)按下的錄音機(jī)的錄音鍵），那么我們得有東西接著水啊，我們可以用電飯鍋（錄音機(jī)的話(huà)就是磁帶）放水龍頭下面看著它往里面ci（我們老家話(huà)，射的意思），如下代碼
mediaRecorder = new MediaRecorder(stream);
接下來(lái)就是，一按按鈕就生米煮成熟飯了，對(duì)應(yīng)錄音機(jī)就是錄完了按按鈕就播放了，但是在我們程序里面要想播放你不僅要有磁帶，還得有錄音機(jī)，錄音機(jī)就是audio標(biāo)簽，沒(méi)有好辦，我們new一個(gè)。這個(gè)世界上沒(méi)有什么對(duì)象是程序員不敢new的，new一個(gè)不行，就new兩個(gè)。剩下的代碼除了嚇人之外，沒(méi)啥缺點(diǎn)，簡(jiǎn)單的令人發(fā)指。
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.addEventListener('touchstart', function (ev) { if (ev.srcElement.parentNode.className!== 'item_audio') return; audio.play(); ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode.children[0]) }, false); };
其實(shí)就是錄好了就播。
OK，是不是很簡(jiǎn)單 ，整個(gè)項(xiàng)目我說(shuō)幾個(gè)點(diǎn)吧：
1.切圖結(jié)構(gòu)合理是你后面做功能的前提，結(jié)構(gòu)做的好，后面就省事，想想諸葛不亮吧，未出茅廬人家就把html5結(jié)構(gòu)搭好了，有三個(gè)section.
2.原生js和ES6的基礎(chǔ)打牢可以為你提供不同的思路，比如我這里就使用了事件委托，還有ES6模板引擎。尤其是事件委托，不用的話(huà)查找節(jié)點(diǎn)很麻煩，另外代碼套來(lái)套去也容易亂。
3.新的 知識(shí)和技術(shù)其實(shí)并不復(fù)雜，其實(shí)很簡(jiǎn)單，你想如果新技術(shù)不是為了讓功能更好實(shí)現(xiàn)，更能解決我們的問(wèn)題，那開(kāi)發(fā)新技術(shù)干嘛？因?yàn)槟菐痛蠛拥拇笈儧](méi)事干怕被領(lǐng)導(dǎo)說(shuō)工作量不飽和？技術(shù)是為了解決問(wèn)題和讓我們生活更美好服務(wù)的。
4.這個(gè)項(xiàng)目IOS 11以下跑不通，因?yàn)镮OS 11.2之前不支持這個(gè)方法，需要IOS本地應(yīng)用開(kāi)發(fā)人員給你提供支援，但是在android下面是很OK的。而且可以預(yù)見(jiàn)，再過(guò)幾年IOS 原生也不用給你支援都支持了，那你開(kāi)發(fā)效率得多高。不要以為這些技術(shù)很遙遠(yuǎn)，html5真正商用也不過(guò)15年左右（vue 、react、angular大規(guī)模使用才幾年？），機(jī)會(huì)留給有準(zhǔn)備的人。
整個(gè)項(xiàng)目細(xì)節(jié)和要注意的點(diǎn)還是很多的，希望大家真正自己敲一遍，因?yàn)槟憧炊宋业奈恼赂銜?huì)用這個(gè)技術(shù)兩碼事，祝大家在前端的路上越走越遠(yuǎn)（記得常回來(lái)看看^_^）。
總結(jié)
以上所述是小編給大家介紹的使用Html5多媒體實(shí)現(xiàn)微信語(yǔ)音功能,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
新聞熱點(diǎn)
疑難解答
