Ist es möglich, mit clientseitigem JavaScript von einem Browser auf das Mikrofon (Built-in oder Auxiliary) zuzugreifen?Zugangsmikrofon von einem Browser aus - Javascript
Idealerweise würde das aufgenommene Audio im Browser gespeichert werden. Vielen Dank!
Ja, Sie können.
die API
getUserMedia()verwenden, können Sie rohen Audio-Eingang von Ihrem Mikrofon erfassen.
https://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/
wir Mikrofon Audio als Puffer Hier erfassen getUserMedia() verwendet - Zeitbereich und Frequenzbereich-Schnipsel jeden Puffer gedruckt ist (sichtbar in Browser-Konsole mit einem Treffer Ctrl-Shift-i auf 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>
da dieser Code Mikrofondaten als Puffer macht Sie Fähigkeit WebSockets oder einfach Aggregat in eine Datei zum Download zu streamen hinzufügen könnte mit
Beachten Sie den Aufruf
var audioContext = new AudioContext();
, die seine Verwendung die Web Audio API gibt, die in alle modernen Browser (einschließlich mobilem Browser) gebacken wird eine extrem leistungsstarke Audio-Plattform, von denen Sie in das Mikrofon, sondern ein winziges Fragment Klopfen zu schaffen
Links zu einigen Web Audio API-Dokumentation
Hallo @ scott-Stensland, das ist großartig. Hast du diesen Code geschrieben? Gibt es eine originale Quelle oder ein Repo oder eine Lizenz dafür? Vielen Dank! – binarymax
@binarymax Ja, es ist mein Code ... frei plündern nach Belieben ... Ich habe mir über Tricks gelehrt, während ich https://github.com/scottssland/websocket-streaming-audio schrieb, das Audio vom Server mit Hilfe von Web-Sockets streamt Rendern Sie dann im Browser mit Web Audio API unter Verwendung einer Zwischenschicht zwischen den Netzwerkarbeitern, um den Netzwerkverkehr zu babysitten ... Ich muss diesen Code reaktorieren ;-) da es sich um eine reine Lernübung handelte. –
Was ist ein guter Weg, alles zu lernen das, ich weiß javascritp und dom. Ich weiß nicht, Audio-API und alles, was damit geht wie Puffergröße, Kanäle, Stream usw. –
@poisonlocc Check this out: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ – Brad