2017-02-28 53 views
-1

我写简单的JavaScript类中使用浏览器 的AudioRecorder功能我有内部initAudio范围变量mediaRecorder功能范围之外访问变量,我想访问它 内的另一个功能的startRecording如何在JavaScript

我怎么能做它?

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(); 
+0

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/类 – Slime

+0

我在录音的特殊情况下遇到问题@AmericanSlime –

+0

https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know – mhodges

回答

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

0

就是这样。

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

我重写了我的问题,请尝试回答 –