JavaScript библиотека для проигрывания mp3

Проигрывание mp3 файлов с помощью JavaScript, давно хотел найти такую библиотеку, т.к. flash проигрыватели меня не устраивали по определенным требованиям функциональности, и в одном из последних проектов сам заказчик помог мне в этом. Ну конечно же проигрывание музыки с помощью чистого JS не возможно, поэтому в данной библиотеке используется flash объекты, но все манипуляции с аудио файлами происходят через API JS библиотеки.

Представляю вашему вниманию библиотеку SoundManager 2

Детально я рассматривать её возможности не буду т.к. в ней имеется множество методов и функций,
все это хорошо описано в документации, я лишь рассмотрю плюсы а также опишу и покажу живой пример.

Пример работы:

Вы можете открыть пример в новом окне.

Базовые возможности библиотеки (Flash 8+):

  • Загрузка, проигрывание, остановка, пауза, отключение и настройка громкости звука через JavaScript
  • События: загрузка, проигрывание, остановка и т.п.
  • Поддержка тегов формата mp3 (title, artist, genre и т.д.)

При использовании Flash 9 и выше можно добавить:

  • Поддержка MPEG-4 video и audio
  • Проигрывание нескольких дорожек
  • Частотные данные
  • зменение громкости по каналам L/R
  • Буферизация аудио

Еще несколько плюсов:

  • Хорошая API документация с примерами и заметками
  • Возможность дебагинга с помощью console.log()

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

Код примера:

<script type="text/javascript" src="soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript">
    var mySound = {};
    var positionStep = 2000; // шаг для прокрутки 2сек
    soundManager.url = 'swf/soundmanager2.swf'; // url swf файла
    // инициализируем soundManager
    soundManager.onload = function() {
        var _r = document.getElementById('graphPixels'); // индикатор позиции проигрывания
        // создаем объект аудио файла!
        mySound = soundManager.createSound({
            id: 'aSound',
            url: 'inc/Sting-Fields_of_gold.mp3', // url mp3 файла
            volume: 20, // громкость воспроихводимого файла
            autoLoad: true,
            whileplaying: function() {
                // функция генерирующая длину для индикатора позиции
                var _procent = Math.round(this.position/this.duration * 100);
                _r.style.width = _procent + '%';
            },
            onstop: function(){
                // обнуление длины индикатора позиции
                _r.style.width = 0 + '%';
            }

        });
    }
    // Промотка вперед на 2сек
    function next() {
        mySound.position += positionStep;
        if (mySound.position > mySound.duration) mySound.position = mySound.duration;
        mySound.setPosition(mySound.position);
    }
    // Промотка назад на 2сек
    function prev() {
        mySound.position -= positionStep;
        if (mySound.position < 0) mySound.position = 0;
        mySound.setPosition(mySound.position);
    }
    // Громкость
    function setVolume(_vol){
        mySound.setVolume(_vol*10)
        var _ol = document.getElementsByTagName('ol')[0];
        var _a = _ol.getElementsByTagName('a');
        for (var i=0; i < _a.length; i++) {
            if (i < _vol) _a[i].className = 'active';
            else _a[i].className = '';
        }
    }
</script>

HTML код примера:

<div>
    <div id="graphPixels">&nbsp;</div>
</div>
<ul>
    <li><input type="button" onclick="prev();" value="<<" /></li>
    <li><input type="button" onclick="mySound.play();" value="Start" class="start" /></li>
    <li><input type="button" onclick="mySound.togglePause();" value="Pause" /></li>
    <li><input type="button" onclick="mySound.stop();" value="Stop" /></li>
    <li><input type="button" onclick="next();" value=">>" /></li>
</ul>
<ol>
    <li>Громкость:</li>
    <li><a href="#" onclick="setVolume(1)" class="active">10</a></li>
    <li><a href="#" onclick="setVolume(2)" class="active">20</a></li>
    <li><a href="#" onclick="setVolume(3)">30</a></li>
    <li><a href="#" onclick="setVolume(4)">40</a></li>
    <li><a href="#" onclick="setVolume(5)">50</a></li>
    <li><a href="#" onclick="setVolume(6)">60</a></li>
    <li><a href="#" onclick="setVolume(7)">70</a></li>
    <li><a href="#" onclick="setVolume(8)">80</a></li>
    <li><a href="#" onclick="setVolume(9)">90</a></li>
    <li><a href="#" onclick="setVolume(10)">100</a></li>
</ol>

Tags: ,

Вторник, Апрель 14th, 2009 JS Plugins, JavaScript

4 Коментариев to JavaScript библиотека для проигрывания mp3

  • accimarneCire:
    02.05.2009 в 11:09

    Респект!

  • Морозов:
    03.05.2009 в 14:12

    Продолжение будет?
    Были бы признательны :-)

  • akuba:
    29.05.2009 в 14:13

    только ссылки на регулировке громкости нужно бы с якорей сменить

  • Елена:
    17.12.2010 в 02:36

    Здравствуй, занимаюсь веб программированием уже три дня и до сих пор не могу понять как мне разместить с помощью JS на своём сайтике аудио и скрипт для обратной связи. Если кто-то может помочь новичку, то напишите пожалуйста мне в Skype – lenyysia

    • Оставить сообщение

    Rotaban.ru - биржа банерной рекламы
    Видео курс - "JavaScript. Больше, чем просто сайт"

    Архивы