富贵资源网

使用Html5多媒体实现微信语音功能
站长资源 2024/12/30 佚名
8 1538
富贵资源网 Design By www.hznty.com

使用Html5多媒体实现微信语音功能

随着微信等社交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" 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了，什么媒体流了，你不用知道，你就知道这样一件事就行了，

上面的代码就相当于打开了水龙头（或者说按下的录音机的录音键），那么我们得有东西接着水啊，我们可以用电饭锅（录音机的话就是磁带）放水龙头下面看着它往里面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.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大规模使用才几年？），机会留给有准备的人。

整个项目细节和要注意的点还是很多的，希望大家真正自己敲一遍，因为你看懂了我的文章跟你会用这个技术两码事，祝大家在前端的路上越走越远（记得常回来看看^_^）。

总结

以上所述是小编给大家介绍的使用Html5多媒体实现微信语音功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
www.hznty.com 富贵资源网
20,135影音资源
44,641技术资源
2,817软件资源
435,032站长资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
富贵资源网 Design By www.hznty.com