4

前几天我偶然发现了这个 Javascript 录音机的例子：

http://webaudiodemos.appspot.com/AudioRecorder/index.html

我最终用它来实现我自己的。我遇到的问题是在这个文件中：

var audioContext = new webkitAudioContext();
var audioInput = null,
    realAudioInput = null,
    inputPoint = null,
    audioRecorder = null;
var rafID = null;
var analyserContext = null;
var canvasWidth, canvasHeight;
var recIndex = 0;

/* TODO:

- offer mono option
- "Monitor input" switch
*/

function saveAudio() {
    audioRecorder.exportWAV( doneEncoding );
}

function drawWave( buffers ) {
    var canvas = document.getElementById( "wavedisplay" );

    drawBuffer( canvas.width, canvas.height, canvas.getContext('2d'), buffers[0] );
}

function doneEncoding( blob ) {
    Recorder.forceDownload( blob, "myRecording" + ((recIndex<10)?"0":"") + recIndex + ".wav" );
    recIndex++;
}

function toggleRecording( e ) {
    if (e.classList.contains("recording")) {
        // stop recording
        audioRecorder.stop();
        e.classList.remove("recording");
        audioRecorder.getBuffers( drawWave );
    } else {
        // start recording
        if (!audioRecorder)
            return;
        e.classList.add("recording");
        audioRecorder.clear();
        audioRecorder.record();
    }
}

// this is a helper function to force mono for some interfaces that return a stereo channel for a mono source.
// it's not currently used, but probably will be in the future.
function convertToMono( input ) {
    var splitter = audioContext.createChannelSplitter(2);
    var merger = audioContext.createChannelMerger(2);

    input.connect( splitter );
    splitter.connect( merger, 0, 0 );
    splitter.connect( merger, 0, 1 );
    return merger;
}
function toggleMono() {
    if (audioInput != realAudioInput) {
        audioInput.disconnect();
        realAudioInput.disconnect();
        audioInput = realAudioInput;
    } else {
        realAudioInput.disconnect();
        audioInput = convertToMono( realAudioInput );
    }

    audioInput.connect(inputPoint);
}


function cancelAnalyserUpdates() {
    window.webkitCancelAnimationFrame( rafID );
    rafID = null;
}

function updateAnalysers(time) {
    if (!analyserContext) {
        var canvas = document.getElementById("analyser");
        canvasWidth = canvas.width;
        canvasHeight = canvas.height;
        analyserContext = canvas.getContext('2d');
    }

    // analyzer draw code here
    {
        var SPACING = 3;
        var BAR_WIDTH = 1;
        var numBars = Math.round(canvasWidth / SPACING);
        var freqByteData = new Uint8Array(analyserNode.frequencyBinCount);

        analyserNode.getByteFrequencyData(freqByteData); 

        analyserContext.clearRect(0, 0, canvasWidth, canvasHeight);
        analyserContext.fillStyle = '#F6D565';
        analyserContext.lineCap = 'round';
        var multiplier = analyserNode.frequencyBinCount / numBars;

        // Draw rectangle for each frequency bin.
        for (var i = 0; i < numBars; ++i) {
            var magnitude = 0;
            var offset = Math.floor( i * multiplier );
            // gotta sum/average the block, or we miss narrow-bandwidth spikes
            for (var j = 0; j< multiplier; j++)
                magnitude += freqByteData[offset + j];
            magnitude = magnitude / multiplier;
            var magnitude2 = freqByteData[i * multiplier];
            analyserContext.fillStyle = "hsl( " + Math.round((i*360)/numBars) + ", 100%, 50%)";
            analyserContext.fillRect(i * SPACING, canvasHeight, BAR_WIDTH, -magnitude);
        }
    }

    rafID = window.webkitRequestAnimationFrame( updateAnalysers );
}

function gotStream(stream) {
    // "inputPoint" is the node to connect your output recording to.
    inputPoint = audioContext.createGainNode();

    // Create an AudioNode from the stream.
    realAudioInput = audioContext.createMediaStreamSource(stream);
    audioInput = realAudioInput;
    audioInput.connect(inputPoint);

//    audioInput = convertToMono( input );

    analyserNode = audioContext.createAnalyser();
    analyserNode.fftSize = 2048;
    inputPoint.connect( analyserNode );

    audioRecorder = new Recorder( inputPoint );

    zeroGain = audioContext.createGainNode();
    zeroGain.gain.value = 0.0;
    inputPoint.connect( zeroGain );
    zeroGain.connect( audioContext.destination );
    updateAnalysers();
}

