使用Html5多媒體實(shí)現(xiàn)微信語音功能

Render 發(fā)布于2019-08-23 13:57 / 3185人閱讀

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

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

但是很多人感覺網(wǎng)頁端語音離我們很遙遠(yuǎn)，這些更多是本地應(yīng)用的工作，其實(shí)不然，隨著Html5的發(fā)展，語音功能也漸漸成為前端必會(huì)的功能之一。

為什么要學(xué)會(huì)HTML5 的語音呢？

1.Html5 規(guī)范推進(jìn)，手機(jī)的更新加速了操作系統(tǒng)更新，語音功能將會(huì)變成前端主要的工作之一，就像現(xiàn)在的canvas一樣。前端實(shí)現(xiàn)語音功能開發(fā)速度更快，更節(jié)省人力（這意味著給老板省錢，給老板省錢就是在給自己漲工資）

2.即使是現(xiàn)在本地應(yīng)用做語音功能，熟悉前端語音交互的各種坑能夠讓你們的同事關(guān)系更和諧，協(xié)作更順暢，而不是互相掐架。

3.了解新的技術(shù)可以預(yù)防面試，二來可以預(yù)判技術(shù)潮流，不至于學(xué)了一堆屠龍之技或者墨守成規(guī)，更有利于讓自己的知識(shí)和職業(yè)核心競爭力一直處在食物鏈的頂端。

4.前端大部分人對(duì)語音功能有誤解，以為語音功能就是HTML5 audio標(biāo)簽而已，事實(shí)上真的不是那么簡單的"而已"

不墨跡那么多，咱們直接開發(fā)一個(gè)小項(xiàng)目啥都明明白兒白兒了，先看效果圖

業(yè)務(wù)邏輯非常簡單，

跟我們微信用法一模一樣，手按下去字變成松開結(jié)束，同時(shí)說話被錄下來，松手的時(shí)候，變成按下結(jié)束，同時(shí)發(fā)送語音給對(duì)方

我們一步一步一步來，首先我們先整一個(gè)html頁面




    
    
    
    微信語音
    


    
        
            
                
                    chevron_left
                
                微信(184)
            
            艾達(dá)·王
            
                
                    more_horiz
                
            
        
        
            
                
                    我是不是你最疼愛的人?
                        
                        
                    
                    
                        
                    
                
                
                    
                        
                    
                    奔跑吧，兄弟?。L犢子）
                        
                        
                    

                
                
                    這里我就不多說了，上來就是一梭子代碼……
                        
                        
                    
                    
                        
                    
                
                
                    
                        
                    
                    大彬哥，你說你咋這么優(yōu)秀呢？看見你我有一種大海的感覺
                        
                        
                    

                
                
                    老妹兒，你是不是喜歡上我了呢……
                        
                        
                    
                    
                        
                    
                
                
                    
                        
                    
                    不是，我暈船，看見你想吐……
                        
                        
                    

                
            
        
        
            
                
                    keyboard
                
            
            
                按下 說話
            
            
                    sentiment_satisfied
                
            
                    add_circle_outline

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;
}

這里我說兩個(gè)注意點(diǎn)，

1.html部分：

圖省事我并沒有像素級(jí)切圖，圖省事我也直接用了svg圖標(biāo)，具體庫我使用的是

https://material.io/tools/icons/?style=outline

2.css部分：使用flex布局。我只是為了講解Html5功能，所以flex并沒有寫兼容性寫法，另外App頭部部分寫法大家注意一下，那里是非常常用的。

下面說重點(diǎn)js部分。




    
    
    
    微信語音
    
    



    
        
            
                
                    chevron_left
                
                微信(184)
            
            艾達(dá)·王
            
                
                    more_horiz
                
            
        
        
            
                
                    我是不是你最疼愛的人?
                        
                        
                    
                    
                        
                    
                
                
                    
                        
                    
                    奔跑吧，兄弟?。L犢子）
                        
                        
                    

                
                
                    這里我就不多說了，上來就是一梭子代碼……
                        
                        
                    
                    
                        
                    
                
                
                    
                        
                    
                    大彬哥，你說你咋這么優(yōu)秀呢？看見你我有一種大海的感覺
                        
                        
                    

                
                
                    老妹兒，你是不是喜歡上我了呢……
                        
                        
                    
                    
                        
                    
                
                
                    
                        
                    
                    不是，我暈船，看見你想吐……
                        
                        
                    

                
            
        
        
            
                
                    keyboard
                
            
            
                按下 說話
            
            
                    sentiment_satisfied
                
            
                    add_circle_outline

這里實(shí)現(xiàn)的錄影功能要注意的點(diǎn)很多，我們一個(gè)個(gè)說，

第一個(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 多媒體里面的語音這塊換了好幾茬規(guī)范，很亂，有些標(biāo)簽甚至一個(gè)瀏覽器都沒實(shí)現(xiàn)過，未曾綻放就枯萎了，你也不用關(guān)心也沒必要浪費(fèi)那個(gè)時(shí)間知道，你只要知道我說這些就夠了，因?yàn)槟阒滥切┍粡U掉的過往沒啥用，有那個(gè)時(shí)間還不如來一局LOL或者王者榮耀（雖然我并不懂二者的區(qū)別，不過這兩個(gè)游戲應(yīng)該都挺好玩吧，沒玩過不懂）。

