5 бібліотек та API для роботи з HTML5 Audio

За останні кілька місяців, я познайомився з рядом різних бібліотек для взаємодії з 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 є дуже простий приклад: звук "вибуху" у форматі MP3 (з SWF-фолбеком).

Браузерна підтримка

Якщо бібліотека, яку ви обрали використовує HTML5 Audio, підтримка доступна скрізь, включаючи IE9+. Але, якщо використовується Web Audio API, як у випадку з перерахованими вище бібліотеками, за винятком Fifer, то підтримка відбувається такими браузерами.

Не вистачає підтримки в деяких мобільних браузерах. Safari вимагає префікси постачальників (вендорів). Погана новина полягає в тому, що немає версії IE, який би підтримував Web Audio API, навіть IE11. Це відкрите питання, так що будемо сподіватися, що ситуація дуже скоро зміниться.

Джерело