MediaRecoder не записывает HTML5 аудио - PullRequest
Новая
       30

MediaRecoder не записывает HTML5 аудио

0 голосов
/ 28 августа 2018

У меня есть аудио в формате .wav на html-странице, и я хочу записать его, используя JavaScript. Я хочу записать из динамиков. Звук воспроизводится, отправляется на динамики, и формат поддерживается, но звук не записывается mediaRecorder (). Когда файл загружен, он пуст.

Я не уверен, что проверять дальше? 

//start playing sound button, html page
document.querySelector(".start").addEventListener("click", function() {
audioZero.play();
});

//start recording sound button, html page
document.querySelector(".startrec").addEventListener("click", function() {
    mediaRecorder.start();
    console.log("recorder started");
 });

 //stop recording sound button, html page
 document.querySelector(".stoprec").addEventListener("click", function() {
    mediaRecorder.requestData();
    mediaRecorder.stop();
 });

let audioContext = new AudioContext();

//get sound 
let audioZero = document.getElementById("audio0")

// creates a link between audio context and file
const maracas = audioContext.createMediaElementSource(audioZero)

let gainNode = audioContext.createGain()
maracas.connect(gainNode)

// creates link to the speaker
gainNode.connect(audioContext.destination);
console.log(audioContext.destination);

gainNode.gain.value = 1;

//Gets stream of data from the speaker output - gives the ability to store
const dest = audioContext.createMediaStreamDestination();

//This records the stream 
var mediaRecorder = new MediaRecorder(dest.stream);

let chunks = [];

//when data is available an event is raised, this listens for it
mediaRecorder.ondataavailable = function(evt) {
    console.log(evt, evt.data);
    chunks.push(evt.data);
};

mediaRecorder.onstop = function(evt) {
   // Make blob out of our blobs, and open it.
   var blob = new Blob(chunks, { 'type' : "audio/webm;codecs=opus" });

   var anchorTag = document.createElement("a");
   anchorTag.setAttribute('download', 'download');
   anchorTag.innerHTML="download me";

   // creates the download link
   anchorTag.href = URL.createObjectURL(blob);

   document.body.appendChild(anchorTag);

   chunks = [];

};

1 Ответ

0 голосов
/ 28 августа 2018

После создания MediaStreamDestinationNode вам необходимо подключить к нему звуковую часть вашего звукового графа - он не будет автоматически передавать весь звук на audioContext.destination только потому, что это другой узел назначения. (Вы не можете записать «все, что идет к спикерам» - это может быть нарушением перекрестного происхождения.)

Добавьте эту строку сразу после создания вашего узла "dest": 

gainNode.connect(dest);

Вам также нужно в какой-то момент вызывать mediaRecorder.start () - не уверен, что этого просто нет в вашем фрагменте.

...