navigator.getUserMedia（）音频录制 - 麦克风设置HOWTO音量输入电平？ [英] navigator.getUserMedia() audio recording - howto set volume input level of microphone?

问题描述

的 navigator.getUserMedia（....）调用可以在一些现代浏览器可以用来记录在Javascript音频。

有没有办法来调整/设置麦克风的输入音量？

这个设置并不总是最优的。有时，麦克风被设置为只在一个非常非常低的输入量记录。当然，用户可以手动调整在他的系统的输入音量水平，但我大部分的用户可能缺乏足够的知识来做到这一点。因此，这将是最好的，我可以动态地调整里面非常的JavaScript应用程序，它通过 navigator.getUserMedia（....）的方式记录数据的麦克风音量？

是否有解决方案在那里影响麦克风的这个输入音量？

解决方案

的网络音频API 允许您更改麦克风的输入流中。

下面是一个例子，它展示了如何转换 MediaStream可另一个 MediaStream可，但与能力动态更改音量。如果你只是想要播放音频，则可以更改 gainNode.connect（DEST）到 gainNode.connect（ctx.destination）并删除使用 DEST 变量两个其他行。

\r

\r

如果（！navigator.getUserMedia）{\r
    navigator.getUserMedia = navigator.webkitGetUserMedia ||\r
        navigator.mozGetUserMedia;\r
}\r
navigator.getUserMedia（{\r
    音频：真\r
}，功能（流）{\r
    VAR CTX =新AudioContext（）;\r
    无功源= ctx.createMediaStreamSource（流）;\r
    变种DEST = ctx.createMediaStreamDestination（）;\r
    变种gainNode = ctx.createGain（）;\r
\r
    source.connect（gainNode）;\r
    gainNode.connect（DEST）;\r
    的document.getElementById（'量'）。=平变化功能（）{\r
        gainNode.gain.value = THIS.VALUE; // 0和1之间的任何数。\r
    };\r
    。gainNode.gain.value =的document.getElementById（'量'）值;\r
    \r
    //例：播放音频\r
    //或者，如果你使用WebRTC技术，使用peerConnection.addStream（dest.stream）;\r
    新的音频（URL.createObjectURL（dest.stream））播放（）;\r
\r
    //存储在一个全局变量中的源和目标\r
    //为了避免丢失的音频垃圾收集。\r
    window.leakMyAudioNodes = [源地址];\r
}，功能（E）{\r
    警报（E）; // TODO：处理错误。\r
}）;\r
\r
//在演示中唯一的：\r
的document.getElementById（'量'）。=平变化功能（）{\r
    警报（请使用此之前提供访问​​microhone。'）;\r
};

\r

音量：LT;输入类型=范围ID =体积最小= 0最大= 1值= 1步= 0.01 GT;

\r

\r

\r

请注意：通过堆栈段的现场演示并没有在Chrome中工作，因为getUserMedia似乎不起作用沙盒帧。如果您使用的浏览器，尝试在片段： https://robwu.nl/s/mediasource-变化volume.html

The navigator.getUserMedia(....) call can be used in some modern browser to record audio in Javascript.

Is there a way to adjust/set the input volume level of the microphone?

The setting for this is not always optimal. Sometimes the microphone is set to record only at a very very low input volume. Sure the user could adjust manually the input volume level in his system, but most of my users might lack the knowledge to do this. Therefore it would be best I could adjust the microphone volume dynamically inside of the very JavaScript application which records the data via the "navigator.getUserMedia(....)" way?

Are there solutions out there to influence this input volume level of the microphone?

解决方案

The Web Audio API enables you to change the input of the microphone for the stream.

Here is an example, which shows how to convert a MediaStream to another MediaStream, but with the ability to change the volume on the fly. If you just want to play back the audio, then you can change gainNode.connect(dest) to gainNode.connect(ctx.destination) and remove the two other lines that use the dest variable.

if (!navigator.getUserMedia) {
    navigator.getUserMedia = navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia;
}
navigator.getUserMedia({
    audio: true
}, function(stream) {
    var ctx = new AudioContext();
    var source = ctx.createMediaStreamSource(stream);
    var dest = ctx.createMediaStreamDestination();
    var gainNode = ctx.createGain();

    source.connect(gainNode);
    gainNode.connect(dest);
    document.getElementById('volume').onchange = function() {
        gainNode.gain.value = this.value; // Any number between 0 and 1.
    };
    gainNode.gain.value = document.getElementById('volume').value;
    
    // Example: play the audio
    // Or if you use WebRTC, use peerConnection.addStream(dest.stream);
    new Audio(URL.createObjectURL(dest.stream)).play();

    // Store the source and destination in a global variable
    // to avoid losing the audio to garbage collection.
    window.leakMyAudioNodes = [source, dest];
}, function(e) {
    alert(e); // TODO: Handle error.
});

// For the demo only:
document.getElementById('volume').onchange = function() {
    alert('Please provide access to the microhone before using this.');
};

Volume: <input type=range id=volume min=0 max=1 value=1 step=0.01>

Note: The live demo via Stack snippet does not work in Chrome because getUserMedia seems non-functional for sandboxed frames. If you use Chrome, try snippet at: https://robwu.nl/s/mediasource-change-volume.html

这篇关于navigator.getUserMedia（）音频录制 - 麦克风设置HOWTO音量输入电平？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！