I need to capture audio from the microphone and write to file. Send to PHP server. How do I, in the examples I saw here, did not notice how to record the sound files.
Capturing audio via microphone via JS or HTML
8
asked by anonymous 30.04.2014 / 23:31
2 answers
4
This can be done through Media Capture and Streams when supported (Firefox, Chrome and Opera support , Internet Explorer, I'm afraid not yet).
First, look for the getUserMedia function (some browsers / browser versions may use a slightly different name, but the functionality is the same):
var gum = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
Next, you need permission from the user to access your devices (microphone, but also camera or others):
function sucesso(localMediaStream) { ... }
function erro(e) { ... }
gum({ video:false, audio:true }, sucesso, erro);
Source: this article
> If you grant this permission, you will have access to a MediaStream object. Usually you would associate this stream with a <audio> element (to display back to the user) or use WebRTC to send the stream audio to another user (such as a phone), but in that case, what you want is to write to the server, right?
One option is to use the Recorder.js library. I'll show you how to send the write to the server in WAV format, based on the in this example of your own library and in this answer in SOen :
var recorder = null;
var AC = window.AudioContext || window.webkitAudioContext;
var audio_context = new AC();
function sucesso(localMediaStream) {
var input = audio_context.createMediaStreamSource(localMediaStream);
input.connect(audio_context.destination);
recorder = new Recorder(input);
recorder.record();
}
// Quando quiser parar de gravar e enviar; associe essa função a um botão, por exemplo
function enviar() {
recorder.stop();
recorder.exportWAV(function (blob) {
// Envia ao servidor usando Ajax (assíncrono)
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload.php', true);
xhr.send(blob);
});
}
I can not test this solution at this time (1. my computer does not have a microphone, 2. I would need to test the receive on the server side), but as soon as I can put a concrete example put here.
P.S. I believe that Internet Explorer offers an alternative way of doing this (I know they have their own proprietary features), but I do not know any of them.
01.05.2014 / 02:23
0
I'm using these below, but I can not pause, only writes WAV (large file size) and does not always open the machine's Microphone.
<html>
<head>
<meta name='author' content='Sajith Amma' />
<script src='jquery.min.js'> </script>
<script src='jRecorder.js'> </script>
<!--<title>jRecorder Example</title> -->
<style>
li {display:inline; margin-right:10px;}
</style>
</head>
<body>
<script>
$.jRecorder({
host : 'http://eficazlaudos.com/laudo_voz/acceptfile.php?filename=".$row2['id_lista_trab'].".wav&id_lanca=h71' , //replace with your server path please
callback_started_recording: function(){callback_started(); },
callback_stopped_recording: function(){callback_stopped(); },
callback_activityLevel: function(level){callback_activityLevel(level); },
callback_activityTime: function(time){callback_activityTime(time); },
callback_finished_sending: function(time){ callback_finished_sending() },
swf_path : 'jRecorder.swf',
});
</script>
</div>
<div style='background-color: #eeeeee;border:1px solid #cccccc'>
Time: <span id='time'>00:00</span>
</div>
<div>
Level: <span id='level'></span>
</div>
<div id='levelbase' style='width:200px;height:20px;background-color:#ffff00'>
<div id='levelbar' style='height:19px; width:2px;background-color:red'>
</div>
</div>
<div>
Status: <span id='status'></status>
</div>
<div>
<input type='button' id='record' value='Gravar' style='color:red'>
<!--
<p>
This Record button trigger the record event. See the javascript example in the bottom of the page. (View Source in your browser).
<pre>
$('#record').click(function() {
$.jRecorder.record(30); //record up to 30 sec and stops automatically
});
</pre>
</p>
<hr/>
-->
<input type='button' id='stop' value='Parar'>
<!--
<p>
This Stop button trigger the stop record event.
<pre>
Onclick of this button trigger $.jRecorder.sendData() which send the data to the Server
</pre>
</p>
<hr/>
-->
<input type='button' id='send' value='Enviar voz'>
<!--
<p>This SendData button trigger the sendData event to flash to send the wav data to Server (configured in the host parameter).
<hr/>
<pre>
$('#stop').click(function(){
$.jRecorder.stop();
});
</pre>
</p>
<hr/>
-->
</div>
<!--
<p>
Time area is used to update the time. There is an event Listener which update the recording time dynamically.
<pre>
callback_activityTime: function(time){callback_activityTime(time); //see the initialisation
//function callback
function callback_activityTime(time) {
$('#time').html(time);
}
</pre>
</p>
-->
</body>
</html>
<script type='text/javascript'>
$('#record').click(function(){
$.jRecorder.record(30);
});
$('#stop').click(function(){
$.jRecorder.stop();
});
$('#send').click(function() {
$.jRecorder.sendData();
});
function callback_finished() {
$('#status').html('Recording is finished');
}
function callback_started() {
$('#status').html('Recording is started');
}
function callback_error(code) {
$('#status').html('Error, code:' + code);
}
function callback_stopped() {
$('#status').html('Stop request is accepted');
}
function callback_finished_recording() {
$('#status').html('Recording event is finished');
}
function callback_finished_sending() {
$('#status').html('File has been sent to server mentioned as host parameter');
}
function callback_activityLevel(level) {
$('#level').html(level);
if(level == -1) {
$('#levelbar').css('width', '2px');
} else {
$('#levelbar').css('width', (level * 2)+ 'px');
}
}
function callback_activityTime(time) {
//$('.flrecorder').css('width', '1px');
//$('.flrecorder').css('height', '1px');
$('#time').html(time);
}
</script>
21.05.2014 / 17:39