Небольшая библиотека для удобной работы с HTML аудио. Представляет собой класс-обёртку над стандартным классом Audio.

Чтобы использовать AudioJS достаточно скачать файл AudioJS.js либо скопировать код и поключить его к странице.

AudioJS.js - для подключения в качестве модуля. AudioJS.ts - TypeScript-версия.

В данном примере мы запустим очередь из нескольких аудиофайлов. Для этого достаточно создать экземпляр класса AudioJS и передать в его конструктор массив с URL-ми файлов, которые будут проигрываться:

let audiojs = new AudioJS(['URL1', 'URL2'])
audiojs.play()

В таком случае файлы в очереди не будут автоматически переключаться, нам придётся это делать вручную:

audiojs.play(1)

Где единица - индекс проигрываемого файла в массиве. В нашем примере проиграется URL2.

Чтобы они переключались автоматически нужно утсновить флаг autoplay, сделать это можно двумя способами.

Первый: изменяем свойство объекта

audiojs.autoplay = true

Второй: передаём его в конструкторе(оптимальный вариант)

let audiojs = new AudioJS({
  queue: ['URL1', 'URL2'],
  autoplay: true
})

Вы могли заметить, что мы передаём в конструктор уже не массив, а объект. Дело в том, что конструктор AudioJS имеет 4 перегрузки:

let audiojs = new AudioJS('FILE_URL')       // URL файла, который надо проиграть.
let audiojs = new AudioJS(['URL1', 'URL2']) // Массив адрессов очереди.
let audiojs = new AudioJS({                 // Объект параметраметров.
  src: 'URL',
  loopTrack: true
})
let audiojs = new AudioJS()                 // Без параметров.

В AudioJS есть система событий. В следующем примере мы запустим очередь и по её окончанию запустим новую:

let audiojs = new AudioJS({
  queue: ['URL1', 'URL2', 'URL3'],     // Очередь.
  autoplay: true,                      // Автопроигрывание.
  onQueueEnd: () => {             // Подписка на событие окончания очереди.
    console.log('Первая очередь закончилась.')
    audiojs.queue = ['URL4', 'URL5']     // Запускаем вторую очередь.
  }
})

Для подписки на события достаточно передать обрабочик в параметрах. Либо с помощью метода on:

audiojs.on('trackStop', () => {
  console.log('Трек был остановлен.')
})

Всего событий 7, вот их краткое описание:

• queueEnd - вызывается после окончания очереди.
• trackPlay - вызывается после запуска аудиофайла.
• trackPause - вызывается когда аудиофайл поставили на паузу.
• trackStop - вызывается когда аудиофайл был остановлен с помощью метода stop.
• trackEnd - вызывается когда аудиофайл закончился.
• trackLoad - вызывается когда аудиофайл загрузился.
• changeTime - вызывается каждую секунду во время проигрывания трека.

• src - URL проигрываемого файла.
• queue - очередь проигрываемых файлов.
• index - индекс, с которого начнётся проигрывание.
• autoplay - флаг автопроигрывания файла.
• loopTrack - флаг повтора аудиофайла.
• loopQueue - флаг повтора очереди.
• volume - значение громкости.
• preload - автозагрузка файла.
• time - время, с которого начнётся проигрываение файла.
• on<event_name> - подписка на событие.

В классе есть такие методы, как play, pause, stop, которые управляют проигрываением аудиофайла. Также вы можете переключать проигрываение файла в очереди с помощью next и back.

Все свойства класса при присвоении проверяют значения на валидность, что помогает вам избавиться от неурядицы с типами, но усложняет поиск ошибок в коде (для улучшения этой ситуации вскоре будет введена система выбрасывания ошибок).

Метод play может принимать как позицию (индекс) в очереди, так и полноценный URL в виде строки.

audiojs.play(1)
audiojs.play('URL')

stop на самом деле сбрасывает текущее время проигрывания на ноль и ставит аудиофайл на паузу, также вызывается событие trackStop.

audiojs.play()
audiojs.on('trackStop', () => {
  console.log('Вызван trackStop')
})
console.log(audiojs.time) // 20
audiojs.stop() // Вызван trackstop
console.log(audiojs.time) // 0
console.log(audiojs.status == AudioJS.statusType.paused && audiojs.paused == true) // true

Метод on имеет флаг root, с помощью котрого можно сделать переданный обработчик "корневым", то есть он будет заменять предыдущий обработчик.

audiojs.play()
audiojs.on('trackPause', () => {
  console.log('Первый обработчик')
})
audiojs.on('trackPause', () => {
  console.log('Второй обработчик')
})
audiojs.pause() // Первый обработчик \n Второй обработчик

audiojs.play()
audiojs.on('trackPause', () => {
  console.log('Первый обработчик')
})
audiojs.on("trackPause", () => {
  console.log('Второй обработчик')
}, true)
audiojs.pause() // Второй обработчик

Если стоит флаг loopQueue, то при вызове метода next на последнем аудиофайле в очереди будет начато проигрывание с начала.

audiojs.loopQueue = true
audiojs.queue = ['URL1', 'URL2']
audiojs.play(1)
audiojs.next() // Проигрывается URL1
console.log(audiojs.index) // 0

В теории с помощью событий можно зациклить код, так что будьте внимательней.

• status ['created'|'playing'|'paused'] - статус проигрывания.
• time [number] - аналог currentTime у Audio.
• duration [number] - аналог duration у Audio.
• muted [bool] - аналог muted у Audio.
• src [string] - URL текущего файла.
• preload [string] - аналог preload у Audio
• volume [number] - аналог volume у Audio
• queue [Array of string] - очередь аудиофайлов.
• index [number] - индекс текущего файла в очереди.
• loopQueue [bool] - зациклить очередь.
• loopTrack [bool] - зациклить трек.
• autoplay [bool] - автопроигрывание.

Все предложения и отчёты об ошибках можете писать в Issues, приятного использования.