Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to achieve Wechat voice function by Html5". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

With the rise of social App such as Wechat, voice chat has become a necessary function of many App, from social App with voice chat as the main function, to voice customer service and waiter function of e-commerce App, voice chat has become an indispensable way.

But many people feel that the web-end voice is far away from us, which is more the work of local applications, but in fact, with the development of Html5, voice function has gradually become one of the front-end functions.

Why learn the pronunciation of HTML5?

With the advance of the 1.Html5 specification, the update of the mobile phone has accelerated the update of the operating system, and the voice function will become one of the main tasks of the front end, just like the current canvas. The development of voice function at the front end is faster and more labor-saving (which means saving money for the boss, which means giving the boss a raise).

two。 Even if local applications do voice functions now, being familiar with the various pitfalls of front-end voice interaction can make your colleagues have a more harmonious relationship and work more smoothly, rather than fighting each other.

3. Knowing new technologies can prevent interviews, and on the other hand, you can predict technology trends so that you don't learn a lot of skills of killing dragons or stick to conventions, which is more conducive to keeping your knowledge and professional core competitiveness at the top of the food chain.

4. Most people at the front end misunderstand the voice function, thinking that the voice function is just a HTML5 audio tag, but in fact it is not that simple.

First, let's start with a whole html page:

Wechat Voice chevron_left Wechat more_horiz Am I the one you love most?

Run, brother! (piss off) I won't say much here, it's just a shuttle of code.

Brother Bin, why do you think you are so good? I have a feeling of the sea when I see you, sister, do you like me?

No, I get seasick. I want to throw up when I see you. Keyboard press to speak sentiment_satisfied add_circle_outline

Css section:

* {margin: 0; padding: 0;} ul li {list-style: none;} html,body {height: 100%; width: 100%; overflow: hidden;} body {background: # ebebeb;} @ font-face {font-family: 'MaterialIcons'; font-style: normal; font-weight: 400; src: url (.. / css/iconfont/MaterialIcons-Regular.eot) / * For IE6-8 * / src: local ('MaterialIcons'), 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: 'MaterialIcons' Font-weight: normal; font-style: normal; font-size: 32px; / * Preferred icon size * / display: inline-block; / * line-height: 0.01remr; * / 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: 04px; 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;}

Here I would like to say two points of attention.

1.html section:

I didn't cut the picture at pixel level. I also used the svg icon directly. I used the specific library.

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

The 2.css section: use the flex layout. I just want to explain the function of Html5, so flex is not compatible with writing. In addition, please note that the header of App is very commonly used there.

Let's talk about the key js part.

Wechat voice 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 [XSS _ clean] =' loose end'; this.classList.add ('activeBtn'); mediaRecorder.start ();}, false) OSendBtn.addEventListener ('touchend', function (ev) {ev.preventDefault (); This [XSS _ clean] =' press to speak'; 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 [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.children [0])}, false) }; false) Chevron_left Wechat (184) Ada King more_horiz Am I the one you love most?

Run, brother! (piss off) I won't say much here, it's just a shuttle of code.

Brother Bin, why do you think you are so good? I have a feeling of the sea when I see you, sister, do you like me?

No, I get seasick. I want to throw up when I see you. Keyboard press to speak sentiment_satisfied add_circle_outline

There are a lot of points to pay attention to in the video recording function here, and we will talk about it one by one.

The first thing.

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

When you look at some of the html5 interfaces for recording, you see this.

Navigator.getUserMedia ()

You have to be careful. this is the old standard, it has been scrapped, and the new one is

Navigator.mediaDevices.getUserMedia

The voice piece in html5 multimedia has changed several specifications, and it is very messy. Some tags have not even been implemented by a browser, and they wither before they bloom. You don't have to care and you don't need to waste that time to know, you just need to know that I said this, because you know that the scrapped past is useless, and you might as well have a game of LOL or Arena of Valor at that time (although I don't know the difference between the two. But these two games should be very fun, have not played do not understand).

You don't need to understand what's in it, what promise, what media is streaming, you don't need to know, you just know such a thing.

The above code is equivalent to turning on the faucet (or pressing the recording key of the tape recorder), so we have to have something to catch the water. We can use the rice cooker (tape recorder means tape) to put the faucet under the faucet and watch it ci (in our hometown, shooting), as follows

MediaRecorder = new MediaRecorder (stream)

The next thing is, the raw rice is cooked at the press of the button, and the corresponding tape recorder is recorded and played by pressing the button, but if you want to play in our program, you need not only a tape recorder, but also a tape recorder, a tape recorder is an audio tag, there is no easy way to do it, we new one. There are no objects in this world that programmers dare not new. New is not good, but new is two. The rest of the code has no shortcomings except scary, simple and outrageous.

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.children [0])}, false) This is the end of the introduction of "how to achieve Wechat Voice function by Html5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.