是否可以通过Safari中的Web Audio API提高录制质量?

时间:2018-08-24 19:13:56

标签: audio safari webrtc audio-recording web-audio-api

我正在使用WebRTC以及WebAudioRecorder.js和Web Audio API来记录用户的麦克风输入,以使用audD API进行音频识别(类似于Shazam)。该功能在Chrome和Firefox中运行良好,并且录音质量似乎相当稳定。但是,由于我猜测音频质量低(播放几乎听不到声音),所以audD无法识别我从Safari(11.1.2)中的记录发送的blob /文件。 Safari和audD都兼容的唯一音频格式是mp3,所以这就是我编码文件的方式。

Javascript:

// to be set to a WebAudioRecorder.js recorder instance
let recorder;
// to be set to the stream resulting from getUserMedia()
let gumStream;

function beginRecording() {
  if (navigator.mediaDevices.getUserMedia) {
    console.log('starting the recording');
    navigator.mediaDevices.getUserMedia({ 'audio': true })
    .then(function(stream) {


    let AudioContext = window.AudioContext // Default
        || window.webkitAudioContext // Safari and old versions of Chrome
        || false; 

    if (AudioContext) {
        let audioCtx = new AudioContext;
        gumStream = stream;
        let source = audioCtx.createMediaStreamSource(stream);
        recorder = new WebAudioRecorder(source, {
            workerDir: 'web-audio-recorder-js/lib/',
            encoding: 'mp3'
        });

    } else {
        alert('The Web Audio API is not supported.');
    }

      recorder.setOptions({
        timeLimit: 120,
        encodeAfterRecord: true,
        ogg: {quality: 0.9},
        mp3: {bitRate: 320},
      });

      recorder.startRecording();

      recorder.onComplete = function(recorder, blob) {
        createAudioPlayback(blob);
        POSTreq(blob);
      }
      
      recorder.onError = function(recorder, err) {
        console.error(err);
      }

    })
    .catch(function(err) {
      console.error(err);
    })
  }
}

function stopRecording() {
  console.log('stopping the recording');
  let recordingTime = recorder.recordingTime();
  console.log(recordingTime);

  let audioTrack = gumStream.getAudioTracks()[0];
  console.log(audioTrack);

  audioTrack.stop();

  recorder.finishRecording();

  $('#msg_box').text(`Recorded for ${Math.round(recordingTime)} seconds`);
  console.log('recording stopped');
}

function createAudioPlayback(blobData) {
  let url = URL.createObjectURL(blobData);
  $('body').append(`<audio controls src="${url}"></audio>`);
}

function POSTreq (blobData) {
  let xhr = new XMLHttpRequest();
  let fd = new FormData();
  fd.append('api_token', '');
  fd.append('file', blobData);
  fd.append('method', 'recognize');
  fd.append('return_itunes_audios', true);
  fd.append('itunes_country', 'us');

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      parseRetrievedData(xhr.response);
    }
  }
  xhr.open('POST', 'https://api.audd.io/');
  xhr.responseType = 'json';
  xhr.send(fd);
}

function parseRetrievedData(parseData) {
  console.log('the data from the audD api is: ', parseData);
}

$(function() {
  $('#start-button').click(function(e) {
    beginRecording();
    $('#stop-button').prop('hidden', false);
  });
  $('#stop-button').click(function(e) {
    stopRecording();
  });
});

HTML:

<div class="recorder_wrapper">
        <div class="recorder">
            <button id="start-button">Start</button>
            <button id="stop-button">Stop</button>
            <p id="msg_box"></p>
            <section class="auth-links-region" role="region">
              <a href="#" class="auth-link signup">Signup</a>
              <a href="#" class="auth-link login">Login</a>
            </section>
            <section class="authentication-region" role="region" hidden>
              <p class="authentication-text"></p>
              <a href="#" class="mysearches-link">My Searches</a>
              <a href="#" class="logout-link">Logout</a>
            </section>
        </div>
    </div>

0 个答案:

没有答案