Аудио в html вставка – Добавление и предварительный просмотр аудио HTML5 на веб-страницах Dreamweaver

Leave a Comment / Html / By /

Содержание

Аудио html | Programmirovanie-dla-sсhool

До HTML5, которая значительно адаптировалась к потребностям современного Интернета, включая аудиофайл на странице HTML, обязательно требовала использования тега <object>. Хотя этот тег все еще используется (не только для включения аудиофайлов), в HTML5 появился новый тег, <audio> html разработанный специально для этой цели.

В этом уроке мы увидим, как использовать новый тег, <audio> введенный в HTML5. Для этого давайте начнем с простого примера:

<audio controls>
  <source src="music.mp3" type="audio/mp3">
</audio>

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

controls позволяет нам фактически вставить аудиофайл в фоновом режиме , так как невидимость элементов управления делает элемент аудио невидимым для пользователя. Эта последняя функциональность была реализована ранее через тег <bgsound>, который, однако, никогда не был стандартизирован, и поэтому лучше избегать его использования.

Два других возможных атрибута для тега <audio>: autoplay и loop: первый заставляет аудио воспроизводиться автоматически, а второй — автоматически воспроизводить его в непрерывном цикле.

Внутри тега <audio> есть элемент типа <source>, с помощью которого мы можем указать файл, который мы хотим воспроизвести. В предыдущем примере мы указали воспроизводить файл music.mp3 через атрибут src, с предвидением сделать также явным тип file ( 

type="audio/mp3").

Поскольку некоторые типы файлов поддерживаются не всеми браузерами, вы можете указать разные теги <source>. Например: 

<audio controls>
  <source src="music.mp3" type="audio/mp3">
  <source src="music2.ogg" type="audio/ogg">
Браузер не поддерживает аудио тег
</audio>

В этом случае браузер сначала попытается воспроизвести файл, указанный в первом теге <source>. Если (и только если) по какой-либо причине файл не может быть воспроизведен, браузер попытается воспроизвести второй файл и т. д. Для всех <source> присутствующих тегов . Наконец, для обеспечения обратной совместимости с предыдущими версиями HTML вы можете использовать строку (или другой код HTML), которая будет отображаться, если браузер не поддерживает тег 

<audio>.

Как вставить аудио на сайт

Как вставить аудио на сайт

Универсальный способ вставки audio в web страницу на основе HTML5 и флеш плеера. Работает во всех браузерах (и мобильных), легко настраивается, имеет минимум кода. Может проигрывать несколько файлов, как play лист. Не тормозит загрузку страницы, соответствует стандартам, открытый код. Идеальный вариант для вставки mp3 и других аудио в статью. Есть реализация для WordPress в виде плагина.

 

Вот как это будет выглядеть:

В этой статье я описываю реализацию аудио для тех, кто имеет возможность напрямую вставлять в свои статьи HTML и js код.

Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью

Yandex Disk REST API jQuery Plugin, в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.

Замечание автора: Описанный в статье метод вставки видео прекрасно работает, однако он основан на использовании flash плеера, как проигрывателя аудио по умолчанию, что не является следованием актуальным тенденциям в вебе, где сейчас наблюдается сдвиг предпочтений в пользу использования js плееров. Но, на мой взгляд, решение должно быть как можно проще и без больших библиотек и множества кода, а js плееры, пока еще, оставляют желать лучшего в этом отношении.

Как то мне нужно было для себя решить задачу — как добавить в пост свою голосовую заметку. Нужен был очень простой способ с небольшим количеством кода, который я мог бы сохранять вместе с основным текстом статьи. Так же я планировал в дальнейшем оформить это в виде плагина к

CKEditor, который использую как редактор текста в своих CMS. Просмотрев разные источники и протестировав их я сформировал оптимальное, на мой взгляд, решение, которое и описано здесь.

Подход использует две технологии для проигрывания аудио файла и имеет три уровня «отказоустойчивости»:

  1. Первая, будет основной — это флеш плеер. Мною выбран был свободный WordPress Audio Player, который будет воспроизводить звук в тех браузерах, которые поддерживают flash плеер. Причина выбора мною в этом подходе flash, как основного плеера для аудио, в том, что он будет отображаться одинаково в разных браузерах в отличие от HTML5 плеера, вид которого, пока, оставляет желать лучшего. А подключать для воспроизведения аудио JS библиотеку управления HTML5 плеером мне кажется не совсем целесообразным, так как, такие JS плееры все же громоздки и не так идеальны, как хотелось бы. Для Воспроизведения видео файлов, безусловно, нужно использовать, как первичный, JS HTML5 плеер. Вообще, в идеале, хотелось бы обходиться для воспроизведения аудио и видео без использования дополнительных плееров (flash или JS), а использовать только возможности браузера.;
  2. Вторая — HTML5 тег <audio> — будет резервной для случаев, когда flash не поддерживается. В основном, это MAC и iГаджеты, но у них HTML5 плеер уже достаточно хорошо реализован в браузерах.
  3. Третий, резервный вариант, будет ссылка на скачку, когда первые две не сработают. Это вариант на крайний случай, так как сейчас уже все браузеры поддерживают HTML5 тег audio.

Нам понадобиться скачать zip с файлами flash плеера и js к нему (ссылка на официальный сайт ).

Нам нужны, толькло два файла из всего скачанного архива:

  • player.swf           —это сам flash player
    , который будет проигрывать mp3 файлы.
  • audio-player.js   —это js, который добавит функциональности по управлению плеером и устраняет неправильности его работы в разных браузерах.

Файлы из этого архива нужно разместить на сайте. Кстати js можете сжать.
В этой статье договоримся, что примеры будут использовать директорию «/audio» от корня вашего сайта.

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

РЕАЛИЗАЦИЯ РЕШЕНИЯ В ДВУХ ВАРИАНТАХ:

ПЕРВЫЙ — Формируем весь HTML код САМИ и вставляем в статью. Напишем шаблон HTML кода в котором нужно будет менять только пути для конкретного случая.

ВТОРОЙ — Формируем HTML ЧЕРЕЗ js. В пост (или куда вам нужно) вставляем маленький блок кода js.

 

Еще по теме:

Реализация video и audio в HTML5, шаблоны, schema.org микроразметка

Как использовать элемент audio в HTML5