Как сделать аудиоплеер для сайта Без Плагинов за 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" – */тип файла (для помощи браузеру).

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

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

ДЕМО СКАЧАТЬ

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

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

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