Avec l'essor des applications sociales telles que WeChat, le chat vocal est devenu une fonctionnalité incontournable pour de nombreuses applications, allant des applications sociales qui utilisent le chat vocal comme fonction principale aux applications de commerce électronique avec service client vocal et fonctions de serveur de magasin Voice. le chat est devenu indispensable.
Cependant, beaucoup de gens ont le sentiment que la voix sur le Web est loin de nous, et qu'elle est davantage le fait d'applications locales. En fait, ce n'est pas le cas. Avec le développement de HTML5, la fonction vocale est progressivement devenue l'une des fonctionnalités les plus répandues. fonctions incontournables sur le front-end.
Pourquoi devrions-nous apprendre la voix HTML5 ?1. La spécification HTML5 progresse et les mises à jour des téléphones mobiles ont accéléré les mises à jour du système d'exploitation. La fonction vocale deviendra l'une des tâches principales du front-end, tout comme le canevas actuel. La mise en œuvre frontale du développement des fonctions vocales est plus rapide et permet d'économiser plus de main d'œuvre (cela signifie économiser de l'argent pour le patron, et économiser de l'argent pour le patron, c'est s'offrir une augmentation de salaire)
2. Même si les applications locales disposent désormais de fonctions vocales, se familiariser avec les différents pièges de l'interaction vocale frontale peut permettre à vos collègues d'avoir une relation plus harmonieuse et une collaboration plus fluide au lieu de se battre.
3. Comprendre les nouvelles technologies peut empêcher les entretiens, et deuxièmement, vous pouvez prédire les tendances technologiques, de sorte que vous n'apprenez pas un tas de compétences pour tuer des dragons ou que vous ne respectiez pas les règles. Cela est plus propice au maintien de vos connaissances et de votre compétitivité professionnelle. le sommet de la chaîne alimentaire.
4. La plupart des utilisateurs du front-end ont des malentendus sur la fonction vocale. Ils pensent que la fonction vocale n'est qu'une balise audio HTML5. En fait, ce n'est vraiment pas si simple.
Pas beaucoup d’encre, développons simplement un petit projet et tout sera clair. Voyons d’abord les rendus.
presse-papiers.png
La logique métier est très simple,
C'est exactement la même chose que notre méthode WeChat. Lorsque vous appuyez, le mot sera relâché pour terminer, et lorsque vous relâcherez, il sera enfoncé pour terminer et la voix sera envoyée au. l'autre partie en même temps.
Faisons-le étape par étape. Tout d’abord, complétons une page 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>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>Suis-je la personne que vous aimez le plus <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>Courez, mon frère ! (Veau roulant) <span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Je ne dirai pas grand chose ici Ok, voici un tas de 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>Frère Dabin, pourquoi es-tu si bon ? J'ai l'impression d'être l'océan quand je te vois<span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Vieux fille Fils, es-tu tombé amoureux de moi... <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>Non, je le suis mal de mer. , j'ai envie de vomir quand je te vois... <span class=bot></span> <span class=top></span> </div> </li> </ul> </div> <pied de page id=footer> <div id=keyboard> <i class=material-icons> clavier </i> </div> <div id=sayBtn> <span id=sendBtn class=sendBtn>Appuyez pour parler</span> < /div> <div id=icon><i class=material-icons> sentiment_satisfait </i></div> <div id=add><i class=material-icons> add_circle_outline </i></div> </footer> </div></body></html>
partie css,
*{ margin : 0 ; padding : 0;}ul li{ list-style : aucun;}html,body{ hauteur : 100 % ; largeur : 100 % ; corps{ background : #ebebeb;}@font -face { font-family : 'Icônes matérielles' ; style de police : normal ; poids de police : 400 ; url(../css/iconfont/MaterialIcons-Regular.eot); /* Pour 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 : « Icônes matérielles » ; font-weight : normal ; font-style : normal ; 32px; /* Taille d'icône préférée */ affichage : bloc en ligne ; /* hauteur de ligne : 0,01rem ; */ espacement des lettres : normal ; direction : ltr ; /* Prise en charge de tous les navigateurs WebKit */ -webkit-font-smoothing : antialiased ; /* Prise en charge de Safari et Chrome */ rendu du texte : optimise la lisibilité ; /* Prise en charge de Firefox. */ -moz-osx-font-smoothing : niveaux de gris ; /* Prise en charge de IE */ font-feature-settings : 'liga' ; : colonne ; justifier-contenu : espace-entre ; hauteur : 100 % ;}#header{ hauteur : 46 px ; #363539 ; affichage : flex ; aligner les éléments : centre ; couleur : #fff ; justifier le contenu : espace-entre ;}#header #left{ affichage : flex ; aligner les éléments : centre ; 100px;}#header #right{ display: flex; align-items: center; width: 100px; padding-right : 6px;}#header #mid{ text-align: center; flex: 1;}#contentWrap{ flex: 1; overflow-y:auto;}.item_me,.item_audio{ display: flex; : flex-start; justifier-content:flex-end; padding: 8px;}.item_you{ display: flex; align-items: flex-start; justifier-content:flex-start; remplissage: 8px;}.avatar{ largeur: 40px; hauteur: 40px;}.avatar img{largeur: 100%;}.item_me .chatContent{ remplissage: 10px fond: #a0e75a; : 1px solide #6fb44d ; marge droite : 15px ; 5px ; position : relative;}.chatContent span{width:0; height:0; overflow:hidden; position:absolute;}.item_me .chatContent span.bot{ border-width:8px; style : tirets pleins ; couleur de la bordure : transparent transparent transparent #6fb44d à droite : -17px haut : 10px ;}.item_me ; .chatContent span.top{ border-width:8px; border-style:solid dashed dashed;transparent transparent #a0e75a right:-15px;} .item_you .chatContent{ padding: 10px; #a0e75a ; bordure : 1px solide #6fb44d ; marge gauche : 15px; border-radius: 5px; position: relative;} .item_you .chatContent span.bot{ border-width:8px; border-style:solid dashed dashed; 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{ hauteur : 46px; remplissage : #f4f5f6 ; : flex ; aligner les éléments : centre ; couleur : #7f8389 ; espace autour ;}#sayBtn{ flex : 1 ; affichage : flex ; marge : 0 5px ; couleur : #565656 ; #f4f5f6 ; bordure : 1px solide #bec2c1 ; rayon de bordure : 5px ; center;}.activeBtn{ display: block; flex: 1; padding: 8px; background: #c6c7ca; border:1px solid #bec2c1; border-radius: 5px; 6px ; arrière-plan : #fff ; bordure : 1px solide #999 ; rayon de bordure : 5px ; marge-droite : 15 px ; position : relative ; largeur : 120 px ; hauteur minimale : 20 px ;}.item_audio .chatContent span.bot{ border-width : 8px ; #999 ; à droite : -17 px ; en haut : 10 px ;}.item_audio .chatContent span.top{ border-width:8px; border-style:solid dashed dashed; border-color:transparent transparent transparent #fff right:-15px;} .material-icons_wifi{ transform: rotate(90deg); ; taille de police : 22 px ;}.redDot{ arrière-plan : #f45454 ; largeur de la bordure : 50 % ; 8px ; hauteur : 8px ; marge droite : 10px ;} Ici, je voudrais mentionner deux points d’attention :Partie 1.html :
Pour éviter les problèmes, je n'ai pas coupé l'image au niveau des pixels. Pour éviter les problèmes, j'ai directement utilisé les icônes SVG. La bibliothèque spécifique que j'ai utilisée est.
https://material.io/tools/icons/?style=outline
Partie 2.css : utilisez la mise en page flexible. Je veux juste expliquer la fonction Html5, donc flex n'écrit pas la méthode d'écriture de compatibilité. De plus, veuillez faire attention à la méthode d'écriture de la partie en-tête de l'application, qui est très couramment utilisée.
Parlons de la partie clé de 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>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( // contraintes - seul l'audio nécessaire pour cette application { audio : true }) // Rappel réussi .then (fonction (stream) { rec(stream); }) // Rappel d'erreur .catch(function (err) { } ); } else { } function rec(stream) { mediaRecorder = new MediaRecorder(stream); ', 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 = 'Appuyez pour parler' ; this.classList.remove('activeBtn'); mediaRecorder.stop( }, falseRecorder.ondataavailable); = function (e) { var clipContainer = document.createElement('li'); var audio = document.createElement('audio'); clipContainer.classList.add('item_audio'); redDot></div> <div class=chatContent> <i class=material-icons materials-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); var audioURL = window.URL.createObjectURL(e.data); oChatList.addEventListener('touchstart', function (ev) { if (ev.srcElement.parentNode.className!== 'item_audio') return; audio.play(); ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode .children[0]) }, faux }; } }, faux); </script></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>Suis-je la personne que vous aimez le plus <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>Courez, mon frère ! (Veau roulant) <span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Je ne dirai pas grand chose ici Ok, voici un tas de 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>Frère Dabin, pourquoi es-tu si bon ? J'ai l'impression d'être l'océan quand je te vois<span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Vieux fille Fils, es-tu tombé amoureux de moi... <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>Non, je le suis mal de mer. , j'ai envie de vomir quand je te vois... <span class=bot></span> <span class=top></span> </div> </li> </ul> </div> <pied de page id=footer> <div id=keyboard> <i class=material-icons> clavier </i> </div> <div id=sayBtn> <span id=sendBtn class=sendBtn>Appuyez pour parler</span> < /div> <div id=icon><i class=material-icons> sentiment_satisfait </i></div> <div id=add><i class=material-icons> add_circle_outline </i></div> </footer> </div></body></html>Il y a de nombreux points auxquels il faut prêter attention lors de la mise en œuvre de la fonction d’enregistrement vidéo. Parlons-en ici un par un.
La première chose,
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia( { audio : true }) // Rappel réussi .then(function (stream) { rec(stream); }) // Rappel d'erreur .catch(function (err) { } } else { }Lorsque vous regardez certaines interfaces HTML5 pour l'enregistrement, vous voyez ceci
Navigator.getUserMedia()
Soyez prudent. Il s'agit d'une ancienne norme qui a été abolie.
navigator.mediaDevices.getUserMedia
L'aspect vocal dans le multimédia HTML5 a changé plusieurs fois, et il est très compliqué. Certaines balises n'ont même pas été implémentées dans un navigateur, et elles se sont fanées avant de fleurir. Vous n'avez pas besoin de vous en soucier et il n'est pas nécessaire de gaspiller cela. Il suffit de savoir ce que je dis. Cela suffit, car vous savez que le passé abandonné ne sert à rien. Si vous avez le temps, vous pourriez aussi bien jouer à une partie de MDR ou de King of Glory (même si je ne le fais pas). Je ne comprends pas la différence entre les deux, mais ces deux jeux devraient être amusants) Bon, je n'y ai jamais joué donc je ne comprends pas).
Vous n’avez pas besoin de comprendre ce qu’il y a à l’intérieur. Vous n’avez pas besoin de savoir ce que sont les promesses et quels sont les flux médiatiques. Vous avez juste besoin de savoir cette seule chose.
Le code ci-dessus équivaut à ouvrir le robinet (ou à appuyer sur le bouton d'enregistrement de l'enregistreur), nous devons alors avoir quelque chose pour récupérer l'eau. Nous pouvons utiliser un cuiseur à riz (ou une cassette dans le cas d'un enregistreur) pour mettre. sous le robinet et regardez-le entrer. ci (ce qui signifie tirer dans notre ville natale), le code suivant
mediaRecorder = new MediaRecorder(stream);
L'étape suivante consiste à appuyer sur le bouton et tout sera prêt. L'enregistreur correspondant signifie qu'après l'enregistrement, appuyez sur le bouton pour lire. Cependant, pour jouer dans notre programme, vous devez non seulement disposer d'une cassette, mais également d'un enregistreur. . L'enregistreur est la balise audio. S'il n'y a rien de facile à faire, nous en créerons une nouvelle. Il n'y a pas d'objets dans ce monde que les programmeurs n'osent pas créer. Si un nouvel objet ne suffit pas, il n'y en a que deux nouveaux. Le reste du code n'a aucun défaut autre que celui d'être effrayant, c'est tout simplement scandaleux.
mediaRecorder.ondataavailable = function (e) { var clipContainer = document.createElement('li'); var audio = document.createElement('audio'); clipContainer.classList.add('item_audio'); div class = redDot></div> <div class=chatContent> <i class=material-icons materials-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. jouer(); ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode.children[0]) }, FAUX); };En fait, il est enregistré et diffusé.
OK, est-ce très simple ? Laissez-moi parler de quelques points sur l'ensemble du projet :
1. Avoir une structure raisonnable dans le diagramme de découpe est la condition préalable pour que vous puissiez exécuter les fonctions plus tard. Si la structure est bien faite, cela vous évitera des problèmes plus tard. Pensez à Zhuge Liang, qui a construit la structure HTML5 avant d'être un débutant. . Il y a trois sections.
2. Une base solide de js natif et d'ES6 peut vous fournir différentes idées. Par exemple, j'utilise ici la délégation d'événements et le moteur de modèles ES6. Surtout pour la délégation d'événements, il serait difficile de trouver des nœuds s'ils ne sont pas utilisés. De plus, il serait facile de gâcher le code s'il est répété.
3. Les nouvelles connaissances et technologies ne sont en réalité pas compliquées. En fait, elles sont très simples si la nouvelle technologie n’a pas pour but d’améliorer les fonctions et de résoudre nos problèmes, alors pourquoi développer de nouvelles technologies ? Parce que ces grands avec de grandes barbes ont peur de se faire dire par leurs patrons que leur charge de travail n'est pas suffisante alors qu'ils n'ont rien à faire ? La technologie est là pour résoudre les problèmes et améliorer nos vies.
4. Ce projet ne fonctionnera pas sous IOS 11 ou version antérieure, car cette méthode n'est pas prise en charge avant IOS 11.2 et vous avez besoin des développeurs d'applications locales IOS pour fournir une assistance, mais cela est OK sous Android. Et il est prévisible que dans quelques années, IOS sera supporté nativement sans vous fournir de support, votre efficacité de développement sera donc bien supérieure. Ne pensez pas que ces technologies sont loin. HTML5 ne sera disponible dans le commerce que dans une quinzaine d'années (combien d'années faudra-t-il pour que vue, React et Angular soient utilisés à grande échelle ?). qui sont préparés.
Il y a encore de nombreux détails et points auxquels il faut prêter attention dans l'ensemble du projet. J'espère que vous pourrez vraiment le rédiger vous-même, car vous comprenez mon article et votre capacité à utiliser cette technologie sont deux choses différentes. plus loin sur la route jusqu'à l'avant (pensez à revenir souvent pour lire Voir ^_^).
RésumerCe qui précède est l'introduction de l'éditeur à l'utilisation du multimédia HTML5 pour implémenter la fonction vocale WeChat. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !
Si vous pensez que cet article vous est utile, n'hésitez pas à le réimprimer, veuillez indiquer la source, merci !