javascript - MediaRecorder API-自动记录

我目前正在尝试模拟音频自动录制。用户讲话，并且在他停止之后，应该将音频提交到后端。
我已经有一个示例脚本，该脚本使用开始和停止单击功能提交音频。

我正在尝试获取某种类型的值，例如Amplitude，Volume或Threshold，但我不确定MediaRecorder是否支持此值，或者我是否需要查看Web Audio API或其他解决方案。

我可以用MediaRecorder实现吗？

最佳答案

关于麦克风输入的音频分析，以下示例显示如何获取麦克风捕获的音频，如何使用createAnalyser的webkitAudioContext方法创建分析仪，将流连接到分析仪并计算指定大小的FFT，为了计算音调并显示输出声波。

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = null;
var isPlaying = false;
var sourceNode = null;
var analyser = null;
var theBuffer = null;
var audioCtx = null;
var mediaStreamSource = null;
var rafID = null;
var j = 0;
var waveCanvas = null;

window.onload = function() {
    audioContext = new AudioContext();
    audioCtx = document.getElementById( "waveform" );
    canvasCtx = audioCtx.getContext("2d");
};
function getUserMedia(dictionary, callback) {
    try {
        navigator.getUserMedia =
            navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia;
        navigator.getUserMedia(dictionary, callback, error);
    } catch (e) {
        alert('getUserMedia threw exception :' + e);
    }
}

function gotStream(stream) {
    // Create an AudioNode from the stream.
    mediaStreamSource = audioContext.createMediaStreamSource(stream);
    // Connect it to the destination.
    analyser = audioContext.createAnalyser();
    analyser.fftSize = 1024;
    mediaStreamSource.connect( analyser );
    updatePitch();
}
function toggleLiveInput()
{
    canvasCtx.clearRect(0, 0, audioCtx.width, audioCtx.height);
    canvasCtx.beginPath();
    j = 0;
    buflen = 1024;
    buf = new Float32Array( buflen );
    document.getElementById('toggleLiveInput').disabled = true;
    document.getElementById('toggleLiveInputStop').disabled = false;
    if (isPlaying) {
        //stop playing and return
        sourceNode.stop( 0 );
        sourceNode = null;
        //analyser = null;
        isPlaying = false;
        if (!window.cancelAnimationFrame)
            window.cancelAnimationFrame = window.webkitCancelAnimationFrame;
        window.cancelAnimationFrame( rafID );
    }
    getUserMedia(
        {
            "audio": {
                "mandatory": {
                    "googEchoCancellation": "false",
                    "googAutoGainControl": "false",
                    "googNoiseSuppression": "false",
                    "googHighpassFilter": "false"
                },
                "optional": []
            },
        }, gotStream);
}
function stop()
{
    document.getElementById('toggleLiveInput').disabled = false;
    document.getElementById('toggleLiveInputStop').disabled = true;
    //waveCanvas.closePath();
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = window.webkitCancelAnimationFrame;
    window.cancelAnimationFrame( rafID );
    return "start";
}
function updatePitch()
{
    analyser.fftSize = 1024;
    analyser.getFloatTimeDomainData(buf);
    canvasCtx.strokeStyle = "red";
    for (var i=0;i<2;i+=2)
    {
        x = j*5;
        if(audioCtx.width < x)
        {
            x = audioCtx.width - 5;
            previousImage = canvasCtx.getImageData(5, 0, audioCtx.width, audioCtx.height);
            canvasCtx.putImageData(previousImage, 0, 0);
            canvasCtx.beginPath();
            canvasCtx.lineWidth = 2;
            canvasCtx.strokeStyle = "red";
            prex = prex - 5;
            canvasCtx.lineTo(prex,prey);
            prex = x;
            prey = 128+(buf[i]*128);
            canvasCtx.lineTo(x,128+(buf[i]*128));
            canvasCtx.stroke();

        }
        else
        {
            prex = x;
            prey = 128+(buf[i]*128);
            canvasCtx.lineWidth = 2;
            canvasCtx.lineTo(x,128+(buf[i]*128));
            canvasCtx.stroke();
        }
        j++;
    }
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = window.webkitRequestAnimationFrame;
    rafID = window.requestAnimationFrame( updatePitch );
}
function error() {
    console.error(new Error('error while generating audio'));
}

尝试演示here。
改编自pitch-liveinput的示例。

关于javascript - MediaRecorder API-自动记录，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44122186/