应用Html5多新闻媒体完成手机微信视频语音作用

日期:2020-10-10 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

伴随着手机微信等社交媒体App的盛行,视频语音闲聊变成许多App必备作用,大到将视频语音闲聊做为关键作用的社交媒体App,小到电子商务App的视频语音客服、店小2作用,视频语音闲聊变成了必不能少的方法。

可是许多人觉得网页页面端视频语音离大家很漫长,这些更多是当地运用的工作中,实际上要不然,伴随着Html5的发展趋势,视频语音作用也逐渐变成前端开发必会的作用之1。

为何要学会HTML5 的视频语音呢?

1.Html5 标准推动,手机上的升级加快了实际操作系统软件升级,视频语音作用可能变为前端开发关键的工作中之1,就像如今的canvas1样。前端开发完成视频语音作用开发设计速率更快,更节约人力资源(这代表着给老板省钱,给老板省钱便是在给自身涨薪水)

2.即便是如今当地运用做视频语音作用,熟习前端开发视频语音互动的各种各样坑可以让你们的朋友关联更和睦,合作更畅顺,而并不是相互之间掐架。

3.掌握新的技术性能够防止招聘面试,2来能够预判技术性潮流,不至于学了1堆屠龙之技或墨守陈规,更有益于让自身的专业知识和岗位关键市场竞争力1直处在食材链的顶端。

4.前端开发绝大多数人对视频语音作用有误会,认为视频语音作用便是HTML5 audio标识罢了,客观事实上真的并不是那末简易的"罢了"

不墨迹那末多,我们立即开发设计1个小新项目啥都明搞清楚儿白儿了,先看实际效果图

clipboard.png

业务流程逻辑性十分简易,

跟大家手机微信用法1模1样,手按下去字变为松开完毕,另外讲话被录下来,松手的情况下,变为按下完毕,另外推送视频语音给对方

大家1步1步1步来,最先大家先整1个html网页页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <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">这里我就很少说了,上来便是1梭子编码……
                        <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">大彬哥,你说你咋这么出色呢?看见你我有1种海洋的觉得
                        <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⑻ */
    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:⑴7px; 
    top:10px;
}
.item_me .chatContent span.top{
    border-width:8px; 
    border-style:solid dashed dashed; 
    border-color:transparent transparent transparent #a0e75a ;  
    right:⑴5px; 
    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:⑴7px; 
    top:10px;
}
.item_you .chatContent span.top{
    border-width:8px; 
    border-style:solid dashed dashed; 
    border-color:transparent #a0e75a transparent transparent  ;  
    left:⑴5px; 
    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:⑴7px; 
    top:10px;
}
.item_audio .chatContent span.top{
    border-width:8px; 
    border-style:solid dashed dashed; 
    border-color:transparent transparent transparent #fff ;  
    right:⑴5px; 
    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头顶部一部分写法大伙儿留意1下,那里是是非非经常用的。

下面说关键js一部分。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <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">这里我就很少说了,上来便是1梭子编码……
                        <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">大彬哥,你说你咋这么出色呢?看见你我有1种海洋的觉得
                        <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>

这里完成的录影作用要留意的点许多,大家1个个说,

第1个物品,

 

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

 

当大伙儿看1些html5有关音频的插口的情况下,你看到这个

Navigator.getUserMedia()

就要当心了,这个是老标准的物品了,被废了,新的是

navigator.mediaDevices.getUserMedia

html5 多新闻媒体里边的视频语音这块换了好几茬标准,很乱,一些标识乃至1个访问器都没完成过,未曾绽开就凋谢了,你也无需关注也没必要消耗那个時间了解,你要是了解我说这些就够了,由于你了解那些被废掉的往日没啥用,有那个時间还比不上来1局LOL或王者荣誉(尽管我其实不懂2者的差别,但是这两个手机游戏应当都挺好玩吧,没玩过不懂)。

里边的物品大伙儿也不必须看懂,甚么promise了,甚么新闻媒体流了,你无需了解,你就了解这样1件事就可以了,

上面的编码就非常于开启了水龙头(或说按下的音频机的音频键),那末大家得有物品接着水啊,大家能够用电饭锅(音频机的话便是磁带)放水龙头下面看着它往里边ci(大家老家话,射的意思),以下编码

mediaRecorder = new MediaRecorder(stream);

接下来便是,1按按钮就生米煮完善饭了,对应音频机便是录完了按按钮就播发了,可是在大家程序流程里边要想播发你不但要有磁带,还得有音频机,音频机便是audio标识,沒有好办,大家new1个。这个全球上沒有甚么目标是程序流程员害怕new的,new1个不好,就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构造搭好了,有3个section.

2.原生态js和ES6的基本打牢能够为你出示不一样的思路,例如我这里就应用了恶性事件授权委托,也有ES6模版模块。特别是恶性事件授权委托,无需的话搜索连接点很不便,此外编码套来套去也非常容易乱。

3.新的 专业知识和技术性实际上其实不繁杂,实际上很简易,你想假如新技术应用并不是以便让作用更好完成,更能处理大家的难题,那开发设计新技术应用干吗?由于那帮大胡须的大牛们没事干怕被领导说工作中量不饱和状态?技术性是以便处理难题和让大家日常生活更幸福服务的。

4.这个新项目IOS 11下列跑堵塞,由于IOS 11.2以前不适用这个方式,必须IOS当地运用开发设计人员给你出示援助,可是在android下面是很OK的。并且能够预料,再过几年IOS 原生态也无需给你援助都适用了,那你开发设计高效率很多高。不必认为这些技术性很漫长,html5真实商用也但是15年上下(vue 、react、angular大经营规模应用才几年?),机遇留给有提前准备的人。

全部新项目细节和要留意的点還是许多的,期待大伙儿真实自身敲1遍,由于你看懂了我的文章内容跟你会用这个技术性两回事,祝大伙儿在前端开发的路上越走越远(记得常回家看看^_^)。

总结

以上所述是网编给大伙儿详细介绍的应用Html5多新闻媒体完成手机微信视频语音作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!