SoundManager - JavaScript API для воспроизведения звука
Пока что JavaScript не способен самостоятельно воспроизводить звуковые файлы, например mp3. Однако если призвать на помощь технологию Flash, то может получиться очень неплохая связка для работы с аудио. Именно такую библиотеку я совсем недавно обнаружил в сети. Итак, SoundManager - библиотека, при помощи которой можно добавлять звуковые ролики и управлять ими при помощи JavaScript. Само же воспроизведение звука будет осуществляться маленьким (всего 2,2 К) Flash файлом, который автоматически подгружается библиотекой. Само собой разумеется, что браузер должен поддерживать Flash (не менее 8-й версии).
Чтобы добавить SoundManager в веб страницу, нужно подключить скрипт soundmanager2.js:
<script type="text/javascript" src="soundmanager2.js"></script>
Когда SM2 загрузится и будет готов к работе, он вызовет либо событие soundManager.onload() в случае успешной загрузки либо soundManager.onerror() в случае ошибки. Если путь к файлу soundmanager2.swf не стандартный, то нужно указать путь к нему следующим образом:
soundManager.url = '../../soundmanager2.swf';
Теперь, когда библиотека готова к работе, можно создавать объект “звук” и воспроизводить аудио файлы. Простейший способ создать объект и воспроизвести файл в одном вызове:
soundManager.play('mySound','/path/to/some.mp3');
Здесь обязательно указать уникальный ID для создаваемого объекта.
Также можно создать объект, чтобы воспроизводить его по необходимости:
// создание объекта "звук"
soundManager.createSound('myNewSound','/path/to/some.mp3');
// установка громкости и воспроизведение
soundManager.play('myNewSound');
soundManager.setVolume('myNewSound',50);
soundManager.setPan('myNewSound',-100);
Более полный пример кода:
<script type="text/javascript" src="../../script/soundmanager2.js"></script>
<script type="text/javascript">
soundManager.url = '../../soundmanager2.swf'; // указываем путь к swf файлу
soundManager.debugMode = true;
soundManager.consoleOnly = false;
soundManager.onload = function() {
// создаем аудио ролики
soundManager.createSound('aDrumSound','../mpc/audio/AMB_SN13.mp3');
soundManager.createSound({
id: 'mySound',
url: '../mpc/audio/sound.mp3',
autoLoad: true
});
}
function someSound(){
soundManager.play('mySound');
}
</script>
Здесь, при помощи функций soundManager.createSound() создаются два аудио ролика, которым даются уникальные ID. Для их воспроизведения используется функция soundManager.play(). При вызове функции someSound() будет воспроизводиться ролик sound.mp3.
Это всего лишь простой пример. В API имеются функции для управления громкостью, перемоткой и др., можно устанавливать обработчики для событий onload, onfinish, onjustbeforefinishtime и т.д. Также поддерживается потоковое воспроизведение, автозагрузка, автозапуск и многое другое.
.
3 мая 2008 в 21:40
Насколько я знаю, Yahoo доказал что можно обойтись только скриптом
Yahoo! Media Player
3 мая 2008 в 22:25
Нет, Yahoo! Media Player тоже использует флэш файл. Ради интереса сделайте простое приложение, которое использует этот плеер и посмотрите на заголовки, которые он отправляет через LiveHTTPHeaders. Я к примеру видел что он подгружает следующий файл: http://l.yimg.com/us.yimg.com/i/us/mus/swf/ymwp/flashsound-1.5.22.swf
8 мая 2008 в 20:55
[…] работы со звуком через JavaScript (о ней я недавно написал статью), поэтому не удивительно, что феерверк сопровождается […]