A gravação e upload de páginas da web HTML5 para o servidor suporta a função WeChat para PC, Android e IOS

Ao se preparar para criar uma interface de bate-papo baseada na web, você deve ter emoticons, imagens e arquivos carregados. Esqueça o vídeo, a voz ainda é necessária.

Este artigo registra gravação on-line e upload para o servidor usando o Recorder no GitHub em uma página da web.

Este código de amostra oferece suporte para uso em PC, Android e IOS (somente Safari). Se você usar RecordApp, poderá adicionar suporte para IOS (navegador WeChat, miniaplicativo).

É melhor agir uma vez do que ler o código milhares de vezes. Crie um novo arquivo HTML, copie os três trechos de código a seguir no arquivo e clique duas vezes no navegador para abri-lo para teste.

 <!-- Primeiro carregue a biblioteca de gravação js. Observação: você deve clonar js localmente para uso --><meta charset=utf-8 /><script src=https://xiangyuecn.github.io/Recorder/recorder. mp3.min.js></script><input type=button onclick=startRec() value=Iniciar gravação><hr><input type=button onclick=playRec() value=Terminar e reproduzir><input type=button onclick=uploadRec() value=Terminar e carregar><script>var rec;function startRec(){ rec=Recorder();//Usar configuração padrão, formato mp3//Abrir Autorização de microfone para obter recursos relacionados rec.open(function(){ //Iniciar gravação rec.start(); },function(msg,isUserNotAllow){ //O usuário negou permissão ou o navegador não suporta alerta((isUserNotAllow? O usuário negou permissão, :)+incapaz de gravar:+msg });};</script>);

 <script>function uploadRec(){ //Para a gravação e obtém o objeto binário blob do arquivo de gravação Você pode fazer o que quiser rec.stop(function(blob,duration){ /* objeto de arquivo blob, que pode ser lido com. Conteúdo do FileReader ou upload usando FormData Neste exemplo, o arquivo binário é carregado diretamente para upload de aplicativo comum/x-www-form-urlencoded, consulte o exemplo em github*/ var form=new FormData(); form.append(upfile,blob,recorder.mp3); //Não é diferente do formulário comum. O backend recebe o arquivo com o parâmetro upfile e o nome do arquivo é recorder.mp3 //Use ajax para fazer upload diretamente var. xhr=novo XMLHttpRequest(); xhr.open(POST, http://baidu.com/, altere para seu endereço de upload);//Este endereço falso pode ver os dados e o formato da solicitação na rede do console, o resultado da solicitação é irrelevante xhr.onreadystatechange=function ( ){ if(xhr.readyState==4){ alert(xhr.status==200?Upload bem-sucedido: para testar, abra primeiro o console do navegador e depois grave novamente. Na guia rede, você pode ver o upload solicitar dados e formatados); } } xhr.send(form); },function(msg){ alert(falha na gravação:+msg });};</script>

 <script>function playRec(){ //Pare a gravação, obtenha o objeto binário blob do arquivo de gravação, faça o que quiser rec.stop(function(blob,duration){ var audio=document.createElement(audio); audio.controls= true; document.body.appendChild(audio); //É muito simples obter o URL de áudio do blob audio.src=URL.createObjectURL(blob); },function(msg){ alert(falha na gravação:+msg });};</script>

-------------------------------------------------- ----------------------------------

Endereço GitHub: https://github.com/xiangyuecn/Recorder

Teste online: Clique aqui para testar

O gravador é usado para gravação HTML5. É uma biblioteca js pura que suporta a maioria dos navegadores móveis e de PC que implementaram getUserMedia, incluindo o kernel Tencent Android X5 (QQ, WeChat).

A saída de gravação está no formato mp3 por padrão, e o formato wav é opcional (o arquivo de gravação neste formato é muito grande, com suporte limitado para os formatos ogg, webm e amr para qualquer expansão de formato); ).

Compacto: Se não houver requisitos especiais para o tamanho do arquivo de gravação, você pode simplesmente usar o núcleo de gravação + codificador wav. O código-fonte tem menos de 300 linhas e o recorder.wav.min.js compactado tem menos de 4kb. . O MP3 é codificado usando lamejs, e o recorder.mp3.min.js compactado tem 54kb depois que o gzip é ativado.

Como apenas o Safari suporta getUserMedia no IOS (11. Navegador, miniprograma web-view), o RecordApp também oferece melhor suporte para aplicativos híbridos.

Como o RecordApp requer uma conta pública (assinatura) do WeChat para fornecer suporte de gravação JsSDK, o desenvolvimento será mais difícil, mas suporta mais ambientes. O gravador pode ser usado imediatamente. Consulte a tabela abaixo para saber qual deles usar:

* Você pode verificar o código-fonte RecordApp no ​​github, que está no diretório xiangyuecn/Recorder/app-support-sample .

O texto acima é a gravação e upload da página HTML5 para o servidor introduzido pelo editor. Ele suporta a função WeChat para PC, Android e IOS. Espero que seja útil para você. o editor responderá a você 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!