Записать звук из аудио контекста webaudio api

Я использую api веб-аудио в своем проекте. Есть ли способ записать аудиоданные, которые отправляются в webkitAudioContext.destination? В моем браузере воспроизводятся файлы .wav, поэтому должен быть способ сохранить эти данные в файле (.wav). Я знаю, что это возможно, но пока не нашел никакого решения :( Recorder.js может мне помочь, но до сих пор я обнаружил, что он только записывает живой вход микрофона, можно ли записать мой звук (файлы .wav) с помощью Recorder.js? пожалуйста, помогите

Я использую этот образец для записи https://github.com/mattdiamond/Recorderjs


html5-audio web-audio-api audio-recording webkitaudiocontext
person Jot Dhaliwal    schedule 20.01.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Мне удалось добиться этого с помощью чистого решения WebAudio (не требуется Recorderjs). Вы можете увидеть, как он полностью работает в моем проекте discJS и использует соответствующий исходный файл, чтобы увидеть, как работает мой полный код. Я полагаю, это актуально только для записи узлов WebAudio, которые вы играете программно.

Сначала вам понадобится HTML <audio>, чтобы использовать его в качестве конечного пункта назначения. В этом случае я предпочитаю отображать элементы управления, чтобы пользователь мог легко загрузить полученный файл.

<audio id='recording' controls='true'></audio>

Теперь о моджо Javascript:

const CONTEXT = new AudioContext();
var recorder=false;
var recordingstream=false;

function startrecording(){
  recordingstream=CONTEXT.createMediaStreamDestination();
  recorder=new MediaRecorder(recordingstream.stream);
  recorder.start();
}

function stoprecording(){
  recorder.addEventListener('dataavailable',function(e){
    document.querySelector('#recording').src=URL.createObjectURL(e.data);
    recorder=false;
    recordingstream=false;
  });
  recorder.stop();
}

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

function play(source){
  let a=new Audio(source);
  let mediasource=CONTEXT.createMediaElementSource(a);
  mediasource.connect(CONTEXT.destination);//plays to default context (speakers)
  mediasource.connect(recordingstream);//connects also to MediaRecorder
  a.play();
}

Это относительно примитивная настройка, которая отлично работает (проверено в Firefox 52 и Chrome 70). Для более правильной реализации см. MediaRecorder в MDN.

person Alex Henry    schedule 30.10.2018

arrow_upward
1
arrow_downward

Как можно найти на github: var rec = new Recorder(source [, config]), где source - это аудиоузел. Так что вам решать, правильно ли установить узел. Если вы воспроизводите .wav файлы с помощью <audio>, вы можете отправить их на диктофон:

<audio id="audio" src="" controls></audio>

var a = document.getElementById('audio');
var context = new webkitAudioContext();
var sourceNode = context.createMediaElementSource(a);
var rec = new Recorder(sourceNode);
person MarijnS95    schedule 31.01.2014