Sozdaiblog.ru
Назад

Как сделать аудиоплеер для сайта Без Плагинов за 1 минуту?

Опубликовано: 22.03.2013
Время на чтение: 8 мин
46
45

аудиоплеер для сайта

Здравствуйте, дорогие читатели – Sozdaiblog.ru!

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

Практически год назад, когда мой блог только  делал первые шаги навстречу цифровым потокам глобальной информации, я опубликовал статью о том, как установить аудиоплеер для сайта или блога с помощью плагина Audio Player.

На тот момент мне казалось, что это является идеальным решением для воспроизведения музыкальных композиций на страницах моего Веб-ресурса.

Но, как говориться технологии не стоят на месте и с приходом в «среду» Веб-разработчиков нового языка структурирования данных HTML5 появилось новое достойное решение для запуска аудио файлов на страницах Веб-сайтов.

Этим уникальным апогеем стал тег <audio>.

 

Как работает тег <audio>.

Чтобы подключить звуковые файлы на Веб-странице, достаточно в её HTML коде прописать следующее:

 

<audio src="Песенка.mp3" autoplay></audio>

 

При попадании на такую страницу, автоматически запускается аудио файл, который заранее должен быть загружен на сервер и указан в коде. За это отвечает «autoplay» находящийся внутри конструкции.

Проиграв до конца, Ваш аудио подкаст остановится и прекратит своё звучание. Для его самостоятельного перезапуска в существующую конструкцию необходимо внести атрибут «loop»:

 

<audio src="Песенка.mp3" autoplay loop></audio>

 

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

На мой взгляд — это неправильно. Представьте, Вы сидите за компьютером в час ночи, в соседней комнате спит маленький ребёнок, а тут, музыка, как заорёт.

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

 

Аудиоплеер для сайта.

Для создания полноценного аудиоплеера с элементами управления, достаточно к изначальному коду добавить атрибут «controls»:

 

<audio  src="Песенка.mp3" controls></audio>

 

Это позволит посетителям самостоятельно принимать решение о необходимости воспроизведения того или иного аудио файла.

ДЕМО

 

Единственная возникающая проблема при использовании подобного аудиоплеера – это совместимость аудио форматов в различных браузерах.Что это значит?

Как бы смешно это не звучало, но наш любимый MP3 поддерживается не всеми браузерами. Если взять за пример многоуважаемого господина «Mozilla Firefox», то он хавает только .ogg и .wav.

 

Таблица совместимости форматов.

Browser .mp3 .wav .ogg
Mozzila Firefox 3.6
Opera 10.63
Google Chrome 8.0
Apple Safari 5.0.3 (with QuickTime)
Microsoft IE 9 Beta

 

Но и эта проблема, не является трудноразрешимой для наших дорогих меломанов.

Просто необходимо записать несколько форматов одной и той же композиции, закинуть на свой сервер, а в HTML коде прописать следующее:

 

<audio controls>
<source preload="auto" src="Песенка.ogg" type="audio/ogg" />
<source preload="auto" src="Песенка.mp3" type="audio/mp3" />
</audio>

 

В этом коде я добавил ещё несколько новых атрибутов:

 

preload="auto" - */буферизация больших файлов.
type="audio/mp3" – */тип файла (для помощи браузеру).

 

Таким образом, Вы можете размещать любые аудио файлы на страницах своего Веб-ресурса, не боясь за их несовместимость с различными браузерами.

Но это ещё не всё. Я тут немного поработал и специально для Вас намутил, как мне кажется замечательный аудиоплеер для сайта, который очень красиво смотрится и подойдёт практически каждому.

 

ДЕМО СКАЧАТЬ

 

Его можно вставить в любую статью Вашего сайта или блога.

На сегодня это всё. До новых встреч…

 

С уважением, Денис Черников!

