Статьи

Игра со звуком в HTML5

Ноябрь 4, 2018

Недавно у нас возникла небольшая проблема с тем, как записать собственный голос с помощью микрофона с минимальными усилиями пользователя и сохранить его в облаке. Что я имею в виду с минимальными усилиями, так это то, что вам не нужно записывать свой голос с помощью великолепного программного обеспечения для обработки звука, такого как GarageBand или Audacity, а затем вручную загружать их в облако с помощью ftp или scp (люди из Windows, пожалуйста, продолжайте и читайте руководство по UNIX / Linux).

Я знаю, что эти шаги просты, но я думаю, что мы можем передать процесс загрузки на компьютер и позволить этой машине сделать это за нас . В конце концов, наше желание — это их команда. Поэтому я помню о спецификации звука в HTML5 и решил поиграть с ней. (Кстати, я тоже думаю об использовании Flash, но я думаю, что вы уже знали мой ответ. Фактически, в конце этой статьи я все еще использую способность Flash, чтобы добиться цели).

Во-первых, мне нужно знать, как браузер получает аудиовход через микрофон. Оказывается, HTML5 вводит новый API navigator.getUserMedia(). Пожалуйста, имейте в виду, что большинство браузеров имеет свою собственную реализацию на этом, например, вы получите navigator.webkitGetUserMedia()или navigator.mozGetUserMedia()зависит от браузеров. Я уверен, что вы знаете, какая реализация для какого браузера.

Лучше проверить, поддерживает ли браузер, который вы или другой пользователь используете этот новый API. Если ответ «нет», то вы можете вернуться ко всему, что захотите, как справиться с такой ситуацией, включая Flash (ха!). Но если ответ был да, поздравляю. Путешествие в удивительность HTML5 уже началось.

Ваша процедура проверки будет выглядеть примерно так:

function hasGetUserMedia() {
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
				navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

или это:

navigator.getMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);
                       
if (navigator.getMedia) {
  // do something here
}

Затем вы должны явно запросить браузер предоставить доступ к определенному оборудованию, в данном случае микрофону. Вы можете легко запросить это разрешение, используя параметр в getUserMedia, используя {audio: true}. Вы также можете определить видео с помощью {video: true}, так что если вы действительно хотите получить доступ к ним обоим, просто напишите {audio: true, video: true}.

function prepareMicrophone() {
  navigator.mozGetUserMedia({audio: true}, function(localMediaStream) {
		audio.src = window.URL.createObjectURL(localMediaStream);
		
		audio.onloadedmetadata = function(e) {
			localStream = localMediaStream;
			// streamRecorder = localMediaStream.record();
		};
	}, onRejected);	
}

Чтобы дать разрешение, каждый браузер может реализовать свой набор правил. Chrome может показывать всплывающее окно вверху и спрашивать, предоставляете ли вы приложению доступ к вашему оборудованию (в моем случае, микрофон). Firefox немного сбивает с толку, устанавливая разрешение в настройках about: config, а затем изменяя значение по умолчанию media.navigator.enabled с false на true . Другие могут отличаться, поэтому сначала прочтите их документацию.

После получения разрешения браузер должен быть готов к записи голоса пользователя. Свойство source аудиообъекта, из которого вы создали, <audio>должно быть заполнено вызываемыми данными объекта MediaStream.

С этого момента вы можете начать записывать голос пользователя, используя только браузер и магию Javascript. Интересно, а? 😉

Теперь последняя часть отправляет голосовые данные на сервер, и это мой вывод:

Эти шаги не были завершены, так как моя конечная цель состояла в том, чтобы иметь возможность отправлять голосовые данные на сервер, и оказалось, что я не смог найти в спецификации или около того информацию о том, как использовать эти голосовые данные для дальнейшей обработки. на следующий уровень. Если один из вас нашел способ сделать это (или я, возможно, пропустил один из этих API), пожалуйста, поделитесь своими выводами в разделе столбцов, и я обновлю свой пост.

Вспышка на помощь!

Если вы хотите узнать пример и полные исходные коды, вы можете посетить http://ksetyadi.com/labs/audio-html5

33
Share: