Захват аудиоданных (с использованием JavaScript) и загрузка на сервер в формате MP3
Следуя нескольким ресурсам в Интернете, я пытаюсь создать простую веб-страницу, на которой я могу записать что-то (мой голос), затем сделать из файла mp3-файл и, наконец, загрузить его на сервер.
На данный момент я могу сделать запись и также воспроизвести, но я не зашел так далеко, как загрузка, кажется, что я даже не могу сделать mp3-файл локально. Может кто-нибудь сказать мне, что я делаю не так или не в том порядке?
Ниже приведен весь код, который у меня есть на данный момент.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<h2>Audio record and playback</h2>
<p>
<button id=startRecord><h3>Start</h3></button>
<button id=stopRecord disabled><h3>Stop</h3></button>
<audio id="player" controls></audio>
<a id=audioDownload></a>
</p>
</div>
<script>
var player = document.getElementById('player');
var handleSuccess = function(stream) {
rec = new MediaRecorder(stream);
rec.ondataavailable = e => {
audioChunks.push(e.data);
if (rec.state == "inactive") {
let blob = new Blob(audioChunks,{type:'audio/x-mpeg-3'});
player.src = URL.createObjectURL(blob);
player.controls=true;
player.autoplay=true;
// audioDownload.href = player.src;
// audioDownload.download = 'sound.data';
// audioDownload.innerHTML = 'Download';
mp3Build();
}
}
player.src = stream;
};
navigator.mediaDevices.getUserMedia({audio:true/*, video: false */})
.then(handleSuccess);
startRecord.onclick = e => {
startRecord.disabled = true;
stopRecord.disabled=false;
audioChunks = [];
rec.start();
}
stopRecord.onclick = e => {
startRecord.disabled = false;
stopRecord.disabled=true;
rec.stop();
}
var ffmpeg = require('ffmpeg');
function mp3Build() {
try {
var process = new ffmpeg('sound.data');
process.then(function (audio) {
// Callback mode.
audio.fnExtractSoundToMP3('sound.mp3', function (error, file) {
if (!error) {
console.log('Audio file: ' + file);
audioDownload.href = player.src;
audioDownload.download = 'sound.mp3';
audioDownload.innerHTML = 'Download';
} else {
console.log('Error-fnExtractSoundToMP3: ' + error);
}
});
}, function (err) {
console.log('Error: ' + err);
});
} catch (e) {
console.log(e.code);
console.log(e.msg);
}
}
</script>
</body>
</html>
Когда я пытаюсь исследовать и посмотреть, что происходит, используя отладчик внутри веб-консоли; на линии:
var process = new ffmpeg('sound.data');
Я получаю это сообщение:
Paused on exception
TypeError ffmpeg is not a contructor.
И на линии:
var ffmpeg = require('ffmpeg');
Я получаю это сообщение:
Paused on exception
ReferenceError require is not defined.
Кроме того, когда я смотрю выражение ffmpeg, я вижу:
ffmpeg: undefined
После некоторых дальнейших исследований и использования browserify я использую следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<h2>Audio record and playback</h2>
<p>
<button id=startRecord><h3>Start</h3></button>
<button id=stopRecord disabled><h3>Stop</h3></button>
<audio id="player" controls></audio>
<a id=audioDownload></a>
</p>
</div>
<script src="bundle.js"></script>
<script>
var player = document.getElementById('player');
var handleSuccess = function(stream) {
rec = new MediaRecorder(stream);
rec.ondataavailable = e => {
if (rec.state == "inactive") {
let blob = new Blob(audioChunks,{type:'audio/x-mpeg-3'});
//player.src = URL.createObjectURL(blob);
//player.srcObject = URL.createObjectURL(blob);
//player.srcObject = blob;
player.srcObject = stream;
player.controls=true;
player.autoplay=true;
// audioDownload.href = player.src;
// audioDownload.download = 'sound.data';
// audioDownload.innerHTML = 'Download';
mp3Build();
}
}
//player.src = stream;
player.srcObject = stream;
};
navigator.mediaDevices.getUserMedia({audio:true/*, video: false */})
.then(handleSuccess);
startRecord.onclick = e => {
startRecord.disabled = true;
stopRecord.disabled=false;
audioChunks = [];
rec.start();
}
stopRecord.onclick = e => {
startRecord.disabled = false;
stopRecord.disabled=true;
rec.stop();
}
var ffmpeg = require('ffmpeg');
function mp3Build() {
try {
var process = new ffmpeg('sound.data');
process.then(function (audio) {
// Callback mode.
audio.fnExtractSoundToMP3('sound.mp3', function (error, file) {
if (!error) {
console.log('Audio file: ' + file);
//audioDownload.href = player.src;
audioDownload.href = player.srcObject;
audioDownload.download = 'sound.mp3';
audioDownload.innerHTML = 'Download';
} else {
console.log('Error-fnExtractSoundToMP3: ' + error);
}
});
}, function (err) {
console.log('Error: ' + err);
});
} catch (e) {
console.log(e.code);
console.log(e.msg);
}
}
</script>
</body>
</html>
Это решило проблему:
the expression ffmpeg being: undefined
Но воспроизведение больше не работает. Возможно, я не правильно поступаю с player.srcObject и, возможно, с некоторыми другими вещами.
Когда я использую эту строку:
player.srcObject = URL.createObjectURL(blob);
Я получаю это сообщение:
Paused on exception
TypeError: Value being assigned to HTMLMediaElement.srcObject is not an object.
И когда я использую эту строку:
player.srcObject = blob;
Я получаю это сообщение:
Paused on exception
TypeError: Value being assigned to HTMLMediaElement.srcObject does not implement interface MediaStream.
Наконец, если я использую это:
player.srcObject = stream;
Я не получаю никакого сообщения об ошибке, но запись голоса по-прежнему не работает.
1 ответ
require не работает в браузерах.
Вы должны использовать "browserify", это его страница GitHub https://github.com/browserify/browserify
также лучше (если в этом нет необходимости) использовать браузер MediaRecorder, поддерживающий тип аудио в новом Blob, проверьте эту ссылку https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported%22
в конце концов нет необходимости player.src = stream; в вашем коде (я говорю о втором), плюс он даст вам ошибку, проверьте этот https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
Это немного редактировать
var handleSuccess = function(stream) {
rec = new MediaRecorder(stream);
rec.ondataavailable = e => {
if (rec.state == "inactive") {
let blob = new Blob(audioChunks,{type:'audio/x-mpeg-3'});
player.src = URL.createObjectURL(blob);
player.controls=true;
player.autoplay=true;
audioDownload.href = player.src;
audioDownload.download = 'sound.data';
audioDownload.innerHTML = 'Download';
mp3Build();
}
}
//No need to put anything here
};