HTML5 audio. Вставить аудио на сайт


Содержание материала:

Как сделать плеер на сайте при помощи HTML5, тег audio

Воспроизведение аудио файлов на веб-страницах сегодня не является чем-то необычным. Раньше для этого приходилось использовать специальные сторонние средства, подключать flash-плеер к примеру. Но с появлением HTML5 стало возможным легко добавить плеер на страницу, при помощи одного тега – audio.

Для добавления фонового звука на страницу существует тег bgsound, но он позволяет лишь просто воспроизвести музыку при заходе на страницу. Обычно же требуется создать полноценный мультимедиа плеер на странице, поэтому в спецификацию HTML5 был добавлен новый тег – audio. В разных браузерах вид внешнего плеера может отличаться, например, на картинке выше светлый плеер – это вид в Chrome, темный – вид в Firefox. Но внешний вид плеера можно легко изменить при помощи CSS-стилей. Использовать тег audio крайне просто:

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

Какие атрибуты есть у тега audio? Перечислим ниже:

  • autoplay — автоматическое воспроизведение звука после загрузки страницы;
  • controls — сообщает браузеру, что нужно показать кнопки управления плеером;
  • loop — делает циклическое воспроизведение;
  • muted — отключает звук воспроизведения;
  • preload — предварительная загрузка аудио файла, возможные значения: auto, metadata, none;
  • src — путь к проигрываемому файлу.

Какие форматы можно использовать для тега audio? Лучше всего следующие три: AAC, MP3, OGG. Но не все браузеры могут воспроизводить формат MP3 из-за лицензионного соглашения. Поэтому можно написать такой код:

Как видно, мы просто перечисляем источники звука при помощи тега source — браузер выберет подходящий. Если вдруг тег audio не поддерживается – будет показана ссылка на загрузку файла. В таком случае пользователь сможет скачать и послушать его на своем устройстве.

Тег source нужен для указания альтернативных источников файлов. Какие атрибуты есть у тега source? Перечислим ниже:

  • media — служит для определения типа медиа-устройства;
  • src — служит для указания пути к файлу;
  • type — определяет MIME-тип указанного файла.

Также внутрь тега audio можно добавить тег track, он служит для задания текстовой информации о файле, например, субтитры, заголовок и т.д. Какие атрибуты есть у тега track? Перечислим ниже:

  • default — указывает, что дорожка воспроизводится по умолчанию;
  • kind — указывает тип текстовой дорожки, принимаемые значения: captions – перевод диалогов, chapters – позволяет указать главу, которая служит для навигации по файлу, descriptions – добавляет звуковое описание при просмотре видео, актуально для тега video, metadata – данные для скриптов, subtitles – добавляет субтитры;
  • label — название дорожки;
  • src — путь к файлу;
  • srclang — язык воспроизводимой дорожки.

Таким образом, мы рассмотрели, как сделать плеер на сайте при помощи HTML5, при помощи нового тега audio. Тег позволяет быстро создать функциональный плеер на любой странице сайта.

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

HTML Урок 8. Вставка видео на сайт

Вставка аудио

Для вставки аудио-плеера используется следующий код:

В браузере Google Chrome плеер будет выглядеть:

Атрибут Значение Описание
autoplay autoplay Указывает, что аудио должен начать играть, как только будет готов
controls controls Указывает, что элементы управления воспроизведением должны отображаться
loop loop Указывает, что аудио должно начаться снова, когда оно будет закончено
preload auto
metadata
none
Определяет, должно ли аудио быть загруженным при загрузке страницы
src url Указывает адрес аудио для проигрывания

Другие возможности вставки аудио на сайт

*только для форматов: wav, mp3, aiff, wma

Вставка видео

Ваш браузер не поддерживает video.

Результат в браузере:

