使用Html5多媒體實現微信語音功能

原創 麪包理想 2018-12-09 13:04

隨着微信等社交App的興起，語音聊天成爲很多App必備功能，大到將語音聊天作爲主要功能的社交App，小到電商App的語音客服、店小二功能，語音聊天成爲了必不可少的方式。

但是很多人感覺網頁端語音離我們很遙遠，這些更多是本地應用的工作，其實不然，隨着Html5的發展，語音功能也漸漸成爲前端必會的功能之一。

爲什麼要學會HTML5 的語音呢？

1.Html5 規範推進，手機的更新加速了操作系統更新，語音功能將會變成前端主要的工作之一，就像現在的canvas一樣。前端實現語音功能開發速度更快，更節省人力（這意味着給老闆省錢，給老闆省錢就是在給自己漲工資）

2.即使是現在本地應用做語音功能，熟悉前端語音交互的各種坑能夠讓你們的同事關係更和諧，協作更順暢，而不是互相掐架。

3.瞭解新的技術可以一方面，防止自己被面試官問倒，二來可以預判技術潮流，不至於學了一堆屠龍之技或者墨守成規，更有利於讓自己的知識和職業核心競爭力一直處在食物鏈的頂端。

4.前端大部分人對語音功能有誤解，以爲語音功能就是HTML5 audio標籤而已，事實上真的不是那麼簡單的"而已"

不墨跡那麼多，咱們直接開發一個小項目啥都明明白兒白兒了，先看效果圖

使用Html5多媒體實現微信語音功能

業務邏輯非常簡單，

跟我們微信用法一模一樣，手按下去字變成鬆開結束，同時說話被錄下來，鬆手的時候，變成按下結束，同時發送語音給對方

我們一步一步一步來，首先我們先整一個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了，什麼媒體流了，你不用知道，你就知道這樣一件事就行了，

上面的代碼就相當於打開了水龍頭（或者說按下的錄音機的錄音鍵），那麼我們得有東西接着水啊，我們可以用電飯鍋（錄音機的話就是磁帶）放水龍頭下面看着它往裏面射，如下代碼

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大規模使用才幾年？），機會留給有準備的人。

整個項目細節和要注意的點還是很多的，希望大家真正自己敲一遍，因爲你看懂了我的文章跟你會用這個技術兩碼事，祝大家在前端的路上越走越遠（記得常回來看看^_^）。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

JS module的導出和導入

KevinYan 2019-02-24 21:34:55

編寫自適應高度的 textarea

CarterLi 2019-02-25 00:14:46

搞搞, 超星爾雅；

sewerganger 2019-02-24 22:44:54

sql語法、關係建模

死瘦宅 2019-02-24 22:35:22

MySQL 事務、函數、觸發器、數據庫備份、權限管理

死瘦宅 2019-02-24 22:35:12

跨域的四種方式

上帝遺忘之子 2019-02-24 19:14:58

告別webpack react 搭建多頁面之痛

滕偉 2019-02-24 15:44:50

微信隱藏下導航欄

前端box 2019-02-23 14:33:28

前端全链路性能优化实战

wy53780 2020-04-23 14:01:33

抓紧面试前的宝贵时间 快速搞定前端JavaScript面试

wy53780 2020-04-23 13:56:33

《劍指offer》分解讓複雜問題更簡單

ConardLi 2019-02-24 22:55:07

前端分頁二

滔滔逐浪 2019-02-24 13:41:43

js搜索關鍵字(Ctrl + F)

WEBING 2019-02-23 18:05:07

由實際問題探究setState的執行機制

ConardLi 2019-02-23 16:54:40

淘寶放大鏡的兩種實現方法JS

李大雷 2019-02-23 16:45:00