Capturando a Voz

[Cassius Correa 0]

Caros. Estou com um problema.

 

Tenho que fazer um sistema que Grave a Voz da pessoa e no final una vários arquivo em um só.

 

Eu no momento estou utilizando PHP, e para fazer a captura do áudio o HTML5 e Javascript. Para isso estou API getUserMedia.

 

Bom eu estou conseguindo, capturar o audio, executar a lista de áudios capturados, e a minha dificuldade e enviar esses arquivos para uma pasta do servidor para que eu possa criar a playlist que ira executar os arquivos em um só.

 

Esse projeto é extremamente grande e preciso achar soluções praticas. Essas que eu encontrei estão me ajudando mas não achei uma maneira de avançar mais alem.Então se alguem tiver o conhecimento em Java ou ate plugins em flash, que possa fazer isso. Me ajude.

 

Utilizando a Biblioteca https://github.com/mattdiamond/Recorderjs

 

em javascript inline

  var audio_context;
  var recorder;

  function startUserMedia(stream) {
    var input = audio_context.createMediaStreamSource(stream);
    input.connect(audio_context.destination);
    recorder = new Recorder(input);
  }

  function startRecording() {
    recorder && recorder.record();
  }

  function stopRecording() {
    recorder && recorder.stop();
    createDownloadLink();    
    recorder.clear();
  }
function upload(blobOrFile) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'core.php', true);
    xhr.onload = function (e) {
        var result = e.target.result;
    };
    xhr.send(blobOrFile);
}
  function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
      var url = URL.createObjectURL(blob);
	  upload(blob); // Aqui ele deveria enviar o arquivo de audio mas não envia
      var li = document.createElement('div');
      var au = document.createElement('audio');
      var hf = document.createElement('a');
      au.controls = true;
      au.src = url;
      hf.href = url;
      hf.download = new Date().toISOString() + '.wav';
      hf.innerHTML = hf.download;
      li.appendChild(au);
      li.appendChild(hf);
      recordingslist.appendChild(li);
    });
  }

  window.onload = function init() {
    try {
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
      window.URL = window.URL || window.webkitURL;
      
      audio_context = new AudioContext;
    } catch (e) {
      alert('Seu browser não tem suporte, para a gravação');
    }
    navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
    });
  };
  
    function vidplay() {
       var video = document.getElementById("karaoke");
       var button = document.getElementById("bt_grava");
       if (video.paused) {
          video.play();
		  startRecording();
		  button.src = "../img/player/pause.png";
		  document.getElementById("js_rec").style.display = "block";
		  document.getElementById("bt_marca").style.display = "block";		  
       } else {
		  stopRecording();
          video.pause();
          button.src = "../img/player/continuar.png";
		  document.getElementById("ls_tempo").innerHTML += "<a href='javascript:ir_tempo(" + video.currentTime + ")'>" + video.currentTime + "</a><br />";
		  document.getElementById("js_rec").style.display = "none";
		  document.getElementById("bt_marca").style.display = "none";
       }
    }

    function tempo() {
        var video = document.getElementById("karaoke");
		stopRecording();
		startRecording();
		var tempo = video.currentTime;
        document.getElementById("ls_tempo").innerHTML += "<a href='javascript:ir_tempo(" + tempo + ")'>" + tempo + "</a><br />";
    } 
	function ir_tempo(x) {
        var video = document.getElementById("karaoke");
        video.currentTime = x;
		video.play();
    } 

core.php

	foreach($_FILES as $arquivo){
		move_uploaded_file($arquivo['tmp_name'], "arquivo/".md5(date("Ymdhsi"))."teste.wav");

grava.html

<img src="gravar.png" name="bt_grava" width="280" height="80" id="bt_grava" onclick="vidplay()" style="cursor:pointer;"/>
<img src="marcar_ponto.png" name="bt_marca" width="280" height="80" id="bt_marca" onclick="tempo()" />

Estou utilizando o Google Chrome pro projeto, e será o único navegador permitido.

 

Espero que alguém possa me ajudar

[JCMais 75]

function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
        var url = URL.createObjectURL(blob);
        upload(blob); // Aqui ele deveria enviar o arquivo de audio mas não envia
        var li = document.createElement('div');
        var au = document.createElement('audio');
        var hf = document.createElement('a');
        au.controls = true;
        au.src = url;
        hf.href = url;
        hf.download = new Date().toISOString() + '.wav';
        hf.innerHTML = hf.download;
        li.appendChild(au);
        li.appendChild(hf);
        recordingslist.appendChild(li);
    });
}

Tente :seta:

 

function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
        var url = URL.createObjectURL(blob);
        var formData = new FormData();
        form.append( 'file', blob, 'nome-do-arquivo.wav' );
        upload( form );
        var li = document.createElement('div');
        var au = document.createElement('audio');
        var hf = document.createElement('a');
        au.controls = true;
        au.src = url;
        hf.href = url;
        hf.download = new Date().toISOString() + '.wav';
        hf.innerHTML = hf.download;
        li.appendChild(au);
        li.appendChild(hf);
        recordingslist.appendChild(li);
    });
}

 

E verifique o que o PHP recebe nas arrays $_FILES e $_POST.

[Cassius Correa 0]

Deu certo. JCMais

Só que quando o arquivo é muito grande. Ele teria que fazer um loading... da transferência.

[JCMais 75]

Para isso você vai precisar de um dos eventos que o Xhr disponbiliza:

 

xhr.upload.addEventListener( 'progress', uploadProgress, false );

function uploadProgress ( evt ) {
    
    if ( evt.lengthComputable ) {

        var porcentagemCompleta = evt.loaded * 100 / evt.total | 0;
        console.log( porcentagemCompleta + '%' );
    } else {
        console.log( 'Erro.' );
    }
}

 

Consulte a especificação para mais informações: https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html