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


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


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

Здравствуйте, дорогие читатели – 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" – */тип файла (для помощи браузеру).

 

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

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

 

ДЕМО СКАЧАТЬ

 

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

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

 

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




45 комментариевА что думаете Вы?

  1. Владимир

    Спасисбо Денис за инфорамацию. Попробую.

    А как сделать с видео за 5 минут.

    С уважением Владимир.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Владимир!

    А зачем делать с видео, если достаточно Ютуб вставить, за 30 секунд?

    [Ответить]

  2. Алексей

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

    не понял только про HTML 5. у меня первая строка на сайте <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0, а у тебя просто .

    Поэтому вопрос: Будет ли у меня проигрываться твой скрипт или нет?

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  3. Юлия

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  4. Андрей

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  5. Владимир

    Здравствуй Денис.

    Мой друг Анатолий Шанин живёт в Китае

    и он не может смотреть видео с Ютуба.

    Я хотел бы разместить видео у

    себя на хостинге и дать возможность

    просмотра.

    С уважением,Владимир

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Владимир!

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

    [Ответить]

    Владимир ответил:

    Здравствуй Денис.

    на Рутуб не пробывал.

    Я приобрёл хостинг на «iPage»

    50.9 USD на год.

    Условия предоставления хостинга:

    1 Место на диске: неограничено;

    2 Трафик: неограничено;

    3 MySQL-базы: неограничено;

    4 Количество email-ящиков: неограничено;

    5 Google AdWords бонус при покупке хостинга: 100$

    Вот и хотел разместить видео. Как показать видео

    я не знаю.

    С уважением, Владимир.

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Владимир ответил:

    Спасибо .

    С уважением, Владимир

    [Ответить]

    Денис Черников ответил:

    Пожалуйста!

  6. Иван CEO of PPC

    Всем привет!

    Еще можно пользоваться услугами podfm.ru, куда можно загрузить свои аудио по аналогии с YouTube.

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

    А ещё с помощью аудио можно продвигать свой блог.

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

    [Ответить]

  7. Николай Гижицкий

    Супер, Денис!

    Радует то, что на кнопках можно менять текст.

    Круто!

    Рад, что подписался на обновления Вашего блога!

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  8. Карен

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  9. Павел

    пишу такой код:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  10. Ксеня

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  11. Ира

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  12. Ира

    Денис, во-первых, спасибо, что ответили;

    во-вторых, спасибо за плеер;

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

    Спасибо за помощь.

    [Ответить]

    Денис Черников ответил:

    Не за что!

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

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

    [Ответить]

  13. Ира

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  14. Диана

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  15. Надежда

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  16. Shiawase

    Эть... Попробовала этим чудесным способом — работает. Радует, что без плагинов... Но вот проблема — в моей конкретной теме для этого плеера мало места. Придется как-то искать варианты. Жаль, что разработчики не учли необходимость менять размеры самого плеера...

    Кстати, плагин пробовала тоже, про который вы, Денис, писали ранее... Там чудесно всё настраивается, но сам плеер почему-то отображаться отказался...

    Это я к чему. Есть такие темы оформления, ага, слишком привередливые...

    А вам огромная благодарность за понятные наглядные объяснения!

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  17. Надежда

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  18. Станислав

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

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Станислав!

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

    [Ответить]

  19. Анастасия

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Данила ответил:

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

    [Ответить]

  20. Сага

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

    [Ответить]

  21. Алексей

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

Оставить комментарий!

Вверх