在没有库的Chrome浏览器中,如何将html5音频编码为base64数据?

时间:2016-04-26 06:01:08

标签: javascript html5 google-chrome audio html5-audio

我试图在Chrome浏览器中录制30秒的声音片段并将音频作为base64编码的FLAC音频发布到服务器,我觉得我80%的方式都在那里。

  1. 我可以通过HTTPS网址将音频捕获到audioChunks中 - 我认为。
  2. 我是否需要担心mediaRecorder.start参数?为什么不使用默认值?
  3. 有没有比Blob到FileReader更好的方法来进行base64转换?当我尝试将base64数据转换回桌面上的FLAC文件时,它会显示不良字符,我认为这意味着我第一个方向错了。
  4. 
    
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
    
    const DURATION_MS = 10 * 1000;
    
    function getUserMediaPromise(constraints) {
      return new Promise(function(resolve, reject) {
        console.info('Getting user media.');
        navigator.getUserMedia({
          audio: true,
          video: false
        }, function(stream) {
          console.info('Got stream!');
          resolve(stream);
        }, function(error) {
          console.error('Error getting stream!');
          reject(error);
        });
      });
    }
    
    
    function recordAudioPromise(stream) {
      return new Promise(function(resolve, reject) {
        var audioChunks = [],
          mediaRecorder = new MediaRecorder(stream, {
            audioBitsPerSecond: 16000
          });
        mediaRecorder.start(5 * 1000); // One chunk of data per X seconds. Why do we care?
    
        setTimeout(function() {
          console.info('Stopping audio after ' + DURATION_MS + 'ms');
          mediaRecorder.stop();
        }, DURATION_MS);
    
        mediaRecorder.ondataavailable = function(e) {
          console.info('data available', e.data.size);
          audioChunks.push(e.data);
        };
    
        mediaRecorder.onerror = reject;
        mediaRecorder.onwarning = reject;
    
        mediaRecorder.onstop = function() {
          console.info('Stopped and converting to base64, state:', mediaRecorder.state);
          var blob = new Blob(audioChunks, {
            type: 'audio/flac'
          });
          console.info('Created blob', blob.type, blob.size);
          audioChunks = [];
          var fileReader = new window.FileReader();
          fileReader.onloadend = function() {
            var base64data = fileReader.result;
            resolve(base64data.substr('data:audio/flac;base64,'.length));
          };
          fileReader.readAsDataURL(blob);
        };
      });
    }
    
    getUserMediaPromise()
      .then(recordAudioPromise)
      .then(function(base64Audio) {
        console.log('Got base64Audio', base64Audio.length);
        console.log(base64Audio);
      }).catch(function(error) {
        throw error;
      });
    
    
    

0 个答案:

没有答案