Атрибут Значение Описание
audio muted Определяет по умолчанию состояние звука. В настоящий момент только «muted» разрешено
autoplay autoplay Если указан, видео начнет играть сразу как только оно будет готово
controls controls Если указан, кнопки управления будут показаны, такие как кнопка воспроизведения
height пиксели Указывает высоту видео плеера
loop loop Если указан, видео начнет проигрываться снова, как только закончится
poster url Указывает URL изображения, представляющего видео
preload auto
metadata
none
Если указан, видео будет загружено при загрузке страницы, и готово к запуску. Игнорируется, если «autoplay» указан
src url Адрес URL видео для проигрывания
width пиксели Указывает ширину видео плеера

* для форматов mpeg, avi

Фавикон Favicon

Фавиконка отображается в адресной строке браузера перед URL страницы, также Фавикон можно заметить во вкладке браузера страницы. Поисковые системы передают Favicon вместе с результатами поиска.

  • файлы с расширением .ico
  • размер 16×16 пикселей

Музыка на сайте. Тег в HTML5

Не секрет, что времена технологии flash, к сожалению или к счастью, уходят. Виной тому нежелание компании Adobe доработать свой продукт под современные нужды. А рынок диктует новые условия и сбрасывать со счетов такого гиганта, как Apple было не предусмотрительно.

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

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

Но не всё так плохо, HTML5 наконец-то начал входить в жизнь, и толчок к его быстрому развитию и распространению, на мой взгляд, дало именно огромное количество устройств на базе iOS.

HTML5, к примеру, предоставляет простую возможность добавления музыки на сайт с помощью тега . В предыдущем моем посте, о Конюхе Федорове, для вывода аудиофайла использовался как раз этот тег.

Для проигрывания аудио файла в HTML5, достаточно разместить на страничке следующий код:

Выглядеть это будет примерно так:

В примере использована песня американской джазовой певицы Carmen Mercedes McRae.

На текущий момент существует три основных формата для элемента .ogg, .mp3 и .wav. Однако, нет ни одного браузера, где полностью реализована поддержка всех указанных форматов.

Формат IE 8 IE 9 Firefox 3.5 Opera 10.5 Chrome 10.0 Safari 3.0
Ogg Vorbis Нет Нет Да Да Да Нет
MP3 Нет Да Нет Нет Да Да
Wav Нет Да Да Да Да Да
Топ-пост этого месяца:  Как сделать анимированные заголовки с использованием изображения и текста работаем с CSS

Из таблицы видно, что только .wav поддерживается почти всеми браузерами, однако с точки зрения размера файла, это далеко не оптимальный вариант.

Проблему кроссбраузерности можно решить, добавив несколько элементов source элементу , указав в качестве параметра, пути к одному аудиофайлу в различных форматах. Браузер воспроизведет первый поддерживаемый файл. Пример:

В примерах, у тега присутствует атрибут controls, который добавляет управление аудио файлом (play, pause, volume). Помимо controls имеется ещё несколько атрибутов:

src – собственно путь к воспроизводимому файлу;

autoplay – воспроизведение файла при открытии страницы;

loop — зацикливает воспроизведения трека.

Это далеко не весь список, да и цели полностью описать работу данного элемента не ставилось.

Хотелось ещё заметить, что в MaxSite CMS, на которой сейчас работает блог, нашелся не понятный баг — аудиофайлы не проигрываются, если пути к ним указывать в элементе source. По всей видимости элемент source где-то экранируется движком. Попробую разобраться, как будет время, а пока, для совместимости, размещаю аудиофайлы в формате wav.

Если считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.

HTML5

Добро пожаловать на сайт html-5.ru, посвящённому языку разметки HTML5. Здесь вы можете более подробно ознакомиться с новыми тегами и технологиями появившимися в HTML5.

Тег audio HTML5

Элемент

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

Пример кода тега

Пример добавления аудиофайла при помощи тега :

Странно, Safari почему то не видит тега аудио.

Автор трека: Baauer ,
Название: Garlem Shake .

Скачать файл можно c Яндекс.Диска : в формате OGG, в формате MP3.

