jkeks блог


audio.js — маленький HTML5 аудио плеер.



7.8.2013 1666 просмотров ;)


audio.js — малюсенький JavaScript скрипт, который позволяет проигрывать аудио в любом месте страницы.

Он исполользует нативный <audio> тэг где это возможно и flash для где это невозможно. Плеер поддерживает только MP3.

Установка

  1. Положите audio.js, player-graphics.gif и audiojs.swf в одну директорию.
  2. Подключите файл audio.js:
    <script src="/audiojs/audio.min.js"></script>
  3. Инициализируйте audio.js:

    <script>
      audiojs.events.ready(function() {
        var as = audiojs.createAll();
      });
    </script>
  4. И как обычно используйте <audio> тэг где хотите и как угодно.

    <audio src="/mp3/juicy.mp3" preload="auto" />

Примеры

Вот несколько примеров кастомизации  и использвоания audio.js:

Пример 1: Несколько загрузок

Пример 2: Измененный CSS

Пример 3: Много плееров сразу, тест  preload, loop и autoplay атрибутов

Пример 4: Немного другой плеер

Пример 5: Измененный плейлист

 

Поддерживаемые браузеры

Работает прекрасно в следующих версиях браузеров:

  • Mobile Safari (iOS 3+)
  • Android (2.2+, w/Flash)
  • Safari (4+)
  • Chrome (7+)
  • Firefox (3+, w/ Flash)
  • Opera (10+, w/ Flash)
  • IE (6, 7, 8, w/ Flash)

 

Исходники

К черту документацию. Скрипт настолько крохотный и так прекрасно аннотирован, что нет никакого смысла писать еще и документацию. Хотя возможно это произойдет когда-нибудь.

Аннотированные исходники / Исходники на GitHub

Лицензия

audio.js  выпущен под MIT лицензией, так что можете делать что хотите.

От себя

Почему audio.js, а не SM2 или jPlayer ?

Потому что он маленький и простой, потому что можно испльзовать <audio> тэг, да и вообще у меня какая-то любовь к одностраничным проектам.





Видеочат рулетка
jAntivirus Рейтинг@Mail.ru