Czy można uzyskać dostęp do mikrofonu (wbudowanego lub pomocniczego) z przeglądarki przy użyciu JavaScript po stronie klienta?Dostęp do mikrofonu z przeglądarki - Javascript
Idealnie byłoby przechowywać nagrane audio w przeglądarce. Dzięki!
Tak, można.
Używanie
getUserMedia()API, można uchwycić surową wejście audio z mikrofonu.
https://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/
Tu przechwytywania dźwięku mikrofonu jako bufor przy użyciu getUserMedia() - w dziedzinie czasu i częstotliwości fragmentów każdego bufora jest drukowana (widoczny w konsoli przeglądarki przeboju Ctrl-Shift-I na linux)
<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>
Ponieważ kod ten naraża dane mikrofonowe jako bufor można dodać zdolność do strumienia lub po prostu za pomocą WebSockets kruszywo do pliku do pobrania
Zwróć uwagę na wezwanie do
var audioContext = new AudioContext();
co wskazuje jego pomocą Web Audio API który piecze się wszystkimi nowoczesnymi przeglądarkami (w tym przeglądarek mobilnych) w celu zapewnienia niezwykle potężną platformę audio, którego dotknięcie do mikrofonu jest tylko mały fragment
Odnośniki do jakiejś dokumentacji API Web audio
Hi @ Scott-Stensland, to jest świetne. Czy napisałeś ten kod? Czy istnieje oryginalne źródło lub repo lub licencja na to? Dzięki! – binarymax
@binarymax Tak, to jest mój kod ... nie krępuj się, pisząc do woli ... Nauczyłem się powyższych trików podczas pisania https://github.com/scottstensland/websockets-streaming-audio, które przesyła dźwięk z serwera za pomocą websockets do następnie renderuj w przeglądarce za pomocą interfejsu API Web Audio wykorzystując między warstwami warstwę interwiptu, aby opiekować się ruchem sieciowym ... muszę zareagować na ten kod ;-), ponieważ było to ściśle ćwiczenie edukacyjne –
Co to jest dobry sposób na nauczenie się wszystkiego to, ja wiem javascritp i dom. Nie znam interfejsu audio i wszystkiego, co się z nim wiąże, jak rozmiar bufora, kanały, strumień itp. –
@poisonlocc Sprawdź to: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ – Brad