里面的東西大家也不需要看懂，什么promise了，什么媒體流了，你不用知道，你就知道這樣一件事就行了，

上面的代碼就相當(dāng)于打開了水龍頭（或者說按下的錄音機(jī)的錄音鍵），那么我們得有東西接著水啊，我們可以用電飯鍋（錄音機(jī)的話就是磁帶）放水龍頭下面看著它往里面ci（我們老家話，射的意思），如下代碼

mediaRecorder = new MediaRecorder(stream);

接下來就是，一按按鈕就生米煮成熟飯了，對(duì)應(yīng)錄音機(jī)就是錄完了按按鈕就播放了，但是在我們程序里面要想播放你不僅要有磁帶，還得有錄音機(jī)，錄音機(jī)就是audio標(biāo)簽，沒有好辦，我們new一個(gè)。這個(gè)世界上沒有什么對(duì)象是程序員不敢new的，new一個(gè)不行，就new兩個(gè)。剩下的代碼除了嚇人之外，沒啥缺點(diǎn)，簡單的令人發(fā)指。

mediaRecorder.ondataavailable = function (e) {
                    var clipContainer = document.createElement("li");
                    var audio = document.createElement("audio");
                    clipContainer.classList.add("item_audio");
                    clipContainer.innerHTML = `
                    
                    
                        wifi
                        
                        
                    
                    
                        
                    `;
                    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，是不是很簡單，整個(gè)項(xiàng)目我說幾個(gè)點(diǎn)吧：

1.切圖結(jié)構(gòu)合理是你后面做功能的前提，結(jié)構(gòu)做的好，后面就省事，想想諸葛不亮吧，未出茅廬人家就把html5結(jié)構(gòu)搭好了，有三個(gè)section.

2.原生js和ES6的基礎(chǔ)打牢可以為你提供不同的思路，比如我這里就使用了事件委托，還有ES6模板引擎。尤其是事件委托，不用的話查找節(jié)點(diǎn)很麻煩，另外代碼套來套去也容易亂。

3.新的知識(shí)和技術(shù)其實(shí)并不復(fù)雜，其實(shí)很簡單，你想如果新技術(shù)不是為了讓功能更好實(shí)現(xiàn)，更能解決我們的問題，那開發(fā)新技術(shù)干嘛？因?yàn)槟菐痛蠛拥拇笈儧]事干怕被領(lǐng)導(dǎo)說工作量不飽和？技術(shù)是為了解決問題和讓我們生活更美好服務(wù)的。

4.這個(gè)項(xiàng)目IOS 11以下跑不通，因?yàn)镮OS 11.2之前不支持這個(gè)方法，需要IOS本地應(yīng)用開發(fā)人員給你提供支援，但是在android下面是很OK的。而且可以預(yù)見，再過幾年IOS 原生也不用給你支援都支持了，那你開發(fā)效率得多高。不要以為這些技術(shù)很遙遠(yuǎn)，html5真正商用也不過15年左右（vue 、react、angular大規(guī)模使用才幾年？），機(jī)會(huì)留給有準(zhǔn)備的人。

整個(gè)項(xiàng)目細(xì)節(jié)和要注意的點(diǎn)還是很多的，希望大家真正自己敲一遍，因?yàn)槟憧炊宋业奈恼赂銜?huì)用這個(gè)技術(shù)兩碼事，祝大家在前端的路上越走越遠(yuǎn)（記得常回來看看^_^）。

GPU云服務(wù)器云服務(wù)器微信語音聊天功能微信主動(dòng)實(shí)現(xiàn)群發(fā)功能 html5多媒體教程手機(jī)語音識(shí)別功能

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99827.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Render

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

力扣周結(jié)03

閱讀 1118·2021-11-23 09:51
CloudCone：黑色星期五預(yù)售促銷，洛杉磯MC機(jī)房大硬盤KVM VPS年付$14.2起

閱讀 1081·2021-10-18 13:31
認(rèn)證常用主機(jī)什么意思-ps4怎么認(rèn)證為常用主機(jī)？

閱讀 2991·2021-09-22 16:06
微軟全新Windows Server 2022正式發(fā)布，附鏡像免費(fèi)下載地址

閱讀 4284·2021-09-10 11:19
10.24開發(fā)者狂歡節(jié)，這里有一波福（現(xiàn)）利（金）送（紅）你（包）

閱讀 2206·2019-08-29 17:04
$q 實(shí)例分析 Angular 中的 Promise

閱讀 437·2019-08-29 10:55
UCloud管理外網(wǎng)彈性IP

閱讀 2485·2019-08-26 16:37
一篇文章讓你學(xué)會(huì)如何選擇 JS HTTP 請(qǐng)求庫

閱讀 3381·2019-08-26 13:29

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

使用Html5多媒體實(shí)現(xiàn)微信語音功能

相關(guān)文章