Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Запись аудио: нет длительности у файла (https://javascript.ru/forum/misc/82055-zapis-audio-net-dlitelnosti-u-fajjla.html)

Manyasha 06.03.2021 19:06

Запись аудио: нет длительности у файла
 
Добрый день!

Встала задача записать голосовой ответ человека, что-то похожее на аудио сообщения в месенджерах.

Использую mediaRecorder, все работает, все скачивается.
Но почему-то при воспроизведении не могу перемотать вперед (ни на страничке, ни на компе, после того как скачала).
На компе длительность в проигрывателе стоит 435 часов, хотя запись около 10 секунд.
В свойствах файла графа продолжительность пустая.

Подскажите, пожалуйста, в какую сторону копать?
Мне как-то надо самой свойство файла заполнить?

Клиентская часть:
navigator.mediaDevices.getUserMedia({ audio: true})
	.then(function(stream){
		const mediaRecorder = new MediaRecorder(stream);

		document.querySelector('#start').addEventListener('click', function(){
			mediaRecorder.start();
		});
		let audioChunks = [];
		mediaRecorder.addEventListener("dataavailable",function(event) {
			audioChunks.push(event.data);
		});

		document.querySelector('#stop').addEventListener('click', function(){
			mediaRecorder.stop();
		});

		mediaRecorder.addEventListener("stop", function() {
			const audioBlob = new Blob(audioChunks, {
				type: 'audio/wav'
			});

			let fd = new FormData();
			fd.append('voice', audioBlob);
			sendVoice(fd);
			audioChunks = [];
		});
	});
	
async function sendVoice(form) {
	let promise = await fetch(URL, {
		method: 'POST',
		body: form});
	if (promise.ok) {
		let response =  await promise.json();
		console.log(response.data);
		let audio = document.createElement('audio');
		audio.src = response.data;
		audio.controls = true;
		audio.autoplay = false;
		document.querySelector('#messages').appendChild(audio);
	}
};


На сервере:
$uploadDir = 'records/';
$typeFile = explode('/', $_FILES['voice']['type']);
$uploadFile = $uploadDir . $pass.'_'.$q.'_'.time().'.'.$typeFile[1];
if (move_uploaded_file($_FILES['voice']['tmp_name'], $uploadFile)) {
    $response = ['result'=>'OK', 'data'=>'../voice_record/' . $uploadFile];
} else {
    $response = ['result'=>'ERROR', 'data'=>''];
}

echo json_encode($response);

voraa 06.03.2021 19:34

const mediaRecorder = new MediaRecorder(stream);

Вы не указываете второй параметр, определяющий mimetype.
Вы уверены, что по умолчанию он будет записывать в audio/wav?

Откуда приходит страница? MediaRecorder работает только, если страница приходит по https: или с localhost.

Manyasha 07.03.2021 16:47

voraa,

страница приходит с https.

Спасибо за наводку про mimetype.
Почитала, действительно браузер в другом формате записывает.
Добавила проверку на поддерживаемые форматы, и выставила mimetype соответствующий.

Хром записывает только в webm, видимо поэтому перемотка не работает, а другие форматы он не поддерживает.

Проблему решает конвертация записи в любой другой формат.

Спасибо Вам за помощь!


Часовой пояс GMT +3, время: 11:52.