Рубрика «webaudio»

в 8:19, , рубрики: webaudio, WebGL2, космос, процедурная генерация, разработка игр, шейдеры

Привет. Я делаю одиночную космическую игру VoidVibe: полёт, бой, торговля, станции, морпехи, абордаж. Работает в браузере (WebGL2) и на Android, оффлайн. Вся игра это один index.html. Внутри нет ни одной картинки, ни одного звукового файла, ни одной библиотеки. Для себя я поставил лимит 512 КБ по gzip на весь файл. Сейчас release-сборка весит 193 КБ из 512, а dev-сборка с панелью разработчика 264 КБ.

Здесь без воды: как устроен генератор, как лежат модели, что делают шейдеры, как синтезируется звук, как собирается файл и где я набил шишки. Код местами урезан, чтобы влезть в статью.

Демо можно потрогать тут: https://void-vibe.com/playЧитать полностью »

в 6:19, , рубрики: audio player, htmlaudioelement, javascript, progressbar, visualization, visualizer, webaudio, Программирование, прогресс-бар, Разработка веб-сайтов

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

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

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

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

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

Условия:

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

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

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

в 12:10, , рубрики: javascript, timer, webaudio, Новый Год, Программирование, Разработка веб-сайтов, снег

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

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

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

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

в 19:06, , рубрики: javascript, webaudio, звук и музыка, звуковой дизайн, разработка игр

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

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

image

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

в 9:54, , рубрики: android, Google Chrome, javascript, webaudio, WebGL, метки: , , ,

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

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

в 5:59, , рубрики: Google Chrome, webaudio, WebGL, WebRTC, Облачные вычисления, метки: , , ,

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

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

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

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

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

в 9:02, , рубрики: bbc, coffee script, JS, Web Audio, webaudio, Веб-разработка, Работа со звуком, тёплый ламповый, метки: , , , ,

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

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

Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js