Em última análise, o que eu quero fazer é gravar no microfone do usuário e carregar o arquivo no servidor quando terminar. Até agora, eu consegui fazer um fluxo para um elemento com o seguinte código:
var audio = document.getElementById("audio_preview");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getUserMedia({video: false, audio: true}, function(stream) {
audio.src = window.URL.createObjectURL(stream);
}, onRecordFail);
var onRecordFail = function (e) {
console.log(e);
}
Como passo disso, para gravar em um arquivo?
javascript
html
html5-audio
audio-recording
Fibericon
fonte
fonte
Respostas:
Há uma demonstração de gravação bastante completa disponível em: http://webaudiodemos.appspot.com/AudioRecorder/index.html
Ele permite gravar áudio no navegador e oferece a opção de exportar e baixar o que você gravou.
Você pode ver a fonte dessa página para encontrar links para o javascript, mas para resumir, há um
Recorder
objeto que contém umexportWAV
método e umforceDownload
método.fonte
O código mostrado abaixo é protegido por Matt Diamond e está disponível para uso sob licença MIT. Os arquivos originais estão aqui:
Salve esses arquivos e use
fonte
Atualização agora Chrome também suporta MediaRecorder API de V47. A mesma coisa a ser feita seria usá-lo (supondo que o método de gravação nativo seja mais rápido do que o trabalho alternativo), a API é realmente fácil de usar e você encontrará muitas respostas sobre como fazer upload de um blob para o servidor .
Demo - funcionaria no Chrome e no Firefox, intencionalmente deixado de fora empurrando blob para o servidor ...
Código Fonte
Atualmente, existem três maneiras de fazer isso:wav
[todo o código do cliente, gravação não compactada], você pode conferir -> Recorderjs . Problema: o tamanho do arquivo é muito grande, é necessária mais largura de banda de upload.mp3
[todo o código do cliente, gravação compactada], você pode conferir -> mp3Recorder . Problema: pessoalmente, acho a qualidade ruim, também existe esse problema de licenciamento.como
ogg
[node.js
código cliente + servidor ( ), gravação compactada, horas infinitas de gravação sem travamento do navegador], você pode conferir -> recordOpus , apenas gravação no lado do cliente ou agrupamento de servidor e cliente, a escolha é sua.exemplo de gravação ogg (somente firefox):
Fiddle Demo para gravação de ogg.fonte
Este é um simples gravador e editor de som JavaScript. Você pode experimentá-lo.
https://www.danieldemmel.me/JSSoundRecorder/
Pode baixar aqui
https://github.com/daaain/JSSoundRecorder
fonte
Aqui está um projeto do gitHub que faz exatamente isso.
Ele grava o áudio do navegador no formato mp3 e o salva automaticamente no servidor da web. https://github.com/Audior/Recordmp3js
Você também pode ver uma explicação detalhada da implementação: http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/
fonte
Você pode usar o Recordmp3js do GitHub para atingir seus requisitos. Você pode gravar no microfone do usuário e obter o arquivo como um mp3. Finalmente faça o upload para o seu servidor.
Eu usei isso na minha demonstração. Já existe uma amostra disponível com o código-fonte do autor neste local: https://github.com/Audior/Recordmp3js
A demo está aqui: http://audior.ec/recordmp3js/
Mas atualmente funciona apenas no Chrome e Firefox.
Parece funcionar bem e bem simples. Espero que isto ajude.
fonte
getUserMedia()
só funciona em origens seguras (https, localhost) desde Chrome 47Transmita áudio em tempo real sem aguardar o término da gravação: https://github.com/noamtcohen/AudioStreamer
Isso transmite dados do PCM, mas você pode modificar o código para transmitir mp3 ou Speex
fonte