MediaRecoder не записывает HTML5 аудио
У меня есть аудио.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 ответ
После создания MediaStreamDestinationNode вам необходимо подключить к нему звуковую часть вашего звукового графа - он не будет автоматически передавать весь звук на audioContext.destination только потому, что это другой узел назначения. (Вы не можете записать "все, что идет к спикерам" - это может быть нарушением перекрестного происхождения.)
Добавьте эту строку сразу после создания вашего узла "dest":
gainNode.connect(dest);
Вам также необходимо вызвать mediaRecorder.start() в какой-то момент, тоже - не уверен, что этого просто нет в вашем фрагменте.