Ir para conteúdo
Chris Martin

gravar áudio no navegador

Recommended Posts

Pessoal, como faz para gravar áudio no navegador, eu pesquisei sobre as pemissões, e essa parte eu tenho, gostaria de saber quais elementos html preciso e como devo fazer com o js de preferencia jquery

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por myknapik
      Estou iniciando a estudar HTML e PHP. E estava pensando. É possível criar um formulário em HTML, abrir no navegador e preenche lo com dados de outra aba?
      Exemplo: aba1 sempre abro com os dados do cliente. No sistema aparece em HTML em formato tabular. Na aba2 abriria um arquivo HTML com um formulário que devo preencher e imprimir com os dados da aba1. 
      É possível importar esses dados pelo PHP?
    • Por Rrec
      Boa noite pessoal, estou com um problema em um script fantástico.
       
      Seguinte, quem quiser visualizar ele está aqui: https://www.radiorec.com.br/teste/
       
      A função do script é: O usuário seleciona a forma que vai querer gravar o áudio, .mp3, .wav ou .ogg.
      Ele clica em Record (é solicitada  permissão de gravar com o microfone);
      Aperta Stop, um player aparece com o áudio gravado para ele escutar e um link temporário para download.
       
      A questão é: Ao invés de gravar o microfone do usuário, eu gostaria de possibilitar o usuário gravar uma rádio stream que eu determinarei.
      No caso, acredito que eu tenha que substituir o "getUserMedia" pelo "link da stream", ou eu coloco tipo o player na mesma página tocando e peço pro script captar o audio que vem do player..
       
      Gente de verdade, tenho conhecimento básico, estou tentando fazer isso há uns dias, mas não acho nada que me ajude..
       
      Quem puder me ajudar ou dar uma luz para onde eu seguir.. muito obrigado, abçs..
       
      o código é:
       
      //webkitURL is deprecated but nevertheless URL = window.URL || window.webkitURL; var gumStream; //stream from getUserMedia() var recorder; //WebAudioRecorder object var input; //MediaStreamAudioSourceNode we'll be recording var encodingType; //holds selected encoding for resulting audio (file) var encodeAfterRecord = true; // when to encode // shim for AudioContext when it's not avb. var AudioContext = window.AudioContext || window.webkitAudioContext; var audioContext; //new audio context to help us record var encodingTypeSelect = document.getElementById("encodingTypeSelect"); var recordButton = document.getElementById("recordButton"); var stopButton = document.getElementById("stopButton"); //add events to those 2 buttons recordButton.addEventListener("click", startRecording); stopButton.addEventListener("click", stopRecording); function startRecording() { console.log("startRecording() called"); /* Simple constraints object, for more advanced features see https://addpipe.com/blog/audio-constraints-getusermedia/ */ var constraints = { audio: true, video:false } /* We're using the standard promise based getUserMedia() https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia */ navigator.mediaDevices.getUserMedia(constraints).then(function(stream) { __log("getUserMedia() success, stream created, initializing WebAudioRecorder..."); /* create an audio context after getUserMedia is called sampleRate might change after getUserMedia is called, like it does on macOS when recording through AirPods the sampleRate defaults to the one set in your OS for your playback device */ audioContext = new AudioContext(); //update the format document.getElementById("formats").innerHTML="Format: 2 channel "+encodingTypeSelect.options[encodingTypeSelect.selectedIndex].value+" @ "+audioContext.sampleRate/1000+"kHz" //assign to gumStream for later use gumStream = stream; /* use the stream */ input = audioContext.createMediaStreamSource(stream); //stop the input from playing back through the speakers //input.connect(audioContext.destination) //get the encoding encodingType = encodingTypeSelect.options[encodingTypeSelect.selectedIndex].value; //disable the encoding selector encodingTypeSelect.disabled = true; recorder = new WebAudioRecorder(input, { workerDir: "js/", // must end with slash encoding: encodingType, numChannels:2, //2 is the default, mp3 encoding supports only 2 onEncoderLoading: function(recorder, encoding) { // show "loading encoder..." display __log("Loading "+encoding+" encoder..."); }, onEncoderLoaded: function(recorder, encoding) { // hide "loading encoder..." display __log(encoding+" encoder loaded"); } }); recorder.onComplete = function(recorder, blob) { __log("Encoding complete"); createDownloadLink(blob,recorder.encoding); encodingTypeSelect.disabled = false; } recorder.setOptions({ timeLimit:120, encodeAfterRecord:encodeAfterRecord, ogg: {quality: 0.5}, mp3: {bitRate: 160} }); //start the recording process recorder.startRecording(); __log("Recording started"); }).catch(function(err) { //enable the record button if getUSerMedia() fails recordButton.disabled = false; stopButton.disabled = true; }); //disable the record button recordButton.disabled = true; stopButton.disabled = false; } function stopRecording() { console.log("stopRecording() called"); //stop microphone access gumStream.getAudioTracks()[0].stop(); //disable the stop button stopButton.disabled = true; recordButton.disabled = false; //tell the recorder to finish the recording (stop recording + encode the recorded audio) recorder.finishRecording(); __log('Recording stopped'); } function createDownloadLink(blob,encoding) { var url = URL.createObjectURL(blob); var au = document.createElement('audio'); var li = document.createElement('li'); var link = document.createElement('a'); //add controls to the <audio> element au.controls = true; au.src = url; //link the a element to the blob link.href = url; link.download = new Date().toISOString() + '.'+encoding; link.innerHTML = link.download; //add the new audio and a elements to the li element li.appendChild(au); li.appendChild(link); //add the li element to the ordered list recordingsList.appendChild(li); } //helper function function __log(e, data) { log.innerHTML += "\n" + e + " " + (data || ''); }  
    • Por Naldinhosi
      Pessoal bom dia, peço desculpas se já existe um post referente a esse problema, caso haja me informe por gentileza  se não...
       
      Estou concluindo o desenvolvimento de um site responsive, então resolvi atualizar meus navegadores, quando entro no site fica meio desorganizado o menu superior entre outras informações, então eu retiro o zoom da página para 90% e o site fica tudo ok, gostaria de saber se alguém esta passando por isso e como resolver, ou errei em alguma coisa referente ao meu código. ficarei grato e obrigado.
    • Por Pitag346
      Olá pessoal, beleza? 
      Estou com um pequeno problema...
      Tenho um servidor streaming onde toca alguns audios, mas não é sempre que o navegador executa o audio, como assim ?
      Tipo as vezes eu acesso o site e toca normalmente o que está na tag <audio> ... Mas as vezes eu acesso e não toca...
      Sei que consigo sanar isso com javascript ou jquery, mas não tenho esse conhecimento.
      OBS: O problema não é meu servidor pq se eu acessa-lo diretamente ele funciona sem parar em nenhum momento. 
       
      Meu código html:
       
      <audio id="audio" autoplay="autoplay"> <source src="https://streaming.meuservidor.com.br/;" type="audio/mpeg" /> <source src="https://streaming.meuservidor.com.br/stream.ogg" type="audio/ogg" /> </audio> Um detalhe importante, mesmo quando estava com somente 1 source src, acontecia isso, pensei q era culpa da velocidade da conexão mas não é acredito eu.
      Obrigado amigos.
       
       
       
    • Por RSGabriel
      <audio controls >
                  <source src="local da musica/audio" type="audio/mpeg" />
      </audio>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.