Вход/Регистрация
HTML5 для веб-дизайнеров
вернуться

Джереми Кит

Шрифт:

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

loop
, позволит вам совершить этот низкий поступок:

<audio src="witchitalineman.mp3" autoplay loop>

</audio>

Использование атрибута

loop
вместе с атрибутом
autoplay
заставит меня искать вас с удвоенной энергией.

Вырваться из-под контроля

Элемент

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

<audio src="witchitalineman.mp3" controls>

</audio>

Присутствие атрибута

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

Рис. 3.05. Используйте атрибут controls, для того чтобы отобразить элементы управления «проиграть», «пауза» и управления громкостью

Если вам не нравятся встроенные в браузер элементы управления, можете создать свои собственные. С помощью JavaScript вы можете взаимодействовать с

Audio
API, которое дает вам доступ к методам (
play
и
pause
) и свойствам (
volume
и др.). Вот быстрый и простой пример, как использовать элементы
button
и ужасные обработчики событий, написанные прямо в коде страницы (рис. 3.06):

<audio id="player" src="witchitalineman.mp3">

</audio>

<div>

<button
onclick="document.getElementById(‘player’). play">
Проиграть

</button>

<button
onclick="document.getElementById(‘player’). pause">
Пауза

</button>

<button
onclick="document.getElementById(‘player’). volume
+= 0.1">

Громче

</button>

<button
onclick="document.getElementById(‘player’). volume
– = 0.1">

Тише

</button>

</div>

Рис. 3.06. Элементы управления (Проиграть, Пауза, Громче, Тише), сделанные с помощью элементов button

Буферизация

В какой-то момент спецификация HTML5 включала еще один булев атрибут для элемента

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

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

autobuffer
или нет. Не забывайте, что из-за того, что
autobuffer
– булева переменная, не было никакого способа сказать Safari, что подгружать аудиофайл не нужно:
autobuffer="false"
– то же самое,
что autobuffer="true"
или любое другое значение [9] .

9

Полная ссылка: https://bugs.webkit.org/show_bug.cgi?id=25267

В данный момент атрибут

autobuffer
заменен атрибутом
preload
. Это не булев атрибут. Он принимает одно из трех возможных значений:
none
,
auto
и
metadata
. Написав
preload="none"
, вы можете явным образом указать браузеру, что подгружать аудиофайл заранее не нужно:

<audio src="witchitalineman.mp3" controls preload="none">

</audio>

Если у вас на странице только один элемент audio, возможно, стоит использовать

preload="auto"
, но чем больше элементов audio появляется, тем больше интернет-канал посетителей вашей странички будет загружен из-за излишней предварительной подгрузки.

Его вам сразу включат, а может быть, включ'aт

Элемент

audio
выглядит практически идеальным. Где-то должен быть подвох, правда? Он есть.

Проблемы с элементом

audio
не в спецификации. Главная проблема – с форматами аудиофайлов.

Хотя формат MP3 и распространен повсеместно, это не открытый формат. Из-за того, что на этот формат навешано множество патентов, нельзя написать декодер MP3, не заплатив отчислений по патенту. У корпораций вроде Apple или Adobe с этим нет проблем, но для маленьких компаний или опенсорс-групп это не так просто. Поэтому Safari будет с удовольствием проигрывать MP3-файлы, a Firefox – нет.

  • Читать дальше
  • 1
  • ...
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: