导航：首页 > 开发技术 >

Html5怎么实现微信语音功能

发表于：2024-11-20 作者：千家信息网编辑

千家信息网最后更新 2024年11月20日，本篇内容介绍了"Html5怎么实现微信语音功能"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！随着微信

千家信息网最后更新 2024年11月20日Html5怎么实现微信语音功能

本篇内容介绍了"Html5怎么实现微信语音功能"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

随着微信等社交App的兴起，语音聊天成为很多App必备功能，大到将语音聊天作为主要功能的社交App，小到电商App的语音客服、店小二功能，语音聊天成为了必不可少的方式。

但是很多人感觉网页端语音离我们很遥远，这些更多是本地应用的工作，其实不然，随着Html5的发展，语音功能也渐渐成为前端必会的功能之一。

为什么要学会HTML5 的语音呢？

1.Html5 规范推进，手机的更新加速了操作系统更新，语音功能将会变成前端主要的工作之一，就像现在的canvas一样。前端实现语音功能开发速度更快，更节省人力（这意味着给老板省钱，给老板省钱就是在给自己涨工资）

2.即使是现在本地应用做语音功能，熟悉前端语音交互的各种坑能够让你们的同事关系更和谐，协作更顺畅，而不是互相掐架。

3.了解新的技术可以预防面试，二来可以预判技术潮流，不至于学了一堆屠龙之技或者墨守成规，更有利于让自己的知识和职业核心竞争力一直处在食物链的顶端。

4.前端大部分人对语音功能有误解，以为语音功能就是HTML5 audio标签而已，事实上真的不是那么简单的"而已"

首先我们先整一个html页面：

                微信语音                                                                chevron_left                                微信(184)            
            艾达·王
                                                more_horiz                            
        
                                                        我是不是你最疼爱的人?                                                                    
                                                                
                
                                                                                
                    奔跑吧，兄弟！（滚犊子）                                                                    
                
                                    这里我就不多说了，上来就是一梭子代码……                                                                    
                                                                
                
                                                                                
                    大彬哥，你说你咋这么优秀呢？看见你我有一种大海的感觉                                                                    
                
                                    老妹儿，你是不是喜欢上我了呢……                                                                    
                                                                
                
                                                                                
                    不是，我晕船，看见你想吐……                                                                    
                
            
        
                                                        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;}

这里我说两个注意点，

1.html部分：

图省事我并没有像素级切图，图省事我也直接用了svg图标，具体库我使用的是

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

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

下面说重点js部分。

                微信语音                                                                    chevron_left                                微信(184)            
            艾达·王
                                                more_horiz                            
        
                                                        我是不是你最疼爱的人?                                                                    
                                                                
                
                                                                                
                    奔跑吧，兄弟！（滚犊子）                                                                    
                
                                    这里我就不多说了，上来就是一梭子代码……                                                                    
                                                                
                
                                                                                
                    大彬哥，你说你咋这么优秀呢？看见你我有一种大海的感觉                                                                    
                
                                    老妹儿，你是不是喜欢上我了呢……                                                                    
                                                                
                
                                                                                
                    不是，我晕船，看见你想吐……                                                                    
                
            
        
                                                        keyboard                            
                            按下 说话            
                                sentiment_satisfied                
                                add_circle_outline

这里实现的录影功能要注意的点很多，我们一个个说，

第一个东西，

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[xss_clean] = `                    
                                            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[xss_clean].className!== 'item_audio') return;                        audio.play();                        ev.srcElement[xss_clean].removeChild(ev.srcElement[xss_clean].children[0])                    }, false);                };

"Html5怎么实现微信语音功能"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！

很赞哦！