SoundManager — Проигрывание аудио в JavaScript

Еще месяца 3 назад, мне нужно было играть музыку на сайте силами JavaScript. Пробовал разные плеера, но это было не то. Позже наткнулся на SoundManager, и он меня устроил.

Знакомство

SoundManager — дополнение к JavaScript для проигрывания музыкальных файлов, которое работает на flash & HTML5. Так сказать, гибрид. Сейчас flash уже искореняется, и к нему на замену приходит HTML5. Поэтому, если у пользователя нет flash, то у него должен быть браузер с поддержкой HTML5, и наоборот. Тут конечно присутствуют различные минусы с HTML5, например, браузер не поддерживает mp3, но это уже другой разговор.

Функции скрипта

Для начала, нужно создать «место» под музыку. Делается это функцией createSound, пишется id песни, и с помощью этого id будет происходить управление данной музыкой.

soundManager.createSound({
 id: 'mySound', // Тот самый ID
 url: '/audio/mysoundfile.mp3' // Путь до музыкального файла
});

И так, музыку мы создали. Чтобы воспроизвести ее, нужно знать ID и функцию play.

soundManager.play('mySound'); // Указывается ID песни.

Можно также указать параметры:

soundManager.play('mySound',{volume:50,onfinish:playNextSound}); // ID, громкость - 50, при окончании песни выполнить функцию playNextSound.

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

soundManager.pause('mySound');
// Или так, чтобы остановить все включенные песни:
soundManager.pauseAll();

Чтобы в дальнейшем опять воспроизвести музыку с момента паузы — нужно использовать функцию resume:

soundManager.resume('mySound');

Если в дальнейшем воспроизводить музыку не понадобится — используем функцию stop или stopAll:

soundManager.stop('mySound');
//
soundManager.stopAll();

Если необходимо уменьшить/увеличить громкость — есть функция setVolume:

soundManager.setVolume('mySound',50); // Устанавливаем громкость песни под ID "mySound" на половину

Для перемотки существует функция setPosition:

soundManager.setPosition('mySound',2000); // Перематываем песню под ID "mySound" на 2 секунды (Время указано в миллисекундах)

Чтобы приглушить песню, нужна функция toggleMute:

soundManager.toggleMute('mySound');

Это были основные функции SoundManager'а.

Параметры

Устанавливаются при помощи soundManager.setup().

soundManager.setup({ url: '/path/to/swfs/', flashVersion: 9 });

Основные параметры:

url: '/path/to/swf-files/',
// Директория, где находятся flash-файлы (soundmanager2.swf, soundmanager2_flash9.swf...)
bgColor: '#ffffff',
// SWF цвет фона.
consoleOnly: true,
// Если true - не создавать файлы с логами.
debugMode: true,
// Включает режим логов(console.log() with HTML fallback)
flashVersion: 8,
// Версия флэша, большинство функций в 9 версии.

События

Основные: onfinish, onplay, onpause, onstop, onresume

soundManager.play('mySound',{
  onfinish: function() {
    alert('Песня '+this.id+' была проиграна.');
  }
});

Подключение к сайту

Подключается он как и все скрипты:

<script type="text/javascript" src="путь/до/скрипта/soundmanager2.js"></script>

Далее, в