Как я могу преобразовать ответ сервера в файл WAV в JavaScript? - PullRequest
Новая
       58

Как я могу преобразовать ответ сервера в файл WAV в JavaScript?

0 голосов
/ 30 октября 2019

Я занимаюсь разработкой проекта колбы. Я хочу, чтобы пользователи могли записывать свой голос в браузере и отправлять его на сервер. Сервер не будет обрабатывать или сохранять эти данные, он просто отобразит данные. У меня сервер работает нормально, но у меня проблемы с javascript, так как у меня нет особого опыта работы с ним.

Я использую https://github.com/mattdiamond/Recorderjs для сбора пользовательских данных и их преобразования в файл wav, а не отправкуэто на сервер. Мне не удается преобразовать эти двоичные данные в файл wav, чтобы браузер мог их воспроизвести.

Примечание: я открыт для предложений о других библиотеках и извините за неаккуратный код, приведенный выше. Я просто пытаюсь заставить его работать первым.

Код на стороне клиента: 

var socket = io();
socket.on('connect', function() {

});

var recorder;
let context;
var blob;
let audio = document.querySelector('audio');
let startBtn = document.querySelector('.record');
let stopBtn = document.querySelector('.stop');
let sendBtn = document.querySelector('.send');
window.URL = window.URL || window.webkitURL;
/**
 * Detecte the correct AudioContext for the browser
 * */
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
let onFail = function(e) {
  alert('Error ' + e);
  console.log('Rejected!', e);
};

function failed() {
  console.log("recording failed");
}
let onSuccess = function(s) {
  console.log('Recording...');
  let tracks = s.getTracks();
  startBtn.setAttribute('disabled', true);
  stopBtn.removeAttribute('disabled');
  context = new AudioContext();
  let mediaStreamSource = context.createMediaStreamSource(s);
  recorder = new Recorder(mediaStreamSource);
  recorder.record();
  stopBtn.addEventListener('click', () => {
    console.log('Stop Recording...');
    stopBtn.setAttribute('disabled', true);
    startBtn.removeAttribute('disabled');
    recorder.stop();
    tracks.forEach(track => track.stop());
    recorder.exportWAV(function(s) {
      //audio.src = window.URL.createObjectURL(s);
      socket.emit("sound", s);
    });

  });
}
startBtn.addEventListener('click', () => {
  if (navigator.getUserMedia) {
    /**
     * ask permission of the user for use microphone or camera
     */
    navigator.getUserMedia({ audio: true }, onSuccess, onFail);
  } else {
    console.warn('navigator.getUserMedia not present');
  }
});

function callback() {
  console.log("......");
}

sendBtn.addEventListener("click", () => {
  console.log("get")
  recorder.exportWAV(function(s) {
    //audio.src = window.URL.createObjectURL(s);
    socket.emit("sound", s); //sending to server
  });
});

socket.on("sound-receive", data => { //this is where I try to do conversion
  var element = document.querySelector(".message-container");
  var aud = document.createElement("audio");
  var reco = new Blob(data, { type: 'audio/wav' });
  aud.src = window.URL.createObjectURL(reco);
  element.appendChild(aud);
});
...