За останні кілька місяців, я познайомився з рядом різних бібліотек для взаємодії з HTML5 Audio API (HTML5 Audio елементом) і його простим API.
І тому вирішив поділитися з вами цими бібліотеками, щоб показати, який набір можливостей для роботи зі звуком ви можете отримати.
Webaudiox.js
Webaudiox.js не зовсім бібліотека, а набір допоміжних засобів для допомоги з Web Audio API. Webaudiox не має залежностей і буде працювати в будь-якому браузері, що підтримує Web Audio API.
Простий приклад коду з документації у вигляді шаблону:
// Після додавання webaudiox бібліотеки
var context = new AudioContext()
// Створюємо lineOut
var lineOut = new WebAudiox.LineOut(context)
// Завантажуємо звук і зразу відтворюємо його
WebAudiox.loadBuffer(context, 'sound.wav', function(buffer){
// ініціалізація AudioBufferSourceNode
var source = context.createBufferSource();
source.buffer = buffer
source.connect(lineOut.destination)
// початок відтворення звуку
source.start(0);
});
Як зазначено в першому коментарі до коду, спершу повинен бути доданий webaudiox.js файл для того, щоб все працювало.
Цей приклад показує лише основи синтаксису.
Щоб ближче познайомитись з можливостями, поглянемо на analyser2canvas. Цей допоміжний інтерфейс використовує AnalyserNode інтерфейс для відображення візуалізації звуку в режимі реального часу.
На Github є ряд інших прикладів. Для того, щоб демо працювало, браузер повинен підтримувати Web Audio API (докладніше про це пізніше). Цей набір допоміжних засобів не є поліфілом, тому, якщо вам потрібно підтримувати більш старі браузери - це не кращий вибір, звісно, якщо ви не плануєте використовувати інший скрипт або бібліотеку, як "план Б".
Webaudiox.js - хороший інструмент для HTML5-ігор.
Howler.js
Howler.js це - "JavaScript аудіо-бібліотека для сучасного вебу", яка використовує Web Audio API, але також підтримує HTML5 Audio.
Бібліотека має великий набір функцій. Деякі основні моменти:
-
Підтримка декількох форматів файлів для більш широкої браузерної підтримки;
-
Функції кешування Web Audio API і HTML5 Audio;
-
Multi-track відтворення (одночасне відтворення декількох аудіо-доріжок);
-
Глобальний контроль звуку;
-
Метод ланцюжка;
-
9KB або 3KB gzip;
-
Без залежностей.
Чудовий приклад для демонстрації синтаксису, тут визначається розташування різних звуків в межах одного звукового файлу:
var sound = new Howl({
urls: ['sounds.mp3', 'sounds.ogg'],
sprite: {
blast: [0, 1000],
laser: [2000, 3000],
winner: [4000, 7500]
}
});
sound.play('laser');
Синтаксис доволі простий і зрозумілий. Бібліотека має гарну браузерну підтримку:
-
Google Chrome 4.0+
-
Internet Explorer 9.0+
-
Firefox 3.5+
-
Safari 4.0+
-
Mobile Safari 6.0+
-
Opera 10.5+
Автори бібліотеки описують своє творіння як гарний інструмент для роботи зі звуком при створенні ігор. Проте, ви можете використовувати її для створення будь-яких додатків.
На Github ви можете більш детально ознайомитись з бібліотекою та прикладами.
Pedalboard.js
Як і попередні бібліотеки, Pedalboard.js також використовує Web Audio API, але на цей раз - для створення звукових ефектів для джерел звуку, особливо - для створення гітарних ефектів. Ви можете використовувати цей API для створення власних "педалбордів", за допомогою яких можна керувати звуком інструмента. Відмінний приклад, щоб показати вам силу цього API - це Pedals.io, гітарні ефекти в хмарі:
Синтаксис API є об'єктно-орієнтованим, доволі чистий і простий у використанні. Ось приклад:
// ініціалізація "stage"
var stage = new pb.Stage();
var ctx = stage.getContext();
// ініціалізація "board" і "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);
// додаємо pedals до board
board.addPedals([od, reverb]);
board.addPedalsAt(1, vol);
// налаштування для pedal
od.setDrive(0.7);
od.setLevel(0.7);
reverb.setLevel(0.3);
vol.setLevel(0.2);
stage.setBoard(board);
Це не сама корисна бібліотека для створення ігор та інших програм, але для музикантів вона може бути доволі корисним інструментом. Вона працює в будь- якому браузері, який підтримує Web Audio API.
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.
Fifer
Fifer \- це "мікро-бібліотека" для HTML5 Audio API.
Вона включає в себе ряд простих методів для роботи з аудіо для створення ігор або інших додатків.
Особливості 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 буде не доступний (наприклад, при використанні старих версій браузерів).
На Github є дуже простий [приклад](http://htmlpreview.github.io/?https://github.com/f5io/fifer- js/blob/master/example/index.html): звук "вибуху" у форматі MP3 (з SWF- фолбеком).
Браузерна підтримка
Якщо бібліотека, яку ви обрали використовує HTML5 Audio, підтримка доступна скрізь, включаючи IE9+. Але, якщо використовується Web Audio API, як у випадку з перерахованими вище бібліотеками, за винятком Fifer, то підтримка відбувається такими браузерами.
Не вистачає підтримки в деяких мобільних браузерах. Safari вимагає префікси постачальників (вендорів). Погана новина полягає в тому, що немає версії IE, який би підтримував Web Audio API, навіть IE11. Це відкрите питання, так що будемо сподіватися, що ситуація дуже скоро зміниться.
Ще немає коментарів