Есть ли способ повысить качество записи с помощью Web Audio API в Safari? - PullRequest
0 голосов
/ 24 августа 2018

Я использую WebRTC вместе с WebAudioRecorder.js и API Web Audio для записи микрофонного ввода от пользователя для распознавания звука с помощью audD API (аналогично Shazam). Это прекрасно работает в Chrome и Firefox, и кажется, что качество записи довольно хорошее. Однако audD не может распознать блоб / файл, отправленный из моей записи в Safari (11.1.2), из-за того, что я предполагаю, это низкое качество звука (воспроизведение почти не слышно). Единственный аудиоформат, с которым совместимы 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...