Поделиться
Похожие записи
Комментарии:
  • Владимир
    Опубликовано: 21.04.2013 Ответить на сообщение

    Спасисбо Денис за инфорамацию. Попробую.
    А как сделать с видео за 5 минут.
    С уважением Владимир.

    • Денис Черников
      Опубликовано: 21.04.2013 Ответить на сообщение

      Пожалуйста, Владимир!
      А зачем делать с видео, если достаточно Ютуб вставить, за 30 секунд?

  • Алексей
    Опубликовано: 21.04.2013 Ответить на сообщение

    Отличная работа, Денис! Наверно будет интересна тем, у кого много аудио подкастов.
    не понял только про HTML 5. у меня первая строка на сайте

    • Денис Черников
      Опубликовано: 21.04.2013 Ответить на сообщение

      Скрипт будет работать, даже если Вы его в одиночестве оставите, предварительно удалив всё содержимое Веб-страницы.

  • Юлия
    Опубликовано: 21.04.2013 Ответить на сообщение

    Спасибо, Денис, именно то что давно хотела, но лишний плагин ставить не хотелось-))

    • Денис Черников
      Опубликовано: 21.04.2013 Ответить на сообщение

      Пожалуйста, Юлия! Давно Вас не видел!

  • Андрей
    Опубликовано: 21.04.2013 Ответить на сообщение

    Давно хотел,но не хотелось перегружаться плагинами

    • Денис Черников
      Опубликовано: 21.04.2013 Ответить на сообщение

      Теперь самое время!

  • Владимир
    Опубликовано: 21.04.2013 Ответить на сообщение

    Здравствуй Денис.
    Мой друг Анатолий Шанин живёт в Китае
    и он не может смотреть видео с Ютуба.
    Я хотел бы разместить видео у
    себя на хостинге и дать возможность
    просмотра.
    С уважением,Владимир

    • Денис Черников
      Опубликовано: 21.04.2013 Ответить на сообщение

      Здравствуйте, Владимир!
      Да, слышал, что В Китае с этим есть проблема. Попробуйте найти другой видеохостинг, потому что на свой заливать видеоматериалы будет накладно. Кстати, Рутуб не пробовали?

      • Владимир
        Опубликовано: 21.04.2013 Ответить на сообщение

        Здравствуй Денис.
        на Рутуб не пробывал.
        Я приобрёл хостинг на «iPage»
        50.9 USD на год.
        Условия предоставления хостинга:
        1 Место на диске: неограничено;
        2 Трафик: неограничено;
        3 MySQL-базы: неограничено;
        4 Количество email-ящиков: неограничено;
        5 Google AdWords бонус при покупке хостинга: 100$
        Вот и хотел разместить видео. Как показать видео
        я не знаю.
        С уважением, Владимир.

        • Денис Черников
          Опубликовано: 21.04.2013 Ответить на сообщение

          Хорошо, Владимир! Я выполню Вашу просьбу!

          • Владимир
            Опубликовано: 21.04.2013 Ответить на сообщение

            Спасибо .
            С уважением, Владимир

          • Денис Черников
            Опубликовано: 21.04.2013 Ответить на сообщение

            Пожалуйста!

  • Иван CEO of PPC
    Опубликовано: 21.04.2013 Ответить на сообщение

    Всем привет!
    Еще можно пользоваться услугами podfm.ru, куда можно загрузить свои аудио по аналогии с YouTube.
    Они дают код плеера для разных блогплатформ, а также на плеере есть кнопочка для скачивания. В той же самой ситуации, про которую говорил Денис, если рядом спит ребёнок, это может быть очень удобно, скачаете и послушаете потом.
    А ещё с помощью аудио можно продвигать свой блог.
    Ваш подкаст вполне может заменить гостевую статью, об этом можно узнать подробнее в моей статье про гостевые подкасты.

  • Николай Гижицкий
    Опубликовано: 23.04.2013 Ответить на сообщение

    Супер, Денис!
    Радует то, что на кнопках можно менять текст.
    Круто!
    Рад, что подписался на обновления Вашего блога!

    • Денис Черников
      Опубликовано: 23.04.2013 Ответить на сообщение

      Да, там можно изменить любое название под свои нужды! Пользуйтесь на здоровье.

  • Карен
    Опубликовано: 12.05.2013 Ответить на сообщение

    Мой браузер опера. У меня есть сайт и хочу установить коды от мр3 и для видео. ютюб мне не нужен. Сайт у меня на основе Битрикс 1, отправьте пожалуйста коды от мр3 и видео на мой почтовый ящик

    • Денис Черников
      Опубликовано: 12.05.2013 Ответить на сообщение

      Во-первых, с оперой могут быть проблемы, так как он поддерживает не все коды и форматы. Во-вторых, с Битрикс 1 я не работаю. В третьих, все коды качаются с сайта самостоятельно.

  • Павел
    Опубликовано: 12.11.2013 Ответить на сообщение

    пишу такой код:
    в опере не начинается воспроизведение, а в фаерфоксе — вообще плеер появляется и тут же исчезает

    • Денис Черников
      Опубликовано: 12.11.2013 Ответить на сообщение

      Павел, чем я могу Вам помочь? Демо смотрели? Работает? Если да, то с кодом и всем остальным всё в порядке! А на счёт оперы, то там постоянно ничего не работает!

  • Ксеня
    Опубликовано: 24.12.2013 Ответить на сообщение

    Денис, огромное спасибо! Все понятно, доступно и просто!

    • Денис Черников
      Опубликовано: 24.12.2013 Ответить на сообщение

      Пожалуйста, Ксения!

  • Ира
    Опубликовано: 20.01.2014 Ответить на сообщение

    Чудесный аудиоплеер, только в Internet Explorer не работает... Как-то можно это исправить?

    • Денис Черников
      Опубликовано: 20.01.2014 Ответить на сообщение

      А зачем Вам Internet Explorer? Им уже давно ни кто не пользуется!

  • Ира
    Опубликовано: 20.01.2014 Ответить на сообщение

    Денис, во-первых, спасибо, что ответили;
    во-вторых, спасибо за плеер;
    и только в-третьих — Internet Explorer мне нужен только потому, что я на сайт выкладываю материалы, которые можно было бы смотреть или слушать в любом браузере — ну, привычка у меня такая — сделаю что-то, а потом проверяю, работает ли это в основных браузерах. Internet Explorer еще востребован какой-то частью населения, поэтому жаль, что плеер там не работает. Собственно, я даже не скачивала ваш аудиоплеер, а просто воспользовалась вашими советами, как вставить код — вот он-то и не работает в Internet Explorer. Может быть, есть там где-то крючок, который нужно открыть?
    Спасибо за помощь.

    • Денис Черников
      Опубликовано: 20.01.2014 Ответить на сообщение

      Не за что!
      Попробуйте в хэдере добавить строчку:

      после строчки:

  • Ира
    Опубликовано: 20.01.2014 Ответить на сообщение

    Спасибо, вставила строчку, но по-прежнему не работает. А что-нибудь еще можно придумать?

    • Денис Черников
      Опубликовано: 20.01.2014 Ответить на сообщение

      Пока у меня нет другого решения! Internet Explorer с HTML-5 не любит и не хочет работать!

  • Диана
    Опубликовано: 17.06.2014 Ответить на сообщение

    Спасибки! А название песни можно туда внедрить, чтобы показывалось?

    • Денис Черников
      Опубликовано: 17.06.2014 Ответить на сообщение

      Пожалуйста! Скорее всего можно, но я не задавался этим вопросом!

  • Надежда
    Опубликовано: 17.09.2014 Ответить на сообщение

    Здравствуйте Денис! я Устанавливаю ваш плеер в html код на свою страничку (открытку)он работает все чудесно, на следующий день захожу посмотреть открытку а его там просто нет, если не трудно подскажите в чем может быть проблема, заранее спасибо!

    • Денис Черников
      Опубликовано: 19.09.2014 Ответить на сообщение

      Здравствуйте, Надежда! Не знаю что Вам подсказать, у меня таких проблем не возникало!

  • Shiawase
    Опубликовано: 05.10.2014 Ответить на сообщение

    Эть... Попробовала этим чудесным способом — работает. Радует, что без плагинов... Но вот проблема — в моей конкретной теме для этого плеера мало места. Придется как-то искать варианты. Жаль, что разработчики не учли необходимость менять размеры самого плеера...
    Кстати, плагин пробовала тоже, про который вы, Денис, писали ранее... Там чудесно всё настраивается, но сам плеер почему-то отображаться отказался...
    Это я к чему. Есть такие темы оформления, ага, слишком привередливые...
    А вам огромная благодарность за понятные наглядные объяснения!

    • Денис Черников
      Опубликовано: 06.10.2014 Ответить на сообщение

      Пожалуйста! Менять размер плеера помощи стилей по-моему можно!

  • Надежда
    Опубликовано: 17.11.2014 Ответить на сообщение

    Денис Доброго времени суток, у меня вопрос по видео, как уменьшить размер, видео получается очень огромное.

    • Денис Черников
      Опубликовано: 21.11.2014 Ответить на сообщение

      Здравствуйте, Надежда! У этого плеера есть ряд функций, я так не помню их, всё есть в сети!

  • Станислав
    Опубликовано: 20.01.2015 Ответить на сообщение

    Здравствуйте, Денис! Все работает отлично, вот только меня заинтересовал вопрос — как сделать так, что бы была возможность прослушивания не одного трека, а что бы за первым автоматически запускался второй?

    • Денис Черников
      Опубликовано: 23.01.2015 Ответить на сообщение

      Здравствуйте, Станислав!
      Если честно, то я не задавался таким вопросом! Поищите в Интернете!

  • Анастасия
    Опубликовано: 04.02.2015 Ответить на сообщение

    Вы — гений! Спасибо 100 раз! Спасли меня и от лишнего плагина, и от необходимости установки/сборки плеера! Нужен был всего один трек на продающую страничку и благодаря вашему коду все получилось с 1 раза! Потратила 2 часа, придумывая как решить задачу и тут Ваша статья!!! От души благодарю!

    • Денис Черников
      Опубликовано: 11.02.2015 Ответить на сообщение

      Пожалуйста, рад быть полезным!

      • Данила
        Опубликовано: 21.10.2015 Ответить на сообщение

        Здравствуйте! Извиняюсь, не нашёл где оставлять свой комментарий, потому пишу ответом. Но, собственно, имею свой вопрос — можно ли сделать, чтобы плеер прокручивался вместе со страницей? Плавающий блок не подходит )

  • Сага
    Опубликовано: 10.08.2015 Ответить на сообщение

    МОНО Приобрести ВАС ПЛЕЕР И в Какую Цену?

  • Алексей
    Опубликовано: 03.04.2016 Ответить на сообщение

    спасибо! нужный материал. никак не мог понять отчего у меня ничего не воспроизводится, пока не прочел у вас, что опера не играет mp3 )

    • Денис Черников
      Опубликовано: 17.04.2016 Ответить на сообщение

      Всегда, пожалуйста!

  • Виктор
    Опубликовано: 30.05.2016 Ответить на сообщение

    Мне очень нравится это плеер, но можно ли его приладить для потокового аудио? Если нет, то какой вы посоветуете и если можно с кодом.

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.