当前位置:Web前端 > > 正文

微信html隐藏功能(使用Html5多媒体实现微信语音功能)

时间:2021-10-03 01:16:47类别:Web前端

微信html隐藏功能

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

微信html隐藏功能(使用Html5多媒体实现微信语音功能)

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

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

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

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

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

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

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

不墨迹那么多,咱们直接开发一个小项目啥都明明白儿白儿了,先看效果图

clipboard.jpg" alt="微信html隐藏功能(使用Html5多媒体实现微信语音功能)" border="0" />

业务逻辑非常简单,

跟我们微信用法一模一样,手按下去字变成松开结束,同时说话被录下来,松手的时候,变成按下结束,同时发送语音给对方

我们一步一步一步来,首先我们先整一个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>
        <li id="wrap">
            <header id="header">
                <li id="left">
                    <i class="material-icons">
                        chevron_left
                    </i>
                    微信(184)
                </li>
                <li id="mid">艾达·王</li>
                <li id="right">
                    <i class="material-icons">
                        more_horiz
                    </i>
                </li>
            </header>
            <li id="contentWrap">
                <ul id="chatList">
                    <li class="item_me">
                        <li class="chatContent">我是不是你最疼爱的人?
                            <span class="bot"></span>
                            <span class="top"></span>
                        </li>
                        <li class="avatar">
                            <img src="images/ava1.jpg" alt="微信html隐藏功能(使用Html5多媒体实现微信语音功能)" border="0" />
    
  • 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 = `
                        <li class = "redDot"></li>
                        <li class="chatContent">
                            <i class="material-icons material-icons_wifi">wifi</i>
                            <span class="bot"></span>
                            <span class="top"></span>
                        </li>
                        <li class="avatar">
                            <img src="images/ava1.jpg" alt="微信html隐藏功能(使用Html5多媒体实现微信语音功能)" border="0" />
    
  • 这里实现的录影功能要注意的点很多,我们一个个说,

    第一个东西,

  • 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 = `
                        <li class = "redDot"></li>
                        <li class="chatContent">
                            <i class="material-icons material-icons_wifi">wifi</i>
                            <span class="bot"></span>
                            <span class="top"></span>
                        </li>
                        <li class="avatar">
                            <img src="images/ava1.jpg" alt="微信html隐藏功能(使用Html5多媒体实现微信语音功能)" border="0" />
    
  • 其实就是录好了就播。

    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多媒体实现微信语音功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    上一篇下一篇

    猜您喜欢

    热门推荐