Тег содержит в себе атрибут src=»http://html-5.ru/teg-audio-html5″ , чьим значением выступает адрес хранения файлов мультимедиа.

В нашем примере, тег указывает на два файла хранящих одну и ту же информацию, но имеющих различное расширение (формат). Если ваш браузер не поддерживает файлы с расширением .ogg , то он будет проигрывать файлы с расширением .mp3 и наоборот.

Таблица поддержки браузерами аудио кодеков и форматов

Каждый браузер поддерживает только определённые аудио форматы, поэтому если вы хотите чтобы ваша музыка могла звучать на всех браузерах, то нужно добавить как минимум два файла, один с расширением .mp3 , а другой с расширенеим .ogg

БРАУЗЕР/КОДЕК aac mp3 ogg/vorbis wav
Chrome 6+ да да да нет
FireFox 3.6+ нет нет да да
IE 9+ да да нет нет
Opera 10.60+ нет нет да да
Safari 4+ да да нет да

DVDVideoSoft — бесплатная русскоязычная программа для конвертирования и редактирования аудио/видео файлов различных форматов.

Тема о том почему браузеры поддерживют только определённые форматы, раскрывается в статье Война браузеров продолжается…

Атрибуты тега

autoplay=»autoplay» — начинает проигрывать композицию сразу после загрузки веб-страницы, по умолчанию атрибут отключён (ps: и никогда его не включайте :))

controls=»controls» — создает панель управления аудиофайлом, по умолчанию атрибут отключён.

loop=»loop» — заного запускает аудиофайл, после окончания его воспроизведения, по умолчанию атрибут отключён.

