javascript - navegador - title css
Acceso al micrófono desde un navegador-Javascript (2)
Aquí capturamos el audio del micrófono como un búfer usando getUserMedia (): se imprimen los fragmentos de dominio de tiempo y dominio de frecuencia de cada búfer de bucle de evento de audio (se puede ver en la consola del navegador, simplemente presione la tecla F12 o ctrl + shift + i)
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>capture microphone audio into buffer</title>
<script type="text/javascript">
var webaudio_tooling_obj = function () {
var audioContext = new AudioContext();
console.log("audio is starting up ...");
var BUFF_SIZE = 16384;
var audioInput = null,
microphone_stream = null,
gain_node = null,
script_processor_node = null,
script_processor_fft_node = null,
analyserNode = null;
if (!navigator.getUserMedia)
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (navigator.getUserMedia){
navigator.getUserMedia({audio:true},
function(stream) {
start_microphone(stream);
},
function(e) {
alert(''Error capturing audio.'');
}
);
} else { alert(''getUserMedia not supported in this browser.''); }
// ---
function show_some_data(given_typed_array, num_row_to_display, label) {
var size_buffer = given_typed_array.length;
var index = 0;
var max_index = num_row_to_display;
console.log("__________ " + label);
for (; index < max_index && index < size_buffer; index += 1) {
console.log(given_typed_array[index]);
}
}
function process_microphone_buffer(event) {
var i, N, inp, microphone_output_buffer;
microphone_output_buffer = event.inputBuffer.getChannelData(0); // just mono - 1 channel for now
// microphone_output_buffer <-- this buffer contains current gulp of data size BUFF_SIZE
show_some_data(microphone_output_buffer, 5, "from getChannelData");
}
function start_microphone(stream){
gain_node = audioContext.createGain();
gain_node.connect( audioContext.destination );
microphone_stream = audioContext.createMediaStreamSource(stream);
microphone_stream.connect(gain_node);
script_processor_node = audioContext.createScriptProcessor(BUFF_SIZE, 1, 1);
script_processor_node.onaudioprocess = process_microphone_buffer;
microphone_stream.connect(script_processor_node);
// --- enable volume control for output speakers
document.getElementById(''volume'').addEventListener(''change'', function() {
var curr_volume = this.value;
gain_node.gain.value = curr_volume;
console.log("curr_volume ", curr_volume);
});
// --- setup FFT
script_processor_fft_node = audioContext.createScriptProcessor(2048, 1, 1);
script_processor_fft_node.connect(gain_node);
analyserNode = audioContext.createAnalyser();
analyserNode.smoothingTimeConstant = 0;
analyserNode.fftSize = 2048;
microphone_stream.connect(analyserNode);
analyserNode.connect(script_processor_fft_node);
script_processor_fft_node.onaudioprocess = function() {
// get the average for the first channel
var array = new Uint8Array(analyserNode.frequencyBinCount);
analyserNode.getByteFrequencyData(array);
// draw the spectrogram
if (microphone_stream.playbackState == microphone_stream.PLAYING_STATE) {
show_some_data(array, 5, "from fft");
}
};
}
}(); // webaudio_tooling_obj = function()
</script>
</head>
<body>
<p>Volume</p>
<input id="volume" type="range" min="0" max="1" step="0.1" value="0.5"/>
</body>
</html>
Dado que este código expone los datos del micrófono como un búfer, podría agregar la capacidad de transmitir mediante websockets o simplemente agregarlos a un archivo para descargar.
Note la llamada a
var audioContext = new AudioContext();
lo que indica que utiliza la API de audio web, que se integra en todos los navegadores modernos (incluidos los navegadores móviles) para proporcionar una plataforma de audio extremadamente potente, de la que aprovechar el micrófono es solo un pequeño fragmento
Enlaces a alguna documentación de la API de audio web
- Conceptos básicos detrás de la API de audio web
- SO wiki en la API de audio web
- agradables demostraciones de la API de audio web ... algunas con enlaces github
¿Es posible acceder al micrófono (incorporado o auxiliar) desde un navegador usando JavaScript del lado del cliente?
Idealmente, almacenaría el audio grabado en el navegador. ¡Gracias!
Sí tu puedes.
Usando la API
getUserMedia(), puede capturar la entrada de audio sin procesar desde su micrófono.
https://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/