Mit dem Aufkommen sozialer Apps wie WeChat ist Voice-Chat zu einem unverzichtbaren Feature für viele Apps geworden, von Social-Apps, die Voice-Chat als Hauptfunktion nutzen, bis hin zu E-Commerce-Apps mit Voice-Kundenservice und Ladenkellnerfunktionen Chat ist unverzichtbar geworden.
Viele Menschen haben jedoch das Gefühl, dass die Web-Sprachfunktion weit von uns entfernt ist und dass dies eher die Arbeit lokaler Anwendungen ist. Mit der Entwicklung von Html5 ist die Sprachfunktion nach und nach zu einer der Aufgaben geworden Must-Have-Funktionen im Frontend.
Warum sollten wir HTML5-Sprache lernen?1. Die HTML5-Spezifikation schreitet voran und Mobiltelefon-Updates haben die Aktualisierung des Betriebssystems beschleunigt. Die Sprachfunktion wird genau wie die aktuelle Leinwand zu einer der Hauptaufgaben des Frontends. Die Front-End-Implementierung der Sprachfunktionsentwicklung ist schneller und spart mehr Personal (das bedeutet, dass der Chef Geld spart, und dass der Chef Geld spart, was zu einer Gehaltserhöhung führt).
2. Auch wenn lokale Anwendungen jetzt über Sprachfunktionen verfügen, kann die Kenntnis der verschiedenen Fallstricke der Front-End-Sprachinteraktion dazu führen, dass Ihre Kollegen eine harmonischere Beziehung und eine reibungslosere Zusammenarbeit haben, anstatt sich gegenseitig zu bekämpfen.
3. Das Verständnis neuer Technologien kann Vorstellungsgespräche verhindern, und zweitens können Sie technologische Trends vorhersagen, sodass Sie nicht viele Drachentötungsfähigkeiten erlernen oder sich an die Regeln halten. Dies ist förderlicher für die Beibehaltung Ihres Wissens und Ihrer beruflichen Kernwettbewerbsfähigkeit die Spitze der Nahrungskette.
4. Die meisten Leute im Frontend haben Missverständnisse über die Sprachfunktion. Sie denken, dass die Sprachfunktion nur das HTML5-Audio-Tag ist. Tatsächlich ist es nicht so einfach.
Nicht so viel Tinte, lassen Sie uns einfach ein kleines Projekt entwickeln und alles wird klar sein. Schauen wir uns zuerst die Renderings an.
Zwischenablage.png
Die Geschäftslogik ist sehr einfach,
Es ist genau das Gleiche wie unsere WeChat-Methode. Wenn Sie nach unten drücken, wird das Wort zum Beenden losgelassen und die Rede wird aufgezeichnet andere Partei zur gleichen Zeit.
Lassen Sie uns dies Schritt für Schritt tun. Lassen Sie uns zunächst eine HTML-Seite vervollständigen.
<!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>WeChat Voice</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> WeChat(184) </div> <div id=mid>Aida·Wang</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>Bin ich die Person, die du am meisten liebst? <span class=bot></span> <span class=top></span> </div> <div class=avatar > <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Lauf, Bruder! (Rollendes Kalb) <span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Ich werde nicht viel sagen hier Okay, hier kommt eine Menge Code... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1. png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Bruder Dabin, warum bist du so gut? Ich fühle mich wie das Meer, wenn ich dich sehe<span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Alt Mädchen Sohn, hast du dich in mich verliebt... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Nein, das bin ich Seekrank. , ich muss mich übergeben, wenn ich dich sehe... <span class=bot></span> <span class=top></span> </div> </li> </ul> </div> <Fußzeile id=footer> <div id=keyboard> <i class=material-icons> Tastatur </i> </div> <div id=sayBtn> <span id=sendBtn class=sendBtn>Zum Sprechen drücken</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-Teil,
*{ margin: 0; padding: 0;}ul li{ list-style: none;}html,body{ height: 100%; width: 100%;}body{ background: #ebebeb;}@font -face { Schriftfamilie: 'Material Icons'; Schriftgröße: normal; url(../css/iconfont/MaterialIcons-Regular.eot); /* Für 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'); Schriftfamilie: 'Material Icons'; Schriftstärke: normal; Schriftgröße: normal; 32px; /* Bevorzugte Symbolgröße */ display: inline-block; /* line-height: 0,01rem */ text-spacing: normal; Direction: ltr; /* Unterstützung für alle WebKit-Browser */ -webkit-font-smoothing: antialiased; /* Unterstützung für Safari und Chrome. optimiseLegibility; /* Unterstützung für Firefox */ -moz-osx-font-smoothing: greyscale; /* Unterstützung für IE */ }#wrap{ display: flex-direction : Column; justify-content: space-between;}#header{ height: 46px; #363539; display: flex; align-items: center; 100px;}#header #right{ display: flex; align-items: center; width: 100px;}#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; : flex-start; justify-content:flex-end; padding: 8px;}.item_you{ display: flex-start; justify-content:flex-start; padding: 8px;}.avatar{ width: 40px;}.avatar img{width: 100%;}.item_me .chatContent{ padding: 10px; border : 1px solid #6fb44d; margin-right: 15px; 5px; position: relative;}.chatContent span{width:0; style:solid dashed gestrichelt; border-color: transparent transparent transparent right:-17px;}.item_me .chatContent span.top{ border-style:solid dashed dasshed; border-color:transparent right:-10px;} .item_you .chatContent{ padding: 10px; #a0e75a; Rand: 1px durchgezogen #6fb44d; 15px; border-radius: 5px; position: relative;} .item_you .chatContent span.bot{ border-style:solid dashed dashed; border-color: transparent left:-17px; top:10px;}.item_you .chatContent span.top{ border-width:8px; gestrichelt gestrichelt; Randfarbe: transparent links: -15 Pixel; Abstand: 0 4 Pixel; Rand oben: 1 Pixel : flex; align-items: center; space-around;}#sayBtn{ display: flex; margin: 0 565656; #f4f5f6; border:1px solid #bec2c1; border-radius: 5px; center;}.activeBtn{ display: block; flex: 1; border: 1px solid #bec2c1; text-align: center;}.item_audio .chatContent{ 6px; Hintergrund: #fff; Rand: 1px fest #999; margin-right: 15px; position: relative; width:120px;}.item_audio .chatContent span.bot{ border-width:8px; border-color: transparent transparent transparent #999; right:-17px; top:10px;}.item_audio .chatContent span.top{ border-width:8px; border-color:transparent transparent transparent #fff ;} .material-icons_wifi{ transform: rotation(90deg); ; Schriftgröße: 22px;}.redDot{ Hintergrund: #f45454; Randradius: 50%; 8px; Höhe: 8px; Rand rechts: 10px;} Hier möchte ich zwei Punkte hervorheben:1.html-Teil:
Um Ärger zu vermeiden, habe ich das Bild nicht auf Pixelebene geschnitten. Um Ärger zu vermeiden, habe ich die spezifische Bibliothek verwendet, die ich verwendet habe
https://material.io/tools/icons/?style=outline
2. CSS-Teil: Flex-Layout verwenden. Ich möchte nur die HTML5-Funktion erklären, daher schreibt Flex nicht die Kompatibilitätsschreibmethode. Achten Sie außerdem auf die Schreibmethode des App-Header-Teils, die sehr häufig verwendet wird.
Lassen Sie uns über den wichtigsten js-Teil sprechen.
<!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 -Kompatibler Inhalt=ie=edge> <title>WeChat Voice</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( // Einschränkungen – nur Audio für diese App erforderlich { audio: true }) // Erfolgreicher Rückruf .then(function (stream) { rec(stream); // Fehlerrückruf .catch(function (err) { } } else { } function rec(stream) { mediaRecorder = new MediaRecorder(stream); oSendBtn.addEventListener('touchstart ', function (ev) { ev.preventDefault(); this.innerHTML = 'Release to end'; this.classList.add('activeBtn'); mediaRecorder.start(); }, false); oSendBtn.addEventListener('touchend', function (ev) { ev.preventDefault(); this.innerHTML = 'Zum Sprechen drücken' ; this.classList.remove('activeBtn'); mediaRecorder.stop( }, false); = function (e) { var clipContainer = document.createElement('li'); var audio = document.createElement('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 </div>`; , ''); oChatList.appendChild(clipContainer); var audioURL = window.URL.createObjectURL(e.data.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); id=wrap> <header id=header> <div id=left> <i class=material-icons> chevron_left </i> WeChat(184) </div> <div id=mid>Aida·Wang</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>Bin ich die Person, die du am meisten liebst? <span class=bot></span> <span class=top></span> </div> <div class=avatar > <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Lauf, Bruder! (Rollendes Kalb) <span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Ich werde nicht viel sagen hier Okay, hier kommt eine Menge Code... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1. png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Bruder Dabin, warum bist du so gut? Ich fühle mich wie das Meer, wenn ich dich sehe<span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Alt Mädchen Sohn, hast du dich in mich verliebt... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Nein, das bin ich Seekrank. , ich muss mich übergeben, wenn ich dich sehe... <span class=bot></span> <span class=top></span> </div> </li> </ul> </div> <Fußzeile id=footer> <div id=keyboard> <i class=material-icons> Tastatur </i> </div> <div id=sayBtn> <span id=sendBtn class=sendBtn>Zum Sprechen drücken</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>Bei der Implementierung der Videoaufzeichnungsfunktion sind viele Punkte zu beachten. Lassen Sie uns diese nacheinander besprechen.
Das Erste,
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia( { audio: true }) // Erfolgreicher Rückruf .then(function (stream) { rec(stream); }) // Fehlerrückruf .catch(function (err) { } } else { }Wenn Sie sich einige HTML5-Schnittstellen für die Aufzeichnung ansehen, sehen Sie dies
Navigator.getUserMedia()
Seien Sie vorsichtig. Dies ist ein alter Standard und wurde abgeschafft
navigator.mediaDevices.getUserMedia
Der Sprachaspekt in HTML5-Multimedia hat sich mehrmals geändert und ist sehr chaotisch. Einige Tags wurden noch nicht einmal in einem Browser implementiert und sind verschwunden, bevor sie aufblühten Sie müssen nur wissen, was ich sage, denn Sie wissen, dass die verlassene Vergangenheit keinen Nutzen hat. Wenn Sie Zeit haben, können Sie genauso gut eine Partie LOL oder King of Glory spielen. Ich verstehe den Unterschied zwischen den beiden nicht, aber diese beiden Spiele sollten Spaß machen) Nun, ich habe es noch nie gespielt, also verstehe ich es nicht.
Sie müssen nicht wissen, was darin enthalten ist. Sie müssen nicht wissen, was Versprechen sind und was Medienströme sind.
Der obige Code entspricht dem Aufdrehen des Wasserhahns (oder dem Drücken der Aufnahmetaste des Rekorders). Dann müssen wir etwas haben, um das Wasser aufzufangen. Wir können einen Reiskocher (oder ein Band im Falle eines Rekorders) verwenden Halten Sie es unter den Wasserhahn und schauen Sie zu, wie es hineingeht. ci (bedeutet, in unserer Heimatstadt zu schießen), der folgende Code
mediaRecorder = new MediaRecorder(stream);
Der nächste Schritt besteht darin, die Taste zu drücken und alles ist bereit. Nach der Aufnahme drücken Sie die Taste, um unser Programm abzuspielen. Sie müssen jedoch nicht nur ein Band, sondern auch einen Recorder haben . Der Rekorder ist der Audio-Tag. Wenn nichts einfach ist, erstellen wir einen neuen. Es gibt keine Objekte auf dieser Welt, die Programmierer nicht neu wagen. Wenn ein neues Objekt nicht ausreicht, gibt es nur zwei neue. Der Rest des Codes hat keine Mängel, außer dass er beängstigend ist, er ist einfach unverschämt.
mediaRecorder.ondataavailable = function (e) { var clipContainer = document.createElement('li'); var audio = document.createElement('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 </ div>`; audio.setAttribute('controls', ''); oChatList.appendChild(clipContainer); 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]) }, FALSCH); };Tatsächlich wird es aufgezeichnet und ausgestrahlt.
OK, ist es ganz einfach? Lassen Sie mich über ein paar Punkte zum gesamten Projekt sprechen:
1. Eine vernünftige Struktur im Schnittdiagramm ist die Voraussetzung dafür, dass Sie die Funktionen später ausführen können. Wenn die Struktur gut gemacht ist, wird dies später Ärger ersparen. Denken Sie an Zhuge Liang, der die HTML5-Struktur erstellt hat, bevor er noch ein Kind war . Es gibt drei Abschnitte.
2. Eine solide Grundlage aus nativem JS und ES6 kann Ihnen verschiedene Ideen liefern. Ich verwende hier beispielsweise die Ereignisdelegation und die ES6-Vorlagen-Engine. Insbesondere bei der Ereignisdelegierung wäre es mühsam, Knoten zu finden, wenn sie nicht verwendet würden. Außerdem könnte der Code leicht durcheinander geraten, wenn er wiederholt wird.
3. Neues Wissen und neue Technologien sind eigentlich nicht kompliziert, sondern sehr einfach. Wenn die neue Technologie nicht dazu dient, Funktionen zu verbessern und unsere Probleme zu lösen, warum dann neue Technologien entwickeln? Weil diese großen Kerle mit den großen Bärten Angst davor haben, von ihren Vorgesetzten zu hören, dass ihre Arbeitsbelastung nicht ausreicht, wenn sie nichts zu tun haben? Technologie ist dazu da, Probleme zu lösen und unser Leben besser zu machen.
4. Dieses Projekt funktioniert nicht unter IOS 11 oder niedriger, da diese Methode vor IOS 11.2 nicht unterstützt wird und Sie lokale IOS-Anwendungsentwickler benötigen, um Unterstützung bereitzustellen, aber unter Android ist es in Ordnung. Und es ist absehbar, dass IOS in ein paar Jahren nativ unterstützt wird, ohne dass Sie Unterstützung erhalten, sodass Ihre Entwicklungseffizienz viel höher sein wird. Glauben Sie nicht, dass HTML5 erst in etwa 15 Jahren kommerziell verfügbar sein wird (wie viele Jahre wird es dauern, bis Vue, React und Angular in großem Umfang eingesetzt werden?). die vorbereitet sind.
Im gesamten Projekt gibt es noch viele Details und Punkte zu beachten. Ich hoffe, Sie können es wirklich selbst abtippen, denn Sie verstehen, dass mein Artikel und Ihre Fähigkeit, diese Technologie zu nutzen, zwei verschiedene Dinge sind weiter auf der Straße bis zum vorderen Ende (denken Sie daran, oft zurückzukommen, um Siehe ^_^ zu lesen).
ZusammenfassenDas Obige ist die Einführung des Herausgebers in die Verwendung von HTML5-Multimedia zur Implementierung der WeChat-Sprachfunktion. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!
Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, können Sie ihn gerne erneut drucken. Bitte geben Sie die Quelle an. Vielen Dank!