Question

我编写了简单的javascript类来使用浏览器的AudioRecorder功能我在initAudio范围内有变量mediaRecorder，我想访问它在另一个函数startRecording

中

我该怎么做？

navigator.getUserMedia = ( navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia );
var audioCtx = new ( window.AudioContext || window.webkitAudioContext )();
var analyser = audioCtx.createAnalyser();
var scriptProcessor = audioCtx.createScriptProcessor( 2048, 1, 1 );
var chunks = [ ], input = null;
var mediaRecorder;
analyser.smoothingTimeConstant = 0.3;
analyser.fftSize = 1024;

var AudioRecorder = function( element ) {

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
    navigator.getUserMedia( { audio: true }, function( stream ) {
        initAudio( stream );
    }, function( err ) {
        console.log( 'usermedia error', err );
    } );

    var initAudio = function( stream ) {
        input = audioCtx.createMediaStreamSource( stream );
        mediaRecorder = new MediaRecorder( stream );

        mediaRecorder.ondataavailable = function( e ) {
            chunks.push( e.data );
        };

        mediaRecorder.onstop = function( e ) {
            console.log( "data available after MediaRecorder.stop() called." );
            var blob = new Blob( chunks, { 'type': 'audio/ogg; codecs=opus' } );
            chunks = [ ];

            var audioURL = window.URL.createObjectURL( blob );
            document.getElementById( 'blo' ).href = audioURL;
            console.log( audioURL );
        };

    };

    this.startRecording = function() {
        console.log( mediaRecorder );
        mediaRecorder.start();
        console.log( mediaRecorder.state );
        console.log( "recorder started" );
        this.isRecording = true;
    };

    this.stopRecording = function() {
        mediaRecorder.stop();
        console.log( mediaRecorder.state );
        console.log( "recorder stopped" );
    };

};

var element = document.getElementById( 'mediaPlayer' );
var record = new AudioRecorder( element );
record.startRecording();

Answer 1

我查看了您的代码，这似乎没问题。

麻烦不是范围变量问题。我认为你的init（）函数没有被执行，因为流不存在流到网页的流。

我做了一些修改来证明这一点。

var audioCtx = new ( window.AudioContext || window.webkitAudioContext )();
var analyser = audioCtx.createAnalyser();
var scriptProcessor = audioCtx.createScriptProcessor( 2048, 1, 1 );
var chunks = [ ], input = null;
var mediaRecorder = null;
analyser.smoothingTimeConstant = 0.3;
analyser.fftSize = 1024;

var AudioRecorder = function( element ) {

/***navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
        navigator.getUserMedia( { audio: true }, function( stream ) {
            initAudio( stream );
        }, function( err ) {
            console.log( 'usermedia error', err );
        } );***/
        // First get User Media
        var md = navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        md.then(function(mediaStream) {
            console.log('Media function');
            this.initAudio( stream );
        });
        md.catch(function(err) { console.log('usermedia error', err); }); // always check for errors at the end

        var initAudio = function( stream ) {
            input = audioCtx.createMediaStreamSource( stream );
            mediaRecorder = new MediaRecorder( stream );

            mediaRecorder.ondataavailable = function( e ) {
                chunks.push( e.data );
            };

            mediaRecorder.onstop = function( e ) {
                console.log( "data available after MediaRecorder.stop() called." );
                var blob = new Blob( chunks, { 'type': 'audio/ogg; codecs=opus' } );
                chunks = [ ];

                var audioURL = window.URL.createObjectURL( blob );
                document.getElementById( 'blo' ).href = audioURL;
                console.log( audioURL );
            };

        };

        this.startRecording = function() {
            console.log( mediaRecorder );
            mediaRecorder.start();
            console.log( mediaRecorder.state );
            console.log( "recorder started" );
            this.isRecording = true;
        };

        this.stopRecording = function() {
            mediaRecorder.stop();
            console.log( mediaRecorder.state );
            console.log( "recorder stopped" );
        };

    };

    var element = document.getElementById( 'mediaPlayer' );
    var record = new AudioRecorder( element );
    record.startRecording();

此引用对您有用：

Mozilla Media Devices Documentation

How to recording videos in the browser

Answer 2

像这样。

function foo() {
  ...
  return {
    startRecording: function() { ... },
    stopRecording: function() { ... }
  }
}

如何在javascript中访问函数范围之外的变量

2 个答案: