Пользователь
0,0
рейтинг
29 декабря 2010 в 13:51

Разработка → audio.js — слушаем музыку в любом браузере

audio.js — это javascript библиотека, позволяющая использовать HTML5 тэг повсюду. Что скрывается за словом «повсюду». Если есть возможность использовать тэг , то будет использоваться он, иначе будет подключен плеер на flash. В библиотеку так же входит и UI отображение для этого плеера, которое может быть видоизменено с помощью css.

Как пользоваться.

Кладем audio.js, player-graphics.gif и audiojs.swf в одну папку.
Затем подключаем скрипт
<script src="/audiojs/audio.js"></script>

И инициализируем:
<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>

Теперь остается лишь вставить код на страницу
<audio src="/mp3/juicy.mp3" preload="auto" />

Примеры

Пара примеров от автора
Пример 1 — плеер и список для воспроизведения
Пример 2 — несколько плееров с проверкой работы следующих атрибутов: preload, loop и autoplay.

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

Подключение Flash по идее должно сделать данную библиотеку максимально кроссбраузерной. На данный момент проверено в следующих системах:
  • Mobile Safari (iOS 3+)
  • Safari (4+)
  • Chrome (7+)
  • Firefox (3+, w/ Flash)
  • Opera (10+, w/ Flash)
  • IE (6, 7, 8, w/ Flash)

Поддержка формата ogg

Библиотека audio.js направлена на проигрывание mp3. И на данный момент поддержки оgg нет, по той причине, что mp3 распространено гораздо больше. Так что подключение ogg имеет очень низкий приоритет.
Андрей Ребров @mythmaker
карма
153,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (37)

  • +2
    а api будет?
    • +3
      В смысле?
      • +39
        Просто стандартный вопрос. Можно еще спросить: «А когда будет поддержка Linux?» :)
        • 0
          Присоединяюсь к вопросу. К текущему проекту не смог подключить, браузер Chrome играет через раз. FF получше.
          • 0
            В итоге это окащался баг плеера — если на одной странице создать несколько штук с одинаковой ссылкой, то они прогружаются не параллельно, а поочереди.
            Пока не тыкнешь играть первую, остальные не грузятся.
      • +6
        www.schillmania.com/projects/soundmanager2/doc/#sound-object-properties
        возможность через js управлять воспроизведением файла и громкостью, отслеживать процесс вопроизведения и загрузки
  • –7
    в первом примере как-то не удобно сделали переключение треков (влево/вправо), логичнее вверх/вниз
    • +4
      вверх/вниз должна быть регулировка громкости, а лево/право — перемотка/смена трека. так что все там правильно.
    • –1
      Ага, влево-вправо обычно мотает назад-вперед трек
  • +1
    ААА!!! мои уши! скоро опять каждый третий сайт будет встречать меня музыкой!
    • 0
      Выключи звук браузера в микшере.
      • +1
        я через браузер зачастую радио слушаю.

        Разве что теперь к флешблоку, надо будет nojs поставить.
  • 0
    а еще для проигрывания аудио есть отличная библиотека <a href=«www.schillmania.com/projects/soundmanager2/>SoundManager 2 с более широкими возможностями
  • 0
    позволяющая использовать HTML5 тэг повсюду

    При dopctype xhtml необходимо расширить для валидности — добавить тэг audio и атрибуты.
    <!ELEMENT audio EMPTY >
    <!ATTLIST audio
    src CDATA #REQUIRED
    preload (auto, yes, no) auto
    >

    Или изменить doctype.
    • –2
      В xhtml 5-ой версии доктайп можно вообще убрать, аль оставить <!DOCTYPE html>
      • +3
        xhtml не было даже 2й версии
        • –1
          Во-первых, в черновике был; во-вторых, разве XHTML-синтаксис HTML 5 недопустимо так называть?
          • 0
            Именно «XHTML-синтаксис HTML 5», а не xhtml5.
            • 0
              А ничего, что «This specification defines version 5 of the XHTML syntax, known as "XHTML5"»?
              • 0
                Да, но xhtml5 — это не отдельный язык(как xhtml версии 1, 1.1, 2), а модуль xml разметки для html5.
      • 0
        И doctype и объявления xml можно опустить, но настоятельно) рекомендовано использовать их.
        Если не ошибаюсь для xhtml-синтаксиса должно быть назначено пространство xhtml в корневом тэге html с помощью атрибуты xmlns.
        • 0
          Сори код сожрал парсер.
          
          <html xmlns="http://www.w3.org/1999/xhtml">
          
  • 0
    При переходе по ссылке второго примера начинается проигрывание композиции (autoplay) — ничего криминального, но вот при возврате history back проигрывание продолжается! Браузер Chrome 8.
  • +2
    Даже как-то скучаю по временам MIDI-музыки через bgsound
  • +2
    Уже год как пользуюсь отличным плагином jPlayer — www.happyworm.com/jquery/jplayer/
  • +1
    Не увидел изменение громкости, нету?
  • +1
    Пару багов нашел.
    Песня начинает, загружаться до того, как я принял решение нажать плей.

    При переходе на новый трек, прогресс предыдущего трека сбрасывается не сразу.
    • 0
      Песня начинает, загружаться до того, как я принял решение нажать плей.

      Скорее всего стоит параметр preload
      • +1
        Тогда, по умолчанию, он должен быть равен false

        А то получается, как будто вы идете по рынку и вам в карман кладут килограммы морковки, хотя вы не просили.
        • 0
          а я бы не отказался от морковки-то) год кролика как-никак)
    • 0
      там же написано autoplay=«autoplay» (пример 2)
  • –4
    Где же вы были пару месяцев назад? Нужна была такая вещь для одного проекта, пришлось самому реализовывать.
  • 0
    А как насчет потокового аудио, с shoutcast радиостанций?
    • 0
      jPlayer умеет играть потоковое (http) mp3 (ogg не проверял), даже если адрес потока не заканчивается на ".mp3".
  • 0
    хочется громкость регулировать

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.