function initAudio() {
    if (!navigator.webkitGetUserMedia)
        return(alert("Error: getUserMedia not supported!"));

    navigator.webkitGetUserMedia({audio:true}, gotStream, function(e) {
            alert('Error getting audio');
            console.log(e);
        });
}

window.addEventListener('load', initAudio );

如您所见，使用此方法加载页面（阅读最后一行）时会立即调用initAudio()函数（请求用户允许使用他/她的麦克风的函数）：

window.addEventListener('load', initAudio );

现在，我在 HTML 中有这段代码：

<script type="text/javascript" >
$(function() {
  $("#recbutton").on("click", function() {
    $("#entrance").hide();
    $("#live").fadeIn("slow");
    toggleRecording(this);
    $(this).toggle();
    return $("#stopbutton").toggle();
  });
  return $("#stopbutton").on("click", function() {
    audioRecorder.stop();
    $(this).toggle();
    $("#recbutton").toggle();
    $("#live").hide();
    return $("#entrance").fadeIn("slow");
  });
});
</script>

正如你所看到的，我只在按下#recbutton 之后才调用toggleRecording(this)函数（启动录制过程的那个）。现在，这段代码一切正常，但是，一旦加载页面，用户就会收到麦克风权限提示，我想在他们单击#recbutton 后才请求他们使用麦克风你明白我的意思吗？我认为如果我删除第一个文件的最后一行：

window.addEventListener('load', initAudio );

并像这样修改我的嵌入式脚本：

<script type="text/javascript" >
$(function() {
  $("#recbutton").on("click", function() {
    $("#entrance").hide();
    $("#live").fadeIn("slow");
    initAudio();
    toggleRecording(this);
    $(this).toggle();
    return $("#stopbutton").toggle();
  });
  return $("#stopbutton").on("click", function() {
    audioRecorder.stop();
    $(this).toggle();
    $("#recbutton").toggle();
    $("#live").hide();
    return $("#entrance").fadeIn("slow");
  });
});
</script>

我可能能够实现我想要的，实际上我是，用户在单击#recbutton 之前不会被提示输入他/她的麦克风。问题是，音频永远不会被录制，当您尝试下载它时，生成的 WAV 是空的。

我怎样才能解决这个问题？

我的项目代码位于：https ://github.com/Jmlevick/html-recorder

4

2 回答 2

0

我为此找到了一个优雅而简单的解决方案（或者至少我是这样认为的）：

我所做的是在 getScript 调用中折腾“main.js”和“recorder.js”，该调用仅在用户单击某个按钮（#button1）时执行......这些脚本不会与网页本身一起加载直到它被按下，但我们需要一些更漂亮的技巧来让它按照我上面描述和想要的方式工作：

在main.js，我改变了：

window.addEventListener('load', initAudio );

为了：

window.addEventListener('click', initAudio );

因此，当使用 getScript 将脚本加载到页面中时，“main.js”文件现在会侦听网页中的单击事件以向用户询问麦克风。接下来，我必须在页面上创建一个隐藏按钮（#button2），在页面上加载脚本后，它被 jQuery 假点击，所以它触发了“请求麦克风许可”事件，然后，就在那个下方生成我添加的虚假点击的代码行：

window.removeEventListener("click", initAudio, false);

所以这个技巧的“工作流程”最终如下：

  1. 用户按下一个按钮，用 getScript 将必要的 js 文件加载到页面中，值得一提的是，现在“main.js”文件侦听窗口上的点击事件而不是加载事件。

  2. 我们有一个隐藏按钮，当您单击第一个按钮时，jQuery 会“假点击”它，因此它会触发用户的许可事件。

  3. 一旦触发了这个事件，点击事件监听器就会从窗口中移除，所以当用户点击页面上的任何地方时，它不会再次触发“请求许可”事件。

基本上这就是所有人！:) 现在，当用户进入页面时，他/她永远不会被要求获得麦克风许可，直到他们按照我的意愿单击页面上的“Rec”按钮。通过单击用户，我们在 jQuery 中做了 3 件事，但对于用户来说，除了单击“Rec”按钮后立即出现在屏幕上的“麦克风许可消息”之外，似乎什么也没发生。

于 2013-07-18T00:54:34.753 回答
0

不，您的问题是 getUserMedia() 有一个异步回调 (gotMedia()); 您需要在该回调中的 startbutton 调用（特别是 toggleRecording 位）中包含其余代码逻辑，因为现在它在 getUserMedia 返回（并设置音频节点）之前执行。

于 2013-06-16T03:37:00.883 回答