您现在的位置是：网站首页> 编程资料编程资料

使用Html5多媒体实现微信语音功能HTML5实时语音通话聊天MP3压缩传输3KB每秒鲜为人知的HTML5语音合成功能基于Html5实现的语音搜索功能HTML5为输入框添加语音输入功能的实现方法Jquery+html5可设置闹钟并且会语音提醒的时钟特效源码用html5实现语音搜索框的方法HTML5语音识别标签写法附图html5的新玩法——语音搜索HTML5 语音搜索只需一句代码HTML5 语音搜索(淘宝店语音搜素)

2023-10-12 318人已围观

简介 这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下

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

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

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

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

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

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

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

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

clipboard.png

业务逻辑非常简单，

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

我们一步一步一步来，首先我们先整一个html页面

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

 

微信语音

        

            
相关内容

            
        

    

    

        

            
点击排行

            
        

        

            
本栏推荐

            
        


        

            
猜你喜欢
-六神源码网