Сегодня мы хотели бы сделать небольшой обзор различных библиотек, которые используют HTML5 Audio API, а также более известный HTML5 Audio Element с более простым API.
Мы хотели бы показать вам некоторые из этих библиотек, для того чтобы вы могли ими воспользоваться в случае, если решите создать игру или приложение, которое включает в себя работу со звуком.
Некоторые демо, которые включают в себя какую-то из этих библиотек, довольно неплохие, и код для каждой из них прост и легок в работе.
1. Webaudiox.js
Webaudiox.js – это не совсем библиотека, а набор помощников в работе с Web Audio API. Он абсолютно независим и будет работать на любом браузере, который поддерживает Web Audio API.
Документация состоит из простого примера кода в форме газетного материала:
// after including the webaudiox library
var context = new AudioContext()
// Create lineOut
var lineOut = new WebAudiox.LineOut(context)
// load a sound and play it immediatly
WebAudiox.loadBuffer(context, 'sound.wav', function(buffer){
// init AudioBufferSourceNode
var source = context.createBufferSource();
source.buffer = buffer
source.connect(lineOut.destination)
// start the sound now
source.start(0);
});Как уже было сказано, для того, чтобы файл с помощниками webaudiox.js работал, он должен быть включенным. Для того, чтобы понять, как это работает, посмотрите analyser2canvas Helper. Этот помощник использует преимущества AnalyserNode Interface для того, чтобы делать визуализацию воспроизводимого звука в режиме реального времени.
У webaudiox.js GitHub repo есть много различных примеров, которые можно попробовать в действии. Но, конечно, ваш браузер должен поддерживать Web Audio API. Этот набор помощников не является полизаполнением, поэтому браузер с более поздней поддержкой не будет лучшей идеей, если только вы не хотите объединить его с другим скриптом, библиотекой или ресурсом.
По нашему мнению, webaudiox.js – отличный выбор для работы с HTML5 играми.
2. Howler.js
Howler.js рекламируется просто как «библиотека аудио JavaScript для современной сети», которая возвращается к Web Audio API и отходит от аудио HTML5.
У этой библиотеки достаточно обширные возможности, вот некоторые из них:
- поддержка различных форматов файлов для более широкой поддержки браузера.
- кеширование свойств Web Audio API и HTML5 audio
- одновременное мультитрековое воспроизведение
- общий и потрековый mute/unmute, а также регулировка громкости
- формирование цепочки метода
- 3KB gzip без зависимостей
Описание на официальном сайте включает в себя некоторое количество demo, показывающие возможности программы, поэтому советуем ват туда заглянуть.
Обратите внимание на пример так называемого «спрайтового звука», где вы найдете местонахождение разных звуков в одном звуковом файле.
var sound = new Howl({
urls: ['sounds.mp3', 'sounds.ogg'],
sprite: {
blast: [0, 1000],
laser: [2000, 3000],
winner: [4000, 7500]
}
});
// shoot the laser!
sound.play('laser');API имеет красивый, чистый вид и создает такое впечатление, что работать с ним не составит особого труда. Поскольку используется новый Web Audio API, поддержка браузера соответствующая.
Авторы библиотек описывают это как «отлично подходящая для игр», но она также хороша для любого другого веб-приложения.
3. Pedalboard.js
Как и предыдущие библиотеки, Pedalboard.js использует Web Audio API, но на этот раз он используется для создания звуковых эффектов на аудио источниках, базируется на звуковых эффектах гитары.
Проще говоря, вы можете создать свою рабочую панель и управлять гитарными звуками. Ярким примером является Pedals.io «эффект гитары в облаке»:
Синтаксис для API ориентирован на объект, поэтому он достаточно чист и прост в использовании. Вот пример:
// initialize the stage and get the context var stage = new pb.Stage(); var ctx = stage.getContext(); // initialize the board and pedals var board = new pb.Board(ctx); var od = new pb.stomp.Overdrive(ctx); var reverb = new pb.stomp.Reverb(ctx); var vol = new pb.stomp.Volume(ctx); // add pedals to board board.addPedals([od, reverb]); board.addPedalsAt(1, vol); // tweak pedal settings od.setDrive(0.7); od.setLevel(0.7); reverb.setLevel(0.3); vol.setLevel(0.2); // set the board on stage and start playing! stage.setBoard(board);
Этот код построен на объекте «stage», содержащим «board», который, в свою очередь, содержит «pedals», с помощью чего создаются желаемые эффекты.
Следует признать, что эта библиотека не обязательно будет самой полезной для создания игр и других приложений, но при креативном подходе можно придумать интересный материал. Эта библиотека работает в любом браузере, поддерживающем Web Audio API.
Если вам понравится эта библиотека, вы можете посмотреть, как работает Band.js, «композитор» API, поддерживающий ритмы, большое количество инструментов, секции воспроизведений и сложные музыкальные размеры.
4. Wad
Wad предназначен для Web Audio DAW (Digital Audio Workstation) и описывается как «jQuery для ваших ушей». Эта библиотека упрощает работу с аудио, используя Web Audio API.
Вот пример кода, где написан трек пианино, с использованием «квадратной» волны:
var piano = new Wad({
source : 'square',
env : {
attack : .01,
decay : .005,
sustain : .2,
hold : .015,
release : .3
},
filter : {
type : 'lowpass',
frequency : 1200,
q : 8.5,
env : {
attack : .2,
frequency : 600
}
}
})
piano.play({ pitch : 'C5' })
piano.play({ pitch : 'Eb5', filter : { q : 15 } })
piano.play({ pitch : 'F5', env : { release : .2 } })Повторимся, что это достаточно чистый API с большим количеством возможностей. Вы можете протестировать вышенаписанный код с некоторыми другими примерами (барабан, флейта) на демо странице.
Есть такие особенности как установка стереопозиции, 3D установка, фильтры, реверберация, вход микрофона и способность включать эффекты из внешних библиотек.
Но есть один недостаток в этой библиотеке: она не работает в Firefox, и в описании авторы это упоминают.
5. Fifer
Fifer – это «микро лаборатория» для HTML5 Audio API, которая работает с лайт версией Flash на более старых браузерах.
Код включает в себя простые и образующие цепь методы для работы с играми и другими приложениями.
Некоторые особенности API:
- Предварительная загрузка и регистрация файлов.
- Файлы игр с дополнительной цепью и отзывом конца.
- Выключение или уменьшение звука отдельных файлов или всех файлов одновременно.
Пример кода:
Fifer({ swf : '../Fifer.swf' }).loaded(function(files) {
console.log('loaded');
this.bang();
}).onAudioProcess(function(arr) {
console.log(arr);
}).registerAudio('bang','bang.mp3',true)Эта библиотека довольно простая, она могла бы быть хорошим инструментом в работе над большими проектами. Большой плюс – она перейдет на Flash, если Web Audio API будет недоступен.
И обратите внимание, что этот API основан на HTML5 audio, а не на Web Audio API, так что есть поддержка IE9 для HTML5, IE8 и ранней версии Flash.
У repo есть простой пример, который вы можете просмотреть здесь. Ничего особенного, просто ударный звук в формате MP3 с отступлением к SWF.
Ресурсы Web Audio API
Все библиотеки, которые мы с вами разобрали, позволяют вам пользоваться возможностями Web Audio API без необходимости копаться слишком глубоко, чтобы достать хороший звук, обеспечивающий хороший, чистый API.
Если вы хотите изучить API и создавать свои собственные произведения, советуем вам заглянуть в книгу Бориса Смус (Boris Smus) Web Audio API от O’Reilly, которая доступна он-лайн с версией для печати.
Также, есть введение в Web Audio на HTML5 Rocks и документ на тему MDN.
Поддержка браузера
Если библиотека, которую вы выбрали, использует HTML5 Audio, то она поддерживается на всех браузерах, включая IE9+. Но если библиотека использует Web Audio API, то она будет работать не на всех браузерах.
Нет поддержки некоторых мобильных браузеров, а Safari требует разрешение от продавца. Плохая новость – ни одна версия IE не поддерживает Web Audio API, даже IE11. Это нерешенный вопрос команды IE, который, мы надеемся, скоро будет решен.
Высоких конверсий!
