Рубрика «webaudio»

Работаем с аудио: загрузка файлов, регулировка звука, прогресс, визуализация - 1

Доброго времени суток, друзья!

Хочу поделиться опытом работы с аудио. Под «аудио» я подразумеваю HTMLAudioElement и Web Audio API.

Что будем делать?

Мы создадим нечто вроде плеера для одного трека (о полноценном проигрывателе — в одной из следующих статей).

Условия:

  • Возможность загрузки файла из любого места на жестком диске как по нажатию кнопки, так и перетаскиванием.
  • Круговой графический и текстовый индикаторы прогресса.
  • Текстовый индикатор громкости звука.
  • Визуализация аудио данных.
  • Управление плеером с помощью клавиатуры.

В сети полно материалов как по HTMLAudioElement, так и по WAAPI, поэтому я сделаю акцент на практической составляющей. Кроме аудио, мы будем работать с drag-drop и canvas.

Без дальнейших предисловий…
Читать полностью »

Предположим, у нас есть несколько мониторов. И нам захотелось использовать эти мониторы в качестве гирлянды. Например, заставить их моргать одновременно. Или, может быть, синхронно менять цвет согласно какому-то умному алгоритму. И что, если сделать это в браузере – ведь тогда можно будет подключить к этому и смартфоны, и планшеты. Всё что есть под рукой.

«Когда часы двенадцать бьют». Или гирлянда в браузере - 1

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


С чем можно столкнуться при синхронизации Web Audio и геймплейных часов внутри javascript-приложения; сколько вообще разных «часов» есть в javasctipt (три!) и зачем все они нужны, а также готовое приложение для node.js – под катом.Читать полностью »

WebAudioFont — новая технология сходная с DLS, но предназначенная для применения в веб-приложениях Javascript.

На данный момент позволяет использовать 400 (четыре сотни) музыкальных инструментов для воспроизведения звука или сгенерированной музыки.

image

Читать полностью »

Последнее обновление Google Chrome для Android привело к тому, что экран при скроллинге сильно дёргается и использовать браузер стало крайне некомфортно — реакцию пользователей на эту проблему, которую исправлять в ближайшем времени, кажется, не собираются, можно увидеть в комментариях в Play Market.

Команда инженеров в рамках уже известного ранее экспериментального проекта Chrome Experiment показала новый проект "Хоббит: Пустошь Смауга" (по мотивам «Хоббита» Толкиена, укороченная ссылка сразу для неиспорченного обновлением браузера: goo.gl/EOdnHI), созданный специально для мобильного Chrome.
Читать полностью »

Демонстрация возможностей WebRTC, WebGL и Go от Google

Google показала один из своих экспериментов по использованию новейших возможностей веб-технологий — игры CubeSlam, где можно сыграть с другом через интернет, если его браузер также поддерживает WebRTC.

Сама игра довольно проста, а графика её «пикселизирована» (вероятно, в угоду производительности). Игровой процесс — перебрасывание кубика, который движется по игровому полю и который необходимо в нужный момент отбить. По ходу дела можно сбивать различные препятствия, получая нечто вроде достижений; иногда игра оживляется «зрителями» в виде животных, бродящих вокруг.

Помимо игры с компьютером, вернее, с медведем Бобом, в неё можно сыграть со другом — для этого надо отправить ему ссылку и игра сообщит, когда предложение будет принято. Если друг захочет включить веб-камеру, то его будет видно в реальном времени на щите игрового поля и с ним можно будет полноценно общаться.

Таким образом, главное достоинство CubeSlam — это, конечно, не зрелищность или геймплей, а демонстрация возможностей интерактивного взаимодействия пользователей только через браузер.
Читать полностью »

Примеры работы с Web Audio от BBC

Команда R&D BBC опубликовала свой проект, в котором с помощью Web Audio воссоздала парочку устройств, использовавшихся на BBC около 1960-х.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js