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

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

 

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

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

 

ДЕМО СКАЧАТЬ

 

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

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

 

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