Com o surgimento de aplicativos sociais como o WeChat, o bate-papo por voz se tornou um recurso obrigatório para muitos aplicativos, desde aplicativos sociais que usam o bate-papo por voz como função principal até aplicativos de comércio eletrônico com atendimento ao cliente por voz e funções de garçom de loja. o bate-papo tornou-se indispensável.
No entanto, muitas pessoas sentem que a voz do lado da web está longe de nós, e isso é mais trabalho de aplicativos locais. Na verdade, esse não é o caso. Com o desenvolvimento do HTML5, a função de voz tornou-se gradualmente uma das. funções obrigatórias no front-end.
Por que devemos aprender a voz HTML5?1. A especificação HTML5 está avançando e as atualizações dos telefones celulares aceleraram as atualizações do sistema operacional. A função de voz se tornará uma das principais tarefas do front-end, assim como a tela atual. A implementação front-end do desenvolvimento da função de voz é mais rápida e economiza mais mão de obra (isso significa economizar dinheiro para o chefe, e economizar dinheiro para o chefe significa aumentar seu salário)
2. Mesmo que os aplicativos locais agora tenham funções de voz, estar familiarizado com as várias armadilhas da interação de voz front-end pode fazer com que seus colegas tenham um relacionamento mais harmonioso e uma colaboração mais tranquila, em vez de brigarem entre si.
3. Compreender as novas tecnologias pode impedir entrevistas e, em segundo lugar, você pode prever tendências tecnológicas, de modo que não aprenderá um monte de habilidades para matar dragões ou seguirá as regras. É mais propício para manter seu conhecimento e competitividade profissional. o topo da cadeia alimentar.
4. A maioria das pessoas no front-end tem mal-entendidos sobre a função de voz. Eles pensam que a função de voz é apenas a tag de áudio HTML5.
Sem tanta tinta, vamos apenas desenvolver um pequeno projeto e tudo ficará claro. Vejamos primeiro as renderizações.
área de transferência.png
A lógica de negócios é muito simples,
É exatamente igual ao nosso método WeChat. Quando você pressiona, a palavra será liberada para terminar e a fala será gravada. Quando você soltar, ela será pressionada para terminar e a voz será enviada para o. outra parte ao mesmo tempo.
Vamos fazer isso passo a passo. Primeiro, vamos completar uma página HTML.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=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>Sou a pessoa que você mais ama <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>Corra, irmão! (Bezerro rolante) <span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Não direi muito aqui Ok, aqui vem um monte 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>Irmão Dabin, por que você é tão bom? Eu me sinto como o oceano quando vejo você<span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Velho menina Filho, você se apaixonou por mim... <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>Não, eu sou enjoado, tenho vontade de vomitar quando vejo você... <span class=bot></span> <span class=top></span> </div> </li> </ul> </div> <rodapé id=footer> <div id=keyboard> <i class=material-icons> teclado </i> </div> <div id=sayBtn> <span id=sendBtn class=sendBtn>Pressione para falar</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>
parte css,
*{ margem: 0; preenchimento: 0;}ul li{ estilo de lista: nenhum;}html,corpo{ altura: 100%; -face { font-family: 'Ícones de materiais'; estilo da fonte: normal; url(../css/iconfont/MaterialIcons-Regular.eot); /* Para IE6-8 */ src: local('Ícones de materiais'), local('MaterialIcons-Regular'), url(../css/ formato iconfont/MaterialIcons-Regular.woff)('woff2'), url(../css/iconfont/MaterialIcons-Regular.woff2) format('woff'), url(../css/iconfont/MaterialIcons-Regular.ttf) format('truetype' } .material-icons { font-family: 'Ícones de materiais' peso da fonte: normal; estilo da fonte: tamanho da fonte: 32px; /* Tamanho de ícone preferido */ display: inline-block; /* line-height: 0.01rem; direção: ltr; /* Suporte para todos os navegadores WebKit */ -webkit-font-smoothing: antialiased; optimLegibility; /* Suporte para Firefox */ -moz-osx-font-smoothing: escala de cinza; /* Suporte para IE */ font-feature-settings: 'liga'; : coluna; justificar-conteúdo: espaço entre; altura: 100%;}#header{ altura: 46px; #363539; display: flex; alinhar itens: centro; justificar-conteúdo: espaço entre;}#cabeçalho #esquerda{ exibição: alinhar itens: centro; 100px;}#header #right{ display: flex; alinhar-items: center: 100px; justificar-content: flex-end;}#header #right i{ padding-right: 6px;}#header #mid{ text-align: center; flex: 1;}#contentWrap{ flex: 1; : flex-start; justificar-conteúdo:flex-end;}.item_you{ display: flex-itens: flex-start; justificar-content:flex-start;}.avatar{ largura: 40px; altura: 40px;}.avatar img{largura: 100%;}.item_me .chatContent{ preenchimento: 10px fundo da borda: #a0e75a; : 1px sólido #6fb44d; margem direita: 15px; 5px; posição: relativa;}.chatContent span{largura:0; font-size:0; style:solid tracejado border-color: transparente transparente transparente #6fb44d; .chatContent span.top{ border-width:8px; border-style:solid tracejado border-color:transparent transparente #a0e75a ; #a0e75a; borda: 1px sólido #6fb44d; 15px; border-radius: 5px; posição: relativo;} .item_you .chatContent span.bot{ border-width:8px; top:10px;}.item_you .chatContent span.top{ border-width:8px; tracejado tracejado; border-color:transparent #a0e75a transparente left:-15px; border-top: 1px solid display #d7d7d8; : flex; alinhar itens: centro cor: #7f8389; espaço ao redor;}#sayBtn{ flex: 1; display: flex; margem: 0 5px; preenchimento: 8px; #f4f5f6;borda:1px sólido #bec2c1;raio da borda: 5px; centro;}.activeBtn{ exibição: bloco; flex: 1; preenchimento: centro;}.item_audio .chatContent{ preenchimento: 6px; fundo: #fff; borda: 1px sólido #999; margem direita: 15px; posição: relativa; largura mínima: 120px; altura mínima: 20px;}.item_audio .chatContent span.bot{ border-width:8px; #999; direita:-17px; topo:10px;}.item_audio .chatContent span.top{ border-width:8px; border-style:solid tracejado border-color:transparent transparente transparente #fff ; ; tamanho da fonte: 22px;}.redDot{ fundo: #f45454; 8px; altura: 8px; margem direita: 10px;} Aqui gostaria de mencionar dois pontos de atenção:Parte 1.html:
Para evitar problemas, não cortei a imagem no nível de pixel. Para evitar problemas, usei diretamente ícones SVG.
https://material.io/tools/icons/?style=outline
Parte 2.css: use layout flexível. Eu só quero explicar a função Html5, para que o flex não escreva o método de escrita de compatibilidade. Além disso, preste atenção ao método de escrita da parte do cabeçalho do aplicativo, que é muito comumente usado.
Vamos falar sobre a parte principal do js.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=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( // restrições - apenas áudio necessário para este aplicativo { audio: true }) // Retorno de chamada de sucesso .then(function (stream) { rec(stream }) // Retorno de chamada de erro .catch(function (err) { } } else { } function rec(stream) { mediaRecorder = new MediaRecorder(stream); ', function (ev) { ev.preventDefault(); this.innerHTML = 'Liberar para finalizar'; this.classList.add('activeBtn'); mediaRecorder.start(); false); oSendBtn.addEventListener('touchend', function (ev) { ev.preventDefault(); this.innerHTML = 'Pressione para falar' ; this.classList.remove('activeBtn'); mediaRecorder.stop(); = função (e) { var clipContainer = document.createElement('li'); var audio = document.createElement('audio'); 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); oChatList.addEventListener('touchstart', function (ev) { if (ev.srcElement.parentNode.className!== 'item_audio') return; audio.play(); ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode .crianças[0]) }, falso }; } }, falso); 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>Sou a pessoa que você mais ama <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>Corra, irmão! (Bezerro rolante) <span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Não direi muito aqui Ok, aqui vem um monte 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>Irmão Dabin, por que você é tão bom? Eu me sinto como o oceano quando vejo você<span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Velho menina Filho, você se apaixonou por mim... <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>Não, eu sou enjoado, tenho vontade de vomitar quando vejo você... <span class=bot></span> <span class=top></span> </div> </li> </ul> </div> <rodapé id=footer> <div id=keyboard> <i class=material-icons> teclado </i> </div> <div id=sayBtn> <span id=sendBtn class=sendBtn>Pressione para falar</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>Há muitos pontos a serem observados ao implementar a função de gravação de vídeo. Vamos falar sobre eles um por um.
A primeira coisa,
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia ({áudio: verdadeiro}) // Retorno de chamada de sucesso .then(function (stream) { rec(stream); }) // Retorno de chamada de erro .catch(function (err) { } } else { });Quando você olha algumas interfaces HTML5 para gravação, você vê isso
Navigator.getUserMedia()
Tenha cuidado. Este é um padrão antigo e foi abolido.
navigator.mediaDevices.getUserMedia
O aspecto da voz na multimídia HTML5 mudou várias vezes e é muito confuso. Algumas tags nem foram implementadas em um navegador e murcharam antes de florescer. tempo. Você só precisa saber o que eu digo. Isso é o suficiente, porque você sabe que o passado abandonado não serve para nada. Se você tiver tempo, é melhor jogar LOL ou King of Glory (embora eu não tenha). Não entendo a diferença entre os dois, mas esses dois jogos devem ser divertidos) Bem, nunca joguei, então não entendo).
Você não precisa entender o que está dentro. Você não precisa saber o que são as promessas e o que são os fluxos de mídia.
O código acima equivale a abrir a torneira (ou apertar o botão de gravação do gravador), então temos que ter algo para pegar a água. Podemos usar uma panela elétrica de arroz (ou fita adesiva no caso de um gravador) para colocar. coloque-o sob a torneira e observe-o entrar. ci (que significa filmar em nossa cidade natal), o seguinte código
mediaRecorder = new MediaRecorder(stream);
O próximo passo é pressionar o botão e tudo estará pronto. O gravador correspondente significa que após a gravação pressione o botão para reproduzir. Porém, para reproduzir nosso programa, você não deve ter apenas uma fita, mas também um gravador. . O gravador é a tag de áudio. Se não houver nada fácil de fazer, criaremos uma nova. Não há objetos neste mundo que os programadores não ousem criar. Se um novo objeto não for suficiente, existem apenas dois novos. O resto do código não tem nenhuma falha além de ser assustador, é simplesmente ultrajante.
mediaRecorder.ondataavailable = função (e) { var clipContainer = document.createElement('li'); 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', function (ev) { if (ev.srcElement.parentNode.className!== 'item_audio') return; play(); ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode.children[0]) }, falso);Na verdade, é gravado e transmitido.
OK, é muito simples? Deixe-me falar sobre alguns pontos de todo o projeto:
1. Ter uma estrutura razoável no diagrama de corte é o pré-requisito para você executar as funções mais tarde. Se a estrutura for bem feita, isso evitará problemas mais tarde. Existem três seções.
2. Uma base sólida de js nativo e ES6 pode fornecer ideias diferentes. Por exemplo, eu uso delegação de eventos e o mecanismo de modelo ES6 aqui. Especialmente para delegação de eventos, seria problemático encontrar nós se não fossem usados. Além disso, seria fácil bagunçar o código se ele fosse repetido.
3. Na verdade, os novos conhecimentos e tecnologias não são complicados. Na verdade, são muito simples. Se a nova tecnologia não melhorar as funções e resolver os nossos problemas, então porquê desenvolver novas tecnologias? Porque aqueles marmanjos barbudos ficam preocupados em ouvir dos chefes que sua carga de trabalho não é suficiente quando não têm nada para fazer? A tecnologia existe para resolver problemas e tornar nossas vidas melhores.
4. Este projeto não funcionará no IOS 11 ou inferior, porque esse método não é compatível antes do IOS 11.2 e você precisa que os desenvolvedores de aplicativos locais do IOS forneçam suporte, mas está OK no Android. E é previsível que em alguns anos o IOS terá suporte nativo sem fornecer suporte, então sua eficiência de desenvolvimento será muito maior. Não pense que essas tecnologias estão distantes. O HTML5 só estará disponível comercialmente por cerca de 15 anos (quantos anos serão necessários para que vue, react e angular sejam usados em larga escala?). que estão preparados.
Ainda há muitos detalhes e pontos a serem observados em todo o projeto. Espero que vocês possam realmente digitá-los sozinhos, porque vocês entenderam meu artigo e sua capacidade de usar essa tecnologia são duas coisas diferentes. mais adiante no caminho para o front-end (lembre-se de voltar sempre para ler Veja ^_^).
ResumirO texto acima é a introdução do editor ao uso de multimídia HTML5 para implementar a função de voz WeChat. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!
Se você acha que este artigo é útil para você, fique à vontade para reimprimi-lo, indique a fonte, obrigado!