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 имеет очень низкий приоритет.
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 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
                                  хочется громкость регулировать

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