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 имеет очень низкий приоритет.
    Метки:
    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

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

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