Con el auge de las aplicaciones sociales como WeChat, el chat de voz se ha convertido en una característica imprescindible para muchas aplicaciones, desde aplicaciones sociales que utilizan el chat de voz como su función principal hasta aplicaciones de comercio electrónico con servicio de atención al cliente por voz y funciones de camarero de tienda. El chat se ha vuelto indispensable.
Sin embargo, muchas personas sienten que la voz del lado web está lejos de nosotros, y esto es más trabajo de aplicaciones locales. De hecho, este no es el caso. Con el desarrollo de Html5, la función de voz se ha convertido gradualmente en una de las más populares. Funciones imprescindibles en el front-end.
¿Por qué deberíamos aprender voz HTML5?1. La especificación Html5 está avanzando y las actualizaciones de los teléfonos móviles han acelerado las actualizaciones del sistema operativo. La función de voz se convertirá en una de las tareas principales del front-end, al igual que el lienzo actual. La implementación front-end del desarrollo de funciones de voz es más rápida y ahorra más mano de obra (esto significa ahorrar dinero para el jefe, y ahorrar dinero para el jefe es aumentar su salario)
2. Incluso si las aplicaciones locales ahora tienen funciones de voz, estar familiarizado con los diversos obstáculos de la interacción de voz frontal puede hacer que sus colegas tengan una relación más armoniosa y una colaboración más fluida en lugar de pelear entre sí.
3. Comprender las nuevas tecnologías puede evitar las entrevistas y, en segundo lugar, puede predecir las tendencias tecnológicas, de modo que no aprenderá un montón de habilidades para matar dragones ni se apegará a las reglas. Es más propicio para mantener su conocimiento y competitividad central profesional. la cima de la cadena alimentaria.
4. La mayoría de las personas en el front-end tienen malentendidos sobre la función de voz. Piensan que la función de voz es solo la etiqueta de audio HTML5. De hecho, no es tan simple.
No tanta tinta, simplemente desarrollemos un pequeño proyecto y todo quedará claro. Veamos primero las representaciones.
portapapeles.png
La lógica empresarial es muy simple.
Es exactamente igual que nuestro método WeChat. Cuando presiona hacia abajo, la palabra se soltará para finalizar y el discurso se grabará. Cuando lo suelte, se presionará para finalizar y la voz se enviará al. otra parte al mismo tiempo.
Hagámoslo paso a paso. Primero, completemos una página html.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible = es decir = borde> <título>WeChat Voice</título> <enlace rel=hoja de estilo href=css/record.css></head><cuerpo> <div id=wrap> <encabezado id=encabezado> <div id=izquierda> <i clase=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>¿Soy la persona que más amas? <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>¡Corre, hermano! (Becerro rodante) <span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>No diré mucho aquí Bien, aquí viene un montón de código... <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>Hermano Dabin, ¿por qué eres tan bueno? Me siento como el océano cuando te veo<span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Viejo Niña Hijo, ¿te has enamorado de mí... <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>No, lo soy mareado, tengo ganas de vomitar cuando te veo... <span class=bot></span> <span class=top></span> </div> </li> </ul> </div> <pie de página id=pie de página> <div id=teclado> <i class=material-icons> teclado </i> </div> <div id=sayBtn> <span id=sendBtn class=sendBtn>Presione para hablar</span> < /div> <div id=icon><i class=material-icons> sentimiento_satisfecho </i></div> <div id=add><i class=material-icons> add_circle_outline </i></div> </footer> </div></body></html>
parte css,
*{ margen: 0; relleno: 0;}ul li{ estilo de lista: ninguno;}html,cuerpo{ altura: 100%; ancho: 100%; desbordamiento: oculto;}cuerpo{ fondo: #ebebeb;}@font -face {familia de fuentes: 'Iconos de materiales'; estilo de fuente: normal; peso de fuente: 400; url(../css/iconfont/MaterialIcons-Regular.eot); /* Para IE6-8 */ src: local('Iconos de materiales'), local('MaterialIcons-Regular'), url(../css/ iconfont/MaterialIcons-Regular.woff) formato('woff2'), url(../css/iconfont/MaterialIcons-Regular.woff2) formato('woff'), url(../css/iconfont/MaterialIcons-Regular.ttf) formato('truetype'); familia de fuentes: 'Iconos de materiales'; peso de fuente: normal; estilo de fuente: normal; 32px; /* Tamaño de icono preferido */ display: inline-block; /* line-height: 0.01rem; */ text-transform: none; dirección: ltr /* Soporte para todos los navegadores WebKit */ -webkit-font-smoothing: antialiased /* Soporte para Safari y Chrome */ representación de texto. optimizarLegibility /* Soporte para Firefox */ -moz-osx-font-smoothing: escala de grises; /* Soporte para IE */ font-feature-settings: 'liga'; : columna; justificar-contenido: espacio entre; altura: 100%;}#encabezado{ altura: 46px; altura de línea: 46px; #363539; mostrar: flex; align-items: center; color: #fff; justify-content: space-between;}#header #left{ display: flex; align-items: center; 100px;}#header #right{ pantalla: flex; align-items: center; ancho: 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; : flex-start; justificar-content:flex-end; padding: 8px;}.item_you{ display: flexionar-elementos: flex-start; justify-content:flex-start; relleno: 8px;}.avatar{ ancho: 40px; alto: 40px;}.avatar img{ancho: 100%;}.item_me .chatContent{ relleno: 10px; : 1px sólido #6fb44d; margen derecho: 15px; radio del borde: 5px; posición: relativa;}.chatContent span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}.item_me .chatContent span.bot{ border-width:8px; estilo: sólido discontinuo discontinuo; color del borde: transparente transparente transparente #6fb44d derecha: -17px arriba: 10px;}.item_me; .chatContent span.top{ ancho de borde: 8px; estilo de borde: sólido discontinuo; color de borde: transparente transparente #a0e75a; derecha: -15px;} .item_you .chatContent{ relleno: 10px; #a0e75a; borde: 1px sólido #6fb44d; margen izquierdo: 15px; radio del borde: 5px; posición: relativa;} .item_you .chatContent span.bot{ ancho del borde: 8px; estilo del borde: sólido discontinuo; color del borde: transparente #6fb44d transparente izquierda: -17px; arriba:10px;}.item_you .chatContent span.top{ border-width:8px border-style:solid discontinuo discontinuo; color del borde: transparente #a0e75a transparente transparente; izquierda: -15px; parte superior: 1px sólido #d7d7d8; : flexionar; alinear-elementos: centro; color: #7f8389; justificar-contenido: espacio alrededor;}#sayBtn{ flex: 1; pantalla: flex; margen: 0 5px; color:#565656; fondo: 8px; #f4f5f6; borde: 1px sólido #bec2c1; radio del borde: 5px alineación de texto: centro;}.activeBtn{ pantalla: bloque; flex: 1; relleno: 8px; fondo: #c6c7ca; borde:1px sólido #bec2c1; 6px; fondo: #fff; borde: 1px sólido #999; margen derecho: 15 px; posición: relativa; ancho: 120 px; altura mínima: 20 px; }. item_audio .chatContent span.bot{ ancho de borde: 8 px; #999; derecha:-17px; arriba:10px;}.item_audio .chatContent span.top{ ancho de borde: 8px; estilo de borde: sólido discontinuo; color de borde: transparente transparente transparente #fff; arriba: 10px;} .material-icons_wifi{ transformar: rotar (90 grados); ; tamaño de fuente: 22px;}.redDot{ fondo: #f45454; radio del borde: 50%; 8px; altura: 8px; margen derecho: 10px;} Aquí me gustaría mencionar dos puntos de atención:1.parte html:
Para evitar problemas, no corté la imagen a nivel de píxeles. Para evitar problemas, utilicé directamente iconos svg. La biblioteca específica que utilicé es.
https://material.io/tools/icons/?style=outline
2.parte css: use diseño flexible. Solo quiero explicar la función Html5, por lo que flex no escribe el método de escritura de compatibilidad. Además, preste atención al método de escritura de la parte del encabezado de la aplicación, que se usa con mucha frecuencia.
Hablemos de la parte clave de js.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible=es decir=edge> <título>WeChat Voice</título> <enlace rel=hoja de estilo 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(' lista de chat'); navegador.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia( // restricciones: solo se necesita audio para esta aplicación {audio: verdadero}) // Devolución de llamada exitosa. Luego (función (flujo) { rec(flujo }) // Devolución de llamada de error .catch(función (err) { } } else { } función rec(flujo) { mediaRecorder = new MediaRecorder(flujo); ', función (ev) { ev.preventDefault(); this.innerHTML = 'Liberar para finalizar'; this.classList.add('activeBtn'); mediaRecorder.start(); }, false); oSendBtn.addEventListener('touchend', function (ev) { ev.preventDefault(); this.innerHTML = 'Presione para hablar' ; this.classList.remove('activeBtn'); mediaRecorder.stop(); falso); = función (e) { var clipContainer = document.createElement('li'); var audio = document.createElement('audio'); clipContainer.classList.add('item_audio'); clipContainer.innerHTML = ` <div clase = 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 = ventana.URL.createObjectURL(e.data.src = audioURL); oChatList.addEventListener('touchstart', función (ev) { if (ev.srcElement.parentNode.className!== 'item_audio') return; audio.play(); ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode .children[0]) }, falso); }; } }, falso </script></head><body> <div); id=wrap> <encabezado id=encabezado> <div id=izquierda> <i clase=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>¿Soy la persona que más amas? <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>¡Corre, hermano! (Becerro rodante) <span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>No diré mucho aquí Bien, aquí viene un montón de código... <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>Hermano Dabin, ¿por qué eres tan bueno? Me siento como el océano cuando te veo<span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Viejo Niña Hijo, ¿te has enamorado de mí... <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>No, lo soy mareado, tengo ganas de vomitar cuando te veo... <span class=bot></span> <span class=top></span> </div> </li> </ul> </div> <pie de página id=pie de página> <div id=teclado> <i class=material-icons> teclado </i> </div> <div id=sayBtn> <span id=sendBtn class=sendBtn>Presione para hablar</span> < /div> <div id=icon><i class=material-icons> sentimiento_satisfecho </i></div> <div id=add><i class=material-icons> add_circle_outline </i></div> </footer> </div></body></html>Hay muchos puntos a los que prestar atención al implementar la función de grabación de vídeo aquí. Hablemos de ellos uno por uno.
Lo primero,
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia( { audio: verdadero }) // devolución de llamada exitosa .then(function (stream) { rec(stream); }) // Devolución de llamada de error .catch(function (err) { } } else { });Cuando miras algunas interfaces HTML5 para grabar, ves esto
Navigator.getUserMedia()
Tenga cuidado, esta es una norma antigua y ha sido abolida. La nueva es.
navigator.mediaDevices.getUserMedia
El aspecto de voz en HTML5 multimedia ha cambiado varias veces y es muy complicado. Algunas etiquetas ni siquiera se han implementado en un navegador y se marchitaron antes de florecer. No es necesario que te preocupes y no hay necesidad de desperdiciar eso. tiempo. Solo necesitas saber lo que digo. Esto es suficiente, porque sabes que el pasado abandonado no sirve de nada. Si tienes tiempo, también puedes jugar un juego de LOL o King of Glory (aunque yo no). No entiendo la diferencia entre los dos, pero estos dos juegos deberían ser divertidos) Bueno, nunca los he jugado, así que no lo entiendo).
No necesitas entender lo que hay dentro. No necesitas saber qué son las promesas y qué son los flujos de medios. Solo necesitas saber esto.
El código anterior equivale a abrir el grifo (o presionar el botón de grabación de la grabadora), luego tenemos que tener algo para recoger el agua. Podemos usar una olla arrocera (o cinta adhesiva en el caso de una grabadora) para poner. debajo del grifo y observe cómo entra. ci (que significa disparar en nuestra ciudad natal), el siguiente código
mediaRecorder = new MediaRecorder(stream);
El siguiente paso es presionar el botón y todo estará listo. La grabadora correspondiente significa que después de grabar presione el botón para reproducir. Sin embargo, para poder reproducir en nuestro programa, no solo debe tener una cinta, sino también una grabadora. La grabadora es la etiqueta de audio. Si no hay nada fácil de hacer, crearemos una nueva. No hay objetos en este mundo que los programadores no se atrevan a crear nuevos. Si un objeto nuevo no es suficiente, solo hay dos nuevos. El resto del código no tiene ningún defecto más que dar miedo, es simplemente escandaloso.
mediaRecorder.ondataavailable = función (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 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('controles', ''); oChatList.appendChild(clipContainer); window.URL.createObjectURL(e.data); audio.src = audioURL; oChatList.addEventListener('touchstart', función (ev) { if (ev.srcElement.parentNode.className!== 'item_audio') retorno; audio. jugar(); ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode.children[0]) }, FALSO); };De hecho, está grabado y retransmitido.
Bien, ¿es muy simple? Déjame hablar sobre algunos puntos de todo el proyecto:
1. Tener una estructura razonable en el diagrama de corte es un requisito previo para poder realizar las funciones más adelante. Si la estructura está bien hecha, evitará problemas más adelante. Piense en Zhuge Liang, quien construyó la estructura HTML5 antes de que fuera un novato. Hay tres secciones.
2. Una base sólida de js nativo y ES6 puede brindarle diferentes ideas. Por ejemplo, aquí uso la delegación de eventos y el motor de plantillas ES6. Especialmente para la delegación de eventos, sería problemático encontrar nodos si no se usan. Además, sería fácil estropear el código si se repite.
3. Los nuevos conocimientos y tecnologías en realidad no son complicados, de hecho, son muy simples. Si la nueva tecnología no sirve para mejorar las funciones y resolver nuestros problemas, ¿por qué desarrollar nuevas tecnologías? ¿Porque a esos tipos grandes con grandes barbas les preocupa que sus jefes les digan que su carga de trabajo no es suficiente cuando no tienen nada que hacer? La tecnología está ahí para resolver problemas y mejorar nuestras vidas.
4. Este proyecto no funcionará en IOS 11 o inferior, porque este método no es compatible con versiones anteriores a IOS 11.2 y necesita que los desarrolladores de aplicaciones locales de IOS brinden soporte, pero está bien en Android. Y es previsible que dentro de unos años IOS tenga soporte nativo sin proporcionarte soporte, por lo que tu eficiencia en el desarrollo será mucho mayor. No crea que estas tecnologías están muy lejos. HTML5 solo estará disponible comercialmente durante unos 15 años (¿cuántos años se necesitarán para que vue, reaccionar y angular se utilicen a gran escala?). quienes están preparados.
Todavía hay muchos detalles y puntos a los que prestar atención en todo el proyecto. Espero que realmente puedas escribirlo tú mismo, porque entiendes que mi artículo y tu capacidad para usar esta tecnología son dos cosas diferentes. Deseo que todos vayan más allá. más adelante en el camino hasta el final (recuerde volver con frecuencia para leer Ver ^_^).
ResumirLo anterior es la introducción del editor al uso de multimedia Html5 para implementar la función de voz WeChat. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!
Si cree que este artículo le resulta útil, puede reimprimirlo. Indique la fuente, ¡gracias!