是否可以使用客户端 JavaScript 从浏览器访问麦克风（内置或辅助）？
理想情况下，它将录制的音频存储在浏览器中。谢谢！
在这里，我们使用 getUserMedia() 将麦克风音频捕获为 Web Audio API 事件循环缓冲区...打印每个音频事件循环缓冲区的时域和频域片段（可在浏览器控制台中查看，只需按 F12 键或 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) { // invoked by event loop
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"/>
<button onclick="webaudio_tooling_obj()">Listen to mic</button>
</body>
</html>
由于此代码将麦克风数据公开为缓冲区，因此您可以添加使用 websockets 进行流式传输的功能，或者简单地将每个事件循环缓冲区聚合到一个怪物缓冲区中，然后将怪物下载到文件中
注意致电
var audioContext = new AudioContext();
这表明它使用Web Audio API，该API已融入所有现代浏览器（包括移动浏览器）中，以提供极其强大的音频平台，其中敲击麦克风只是一个很小的片段......注意由于此演示将每个事件循环缓冲区写入浏览器控制台日志（仅用于测试），因此 CPU 使用率会上升，因此即使您将其修改为将音频流式传输到其他地方，实际使用的资源消耗也少得多
一些 Web Audio API 文档的链接
是的，你可以。
使用
API，您可以从麦克风捕获原始音频输入。getUserMedia()
在安全的环境中，查询设备。
getUserMedia() 是一个强大的功能，只能在安全的情况下使用 上下文；在不安全的上下文中， navigator.mediaDevices 未定义， 阻止访问 getUserMedia()。简而言之，安全上下文是 使用 HTTPS 或 file:/// URL 方案加载的页面，或加载的页面 来自本地主机。
async function getMedia(constraints) {
let stream = null;
try {
stream = await navigator.mediaDevices.getUserMedia(constraints);
console.log(stream)
} catch(err) {
document.write(err)
}
}
getMedia({ audio: true, video: true })https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
这是一个简单的方法：
//event:
const micButtonClicked = () => {
//check the access:
isMicrophoneAllowed(isAllowed => {
if(isAllowed)
record();
else
navigator.mediaDevices.getUserMedia({audio: true})
.then(stream => record())
.catch(err => alert('need permission to use microphone'));
});
}
//isMicrophoneAllowed:
const isMicrophoneAllowed = callback => {
navigator.permissions.query({name: 'microphone'})
.then(permissionStatus => Strings.runCB(callback, permissionStatus.state === 'granted'));
}
//record:
const record = () => {
// start recording...
}
来自太平洋附近被盗土地的你好。 Scott Stensland 在 2015 年发布的答案在 2024 年不再运行。它会在控制台中产生错误。 我查看了该线程上的其他回复，但它们似乎没有足够的记录来追查。 仅供将来访客参考。
我找到了一个更新的解决方案并对其进行了测试。
https://www.stephengarside.co.uk/blog/getusermedia-microphone-example/
斯蒂芬·加赛德 | 2019 年 11 月 25 日星期一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<audio id="audioCapture"></audio>
<button onclick=audioCapture.Init()>
start microphone
</button>
<p style="font-size: 42pt;">
This is a blank page for live captions like CNN video.
</p>
<script type="text/javascript">
var audioCapture = (function ()
{
var init = function ()
{
initCapture();
};
function initCapture()
{
var constraints = { audio: true, video: false };
navigator.mediaDevices.getUserMedia(constraints).then(function (stream)
{
var audio = document.getElementById('audioCapture');
audio.srcObject = stream;
audio.play();
}).catch(function (err)
{
console.log(err);
});
}
return {
Init: init
}
})();
</script>
</body>
</html>