preload=»auto/metadata/ none » — загружает аудиофайл в проигрыватель одновременно с загрузкой веб страницы, но не воспроизводит его, по умолчанию имеет значение none

    Определения значений атрибута preload=» » :

  • auto — загружает аудиофайл
  • metadata — загружает только служебную информацию
  • none — не загружает аудиофайл
  • Атрибут preload=» » не работает, если включен атрибут autoplay=» «

    Как добавить html 5 аудио плеер к музыке?

    У меня есть пример — проигрывается музыка — http://www.smartjava.org/examples/webaudio/example3.html Как сюда добавить кнопки аудио плеера с управлением?


    1 ответ 1

    Если вы используете тег , то попробуйте так:

    UPD

    Например, есть такой код:

    Всё ещё ищете ответ? Посмотрите другие вопросы с метками html5 аудио или задайте свой вопрос.

    Похожие

    Подписаться на ленту

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

    дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.7.35374

    Лучшие 10 аудио плееров на html5 и jQuery

    Согласно Buzz Angle Music, в первом квартале 2020 года в США было потреблено всего 83 миллиарда аудиопотоков. Это на 61,2% больше, чем в предыдущем квартале. Между тем продажи музыки упали на 23,8%.

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

    1. MediaElement.js

    В настоящее время один из лучших медиа-плееров с открытым исходным кодом для сайтов. MediaElement.js поддерживает как видео, так и аудио и способен воспроизводить медиафайлы из своих и сторонних источников, таких как SoundCloud, YouTube, DailyMotion, Vimeo и Twitch. Он может быть настроен с использованием ванильного JavaScript, jQuery, Node, Meteor, Require.js и React

    Причина, по которой я оценил этот медиаплеер, — это то, что он все еще активно развивается. Это означает, что проблемы будут устранены быстрее, и, скорее всего, они будут обновлены с последними стандартами HTML5 и поддержкой браузера.

    • Лицензия: Open Source (MIT)
    • Веб-сайт
    • Скачать
    • Источник (GitHub)
    • Документация

    2. SoundManager 2

    SoundManager 2 создан для упрощения аудио на настольные и мобильные платформы. Он имеет мощный API, который использует HTML5 аудио, где поддерживается, и, при необходимости, возвращается обратно в Flash. Он не имеет внешних зависимостей и может использоваться с другими фреймворками JavaScript, такими как jQuery. Документация является высшей отметкой, что позволяет разработчикам настраивать ее для своих нужд. Он поддерживает списки воспроизведения и множество скинов доступны из сборки. Некоторые из этих веб-сайтов используют Last.fm и BeatsMusic.

    Развитие этого аудиоплеера замедлилось, но сообщество с открытым исходным кодом отлично справляется с решением проблем, о которых сообщают пользователи. Sound Manager 2 действительно хорошо разработан и по-прежнему совместим с последними стандартами браузера. В настоящее время он поддерживает все основные браузеры, включая IE6, Safari и Android.

    3. React-jPlayer

    Если вы ищете версию jPlayer, которая не имеет зависимости от jQuery, тогда вам повезло (то есть, если вы разработчик React). В настоящее время он поддерживает как аудио, так и видео. Поддерживаются современные браузеры от IE9 и всех современных мобильных платформ. Это означает, что старые браузеры, такие как IE6 и IE7, не поддерживаются (неважно). Он не использует Flash как резерв, так как iOS и Chrome официально отказались от поддержки.

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

    Будучи проектом React, это, очевидно, ограничивает использование в других интерфейсных JavaScript-фреймах, таких как Vue.js. Однако у него есть огромное количество настраиваемых функций, что делает его идеальным для создания нового современного веб-сайта для потоковой передачи музыки.

    4. Аудиоплеер HTML5 с плейлистом

    Этот чрезвычайно популярный аудиоплеер HTML5 приносит замечательное количество возможностей пользователям. Он поддерживает широкий спектр функций и выглядит так, как показано на странице предварительного просмотра, включая полноэкранное слайд-шоу.

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

    5. Полноэкранный Аудиоплеер

    Это плагин WordPress, который преобразует ваш стандартный сайт WordPress в музыкальный сайт. Он полностью реагирует и имеет возможность добавлять плейлисты и треки на страницу. Он также поддерживает всплывающие окна для воспроизведения без прерывания воспроизведения. Вы можете добавить FullWidth Audio Player внизу на любую страницу WordPress или опубликовать с помощью коротких кодов. SoundCloud также поддерживается.

    6. Zoomsounds

    Это отзывчивый, готовый сетчатки, аудиоплеер HTML5, который поставляется с 3 скинами из сборки. Поддерживаются все мобильные и современные браузеры, включая IE7 +. Он поддерживает воспроизведение аудио с YouTube, а также SoundCloud. Разработчики могут настраивать пользовательский интерфейс игрока через SASS или CSS. Разработчик компонента также предоставил версию WordPress.

    7. Royal Audio Player

    Это аудио и видеопроигрыватель для тех, кто хотел бы развлекать своих онлайн-посетителей стильным аудиоплеером. Он реагирует и поддерживает все современные браузеры и мобильные платформы. Он имеет обширный API, который поддерживает YouTube, SoundCloud, Podcasts, Official.fm, SHOUTcast и Icecast. Он также поддерживает внешние источники, такие как Google Диск и Amazon S3.

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

    8. jPlayer 2

    JPlayer 2 — это аудио и видео плагин jQuery с поддержкой HTML5 и Adobe Flash в качестве резервного. Он поддерживает все основные браузеры, включая IE6 +, Safari, Chrome, Mozilla, IOS, Android и Blackberry. Его документация обширна, что позволяет разработчикам настраивать ее на свои нужды. В нем есть поддержка плейлистов, и несколько тем предоставляются из коробки. Он используется такими организациями, как Pandora, BBC и Aljazeera.

    К сожалению, этот большой плагин пренебрегал сообществом open-source. Проблемы накопились и быстро отстают от современных стандартов браузера. Однако есть хорошие новости. Планы для jPlayer 3 уже ведутся. Цель состоит в том, чтобы принести ряд улучшений, включая удаление зависимости jQuery, что позволяет использовать ее в других средах.

    9. Gear HTML5 Audio Player

    Gear — это аудио-плеер с поддержкой HTML без звука, основанный на jQuery, с потрясающим пользовательским интерфейсом. Он имеет гладкую анимацию SVG, уникальный эквалайзер холста и поддержку SoundCloud. Он имеет мобильный отзывчивый дизайн, плейлист JSON, круговой трекбэк и пристыкованный мини-плеер.

    Кстати, SoundManager 2 зачисляется как один из проектов, используемых для создания этого прекрасного аудиоплеера.

    10. tPlayer — Аудиоплеер для WordPress

    TPlayer — это плеер на основе jQuery для WordPress. Он поддерживает воспроизведение аудиофайлов MP3, а также потоковую передачу из SoundCloud, SHOUTcast и Icecast. Он имеет большой дизайн UX на планшетных и смартфонных устройствах и включает в себя анимацию SVG.

    Вывод

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

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

    Коммерческие аудиоплееры HTML5 отлично подходят, если они содержат целевые функции, необходимые для вашего сайта. Обычно они поставляются с несколькими скинами, а также возможностью настраивать еще больше с помощью CSS. Абоненты с открытым исходным кодом HTML5 тоже великолепны, если у вас ограниченный бюджет или вы просто хотите поэкспериментировать. Лицензия с открытым исходным кодом позволяет полностью настраивать функции, добавляя новый код или сторонние библиотеки, чтобы создать новый тип аудиоплеера с уникальными функциями.

    Этот список не может быть всеобъемлющим, но я надеюсь, что, по крайней мере, он дает вам представление о том, что доступно там. У вас есть плагин, чтобы рекомендовать? Я пропустил ваш любимый аудиоплеер? Дай мне знать в комментариях!

    Работаем с HTML5 тегом audio из javascript

    В HTML5 появился тег для вставки проигрывателя аудио-файлов. Т.е. нам уже не нужно встраивать Flash проигрыватель и т.п, можно обойтись средствами браузера для проигрывания аудио-трека (-ов).

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

    Спецификация тега, поддерживаемые браузеры, типы аудио-файлов описаны вот тут.

    Его можно использовать в двух вариантах —

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

    Фоновый трек на вашей веб-странице

    Если перед вами стоит именно такая задача, то скорее всего вы добавите пару флажков в проигрыватель:

    Т.е. зададите автоматическое воспроизведение трека «по кругу» при загрузке страницы.

    Управление audio плеером из скрипта (javascript).

    Как всегда подобные вещи лучше рассматривать на практическом примере. Пусть у нас будет пара кнопок на сайте, нажимая которые, вы будете проигрывать одну из двух мелодий. При этом, мы будем использовать один и тот же элемент audio. Путь до трека я буду хранить в специальном аттрибуте — data-src каждой из кнопок.

    HTML код будет примерно такой:

    Далее нам нужно привязать событие нажатия клавиши к нашим импровизированным контейнерам-кнопкам. Я предполагаю, что с помощью каскадных стилей вы оформили внешний вид этих кнопок. При нажатии кнопка будет получать дополнительный CSS стиль — «on», чтобы мы могли задать отличное оформление активной и неактивной кнопок.

    Например, в неактивном состоянии на кнопке выводится значок паузы, а при активации (добавлении стиля «on») — картинка запущенного проигрывателя.

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

    Адаптивный аудио плеер на ваш сайт

    С выходом HTML5, набирает оборот популярность аудио плееров. Сегодня мы рассмотрим плагин AudioPlayer.js, благодаря которому вы сможете быстро и легко добавить проигрыватель музыки на ваш сайт.

    Главные характеристики данного плагина:

    • Адаптивность, на основе CSS;
    • Дружелюбен для всех типов мониторов, включая сенсорные;
    • Весит всего 4 KB;

    Использование

    В первую очередь, вам необходимо указать путь к файлу через атрибут src. Пример:

    Данный код только загрузит файл, без его запуска. Для запуска нужно нажать на кнопку Play. Другие возможные варианты атрибута preload (none, metadata).

    Для автоматического проигрывания файла после загрузки воспользуйтесь атрибутом autoplay:

    Для того, чтобы обеспечить одно и то же аудио в разных форматах для разных типов браузеров, используйте следующий код:

    Ну а как же запустить плагин? Очень просто. Подключаем jQuery и плагин в HTML:

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

    Если же браузер не поддерживает элемент audio, то он будет заменён на:

    Данный урок подготовлен для вас командой сайта ruseller.com
    Источник урока: http://www.webresourcesdepot.com/responsive-html5-audio-player-with-touch-support/
    Перевел: Станислав Протасевич
    Урок создан: 28 Мая 2013
    Просмотров: 70014
    Правила перепечатки

    5 последних уроков рубрики «jQuery»

    Анимация набора текста на jQuery

    Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

    Временная шкала на jQuery

    jQuery плагин для создания временной шкалы.


    Заметка: Перезагрузка и редирект на JavaScript

    Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

    Рисуем диаграмму Ганта

    jQuery плагин для создания диаграммы Ганта.

    AJAX и PHP: загрузка файла

    Пример того как осуществить загрузку файла через PHP и jQuery ajax.

    Применение HTML5 Audio: подсказки и уроки интеграции звука

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

    С приходом на рынок технологии Flash, эта задача значительно упростилась, так как Flash-плагин позволяет вам встраивать любую анимацию или звук в страницу, и технология поддерживается большинством браузеров. Но востребованность Flash постепенно сходит на нет после выхода на рынок инновационных девайсов от компании Apple: iPhone и iPad. Как известно, компания Apple принципиально не оснащает свои устройства поддержкой Flash, а число пользователей продукции стремительно растёт.

    Вкратце, здесь небольшая путаница.

    К счастью, HTML5 значительно упростил жизнь разработчикам, так как в технологии присутствует элемент audio. Данный элемент позволяет вам встраивать аудио-файлы в любую веб-страницу, а также реализовать панель управления посредством javascript. Что более важно, технология не требует дополнительных плагинов, и поддерживается почти во всех браузерах, за исключением ранних версий (о поддержке браузерами мы поговорим позже!).

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

    Данный элемент крайне просто использовать. В нашем сегодняшнем примере мы будем встраивать песенку Бинга Кросби (Bing Crosby) «White Christmas»:

    Здесь не нужно особо много объяснять. Примерно как вы вставляете изображение посредством тэга img, таким же образом вы можете вставить звук посредством тэга audio.

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

    Некоторые браузеры умеют воспроизводить файлы формата .mp3, но не умеют файлы формата .ogg, а другие наоборот. Большинство браузеров умеют воспроизводить файлы формата .wav, но ввиду его большого размера, использование его в качестве звука для веб-сайта неуместно.

    Вот вам таблица браузеров, где указаны поддержки звуковых форматов:

    Какие форматы поддерживает ваш браузер? Определите это посредством этой страницы .

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

    Конечно же, это означает, что вам нужно создать как Mp3, так и OGG версию вашего звукового файла (здесь вам на помощь приходит Audacity ), но только так можно организовать кросс-браузерную поддержку.

    Ранние версии Internet Explorer (версии 7 и 8) вообще не поддерживают элемент audio. Тем не менее, далее в статье мы рассмотрим, как обойти этот недуг.

    Автоматическое воспроизведение звука

    Хотя вышеприведенный код и встраивает звук, он не воспроизводит его. Если нам надо, чтобы звук воспроизводился автоматически при загрузке страницы, нам нужно добавить элементу атрибут autoplay:

    Добавляем кнопки управления

    Хотя и автоматическое воспроизведение может быть полезным, во многих случаях оно надоедает или совсем неуместно. Поэтому мы можем установить дополнительные кнопки управления элементов audio, чтобы пользователь сам мог решать:

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

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

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

    Это может быть полезным для того, чтобы включать фоновую музыку, либо звуковые эффекты в играх.

    Вы также можете использовать атрибут preload, который даст браузеру данные о том, когда и где должен быть подгружен определенный звуковой файл.
    Предварительная загрузка звукового файла означает, что звук может быть воспроизведен сразу же при нажатии пользователем кнопки play.

    Для этого атрибута есть несколько значений:

    «none» – браузер не должен навязывать загруженный файл. Т.е. если вы уверены в том, что большинство пользователей не будут воспроизводить этот файл, используйте этот параметр. Либо используйте его в случае, когда вам нужно сохранить как можно больше пропускной способности сервера.

    «metadata» – параметр схож с none, за исключением того, что вы оповещаете браузер о возможности подгрузки метаданных, типа продолжительности аудио-дорожки, но не самого аудио-файла.

    «auto» – вы позволяете браузеру загружать сам аудио-файл.

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

    Управление воспроизведением посредством javascript

    Что удобно в элементах javascript – это то, что ими проще простого управлять посредством javascript. Аудио-элемент предлагает множество удобных параметров и способов управления:

    Play() – начать воспроизведение с текущей позиции;

    Pause() – остановить воспроизведение на текущей позиции;

    canPlayType(type) – определить, поддерживает ли браузер воспроизведение данного типа медиа;

    duration – продолжительность дорожки в секундах;

    currentTime – текущее положение в секундах. Вы также можете установить данный параметр на перемещение положения воспроизведения.

    Используя предложенные выше параметры и методы, мы можем создать некоторые основные кнопки управления:

    Посмотреть демо: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

    Поддержка ранних версий Internet Explorer

    В большинстве случаев браузер пользователя будет поддерживать элемент HTML5. Но, к сожалению, браузеры IE версий 7 и даже 8 не поддерживают этот элемент (хотя в 9-м уже есть поддержка). Важно продумать версию отката для пользователей, которые остались в 2008 году.

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

    Вышеприведенный пример будет работать во всех браузерах, которые поддерживают HTML5 Audio, и также будет работать в браузерах IE версий 7 и 8. С помощью комментариев, мы перенаправляем рычаги управления для кнопок напрямую к звуковому файлу.

    Другой способ отката заключается во внедрении в страницу Flash-плеера. Вот отличная статья , в которой говорится об откате в виде плеера на Flash.

    В нашей сегодняшней статье мы научились встраивать аудио-файлы посредством HTML5. Элемент audio не только прост в использовании, но мы также можем оформить его под собственные требования, а также управлять воспроизведением посредством javascript.

    Хотите узнать больше об элементе audio в HTML5? Тогда ознакомьтесь со спецификациями .

    Хотя пока что поддержка страдает в некоторых браузерах (типа старых версий IE), можно без проблем делать откаты для них, если это понадобится, что в наши дни встречается всё реже и реже.

    Вам понравился материал? Поблагодарить легко!
    Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

    Радио-плеер с помощью HTML5

    Базовый синтаксис тега audio

    После этого браузер создаст простой плеер на веб-странице. Ниже представлен элемент , созданный браузером Opera:

    src содержит путь к аудио-файлу, который требуется воспроизвести. Атрибут src также может быть заменен одним или несколькими тегами внутри элемента audio :

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

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

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

    autobuffer — атрибут, позволяющий начать автоматическую загрузку аудио-потока сразу после загрузки страницы без автоматического воспроизведения. Этот атрибут действует, только если не указан атрибут autoplay .

    loop — атрибут, позволяющий проигрывать файл несколько раз после окончания его воспроизведения.

    controls — атрибут, позволяющий показать или скрыть элементы управления плеером. Если вы не укажите этот атрибут, то элементы управления будут скрыты, а если вам необходимо создать собственные элементы управления — используйте JavaScript API и CSS для тега audio .

    JavaScript API для тега audio

    Мы также можем изменить атрибут src :

    Обращаясь к методам audio.play() и audio.pause() можно начать или приостановить воспроизведение файла. Параметр audio.volume задает громкость, а обработчик события timeupdate запускается каждый раз, когда обновляется время воспроизведения. Этих простых методов нам будет достаточно для создания радио-плеера.

    Скрипт, приведенный выше, применяется к такому HTML-коду:

    Если вы хотите узнать больше о Audio API, я предлагаю познакомиться вам со статьей Саймона Питерса «everything you need to know about HTML5 video and audio».

    Поддержка кодеков в браузерах

    Судьба элемента очень похожа на в HTML5. Было много дебатов и разногласий по поводу того, какой видео-формат использовать (более подробно об этом с статье Введение в HTML5 видео), — и по аудио-формату были такие же горячие дискуссии. В настоящее время поддержка кодеков в популярных браузерах выглядит следующим образом:

    Браузер Ogg Mp3 Wave
    Opera 10.50 x x
    Firefox 3.5 x x
    Safari 4 x x
    Chrome 3 x x
    IE 8

    Для поддержки нескольких браузеров нам необходимо указывать один и тот же аудио-трек в нескольких форматах. Как было упомянуто ранее, вы можете указать несколько разных форматов с помощью тегов , помещенных внутри элемента :

    Потоковое воспроизведение с помощью элемента

    Мы сделали плеер с помощью тега audio , способный воспроизводить аудио-файлы в различных браузерах. Однако, теперь перед нами стоит вопрос — как обрабатывать потоковые аудио-данные, используя элемент . Целью остальной части этой статьи является создание радио плеера с потоковым воспроизведением на основе элемента .

    Создание HTML5-плеера

    Мы будем использовать аудио-поток, предоставляемый норвежским радио NRK. NRK предоставляет каждый радио канал в двух форматах: Ogg и MP3, так что у нас есть два источника для потокового аудио.

    Чтобы решить проблемы кроссбраузерности и поддержки разных аудио-форматов различными браузерами, мы будем использовать jQuery-плагин jPlayer. jPlayer предоставляет стандартный интерфейс с использованием встроенного в HTML 5 элемента audio , который поддерживается современными браузерами, а также использует Flash для работы в старых браузерах. Благодаря поддержки одного и того же интерфейса и для элемента , и для Flash, можно создать общий дизайн с помощью JavaScript, CSS и HTML, не беспокоясь о том, какой у пользователя браузер и какой плеер будет использоваться, HTML5 или Flash.

    Данные для создания плеера

    Для начала нам нужно создать набор данных JSON, содержащий информацию об аудио-потоках. Мы включаем общую информацию о радиостанции и каждом радиоканале — URL-адреса потоков, имена каналов и URL, указывающий на логотип каждого канала:

    Настройка структуры и дизайна плеера

    Нашим следующим шагом будет создание структуры HTML для плеера и его элементов управления:

    Каждая кнопка оформлена с помощью CSS:

    Следует также отметить, что мы задали класс .radio-default для элемента

    Благодаря возможности установки нескольких классов у одного элемента в HTML мы можем создать стили оформления плеера (скины) и переключать их, всего лишь изменяя один из классов:

    Заставим плеер работать

    Наш последний шаг по использованию плагина jPlayer — создание необходимой функциональности. Для начала нужно подключить в HTML скрипты библиотеки jQuery и плагина jPlayer, а также собственный файл с кодом по настройке плеера (player.js), добавив следующий код:

    Для начала создадим переменную с объектом jQuery, в который будет сгенерирован элемент :

    Далее мы получаем данные о необходимом аудио-потоке в формате JSON с помощью AJAX:

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

    Функция, прикрепленная в качестве события onclick к каждому изображению в списке выбора каналов, содержит вызов метода очистки текущего воспроизводимого файла и метода выбора нового потока в элемент :

    В функции ready мы настраиваем радио-канал по умолчанию.

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

    Добавить комментарий