Как загрузить аудиофайл с URL-адреса blob в Angular 6?
Я пытаюсь создать аудиофайл (формат .mp3) после записи в течение 2500 миллисекунд. Я использую navigator и в основном использую HTML5-audio. Я создаю ссылку для загрузки файла.
window.URL.createObjectURL(stream) возвращает blob:http://localhost:4200/e6a5a51e-ae11-4b77-9b2c-06251b13ca39. Я не знаю, как превратить это в файл, чтобы можно было скачать.
Вот так выглядит функция записи:
this.record = () => {
var headers = new Headers();
var browser = <any>navigator;
var obj = {
audio: true,
sampleSize: 16
};
var audio = document.createElement('audio');
browser.getUserMedia = (browser.getUserMedia || browser.webkitGetUserMedia || browser.mozGetUserMedia || browser.msGetUserMedia);
browser.mediaDevices.getUserMedia(obj).then(stream => {
setTimeout(function(){
var track = stream.getTracks()[0];
var source = window.URL.createObjectURL(stream); // returns blob:http://localhost:4200/e6a5a51e-ae11-4b77-9b2c-06251b13ca39
audio.src = source;
audio.autoplay= true;
var link = document.createElement("a");
link.href = source;
link.download = 'audio_recording_' + new Date().getTime() + '.mp3'; //"audioSample.wav";
link.innerHTML = "Click here to download the file";
document.body.appendChild(link);
track.stop();
// window.URL.revokeObjectURL(stream);
}, 2500);
});
};
Любая помощь приветствуется. Спасибо!
Ответы 3
Если большой двоичный объект действительно является допустимым, и в вашем коде есть ошибка, чтобы сделать загрузку доступной: я добился успеха с хранитель файлов
попробуйте создать новый звук со ссылкой на ваш источник, как показано ниже:
var audioFile = new Audio(source)
и в ваших link.href и audio.src попробуйте установить его, например:
audio.src = audioFile
link.href = audioFile
Пожалуйста, дайте мне знать, сработало ли это!
аудио и видео находятся в том же формате webm в хроме.
То же, что и видео
1. записать звук в mimeType 'audio / webm'
2. скачать blob в формате webm
3. конвертировать webm в mp3 (или вы также можете конвертировать с помощью javascript перед загрузкой, но это реальная стоимость времени, хотя найти решение в github легко, может быть, оно будет заменено собственным api)
ссылка: https://github.com/webrtc/samples
Ссылка ios на wav: https://github.com/ai/audio-recorder-polyfill и https://github.com/kaliatech/web-audio-recording-tests
бывший. в хроме
function startRecording() {
recordedBlobs = [];
let options = {mimeType: 'audio/webm'};
try {
mediaRecorder = new MediaRecorder(window.stream, options);
} catch (e) {
console.error('Exception while creating MediaRecorder:', e);
errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
return;
}
console.info('Created MediaRecorder', mediaRecorder, 'with options', options);
recordButton.textContent = 'Stop Recording';
playButton.disabled = true;
downloadButton.disabled = true;
mediaRecorder.onstop = (event) => {
console.info('Recorder stopped: ', event);
};
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(10); // collect 10ms of data
console.info('MediaRecorder started', mediaRecorder);
}
const downloadButton = document.querySelector('button#download');
downloadButton.addEventListener('click', () => {
const blob = new Blob(recordedBlobs, {type : 'audio/webm'});
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'test.webm';
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 100);
});
Похоже, вы это уже сделали. Только не думайте, что файл будет в формате MP3. Какая у вас конкретная проблема?