HTML для веб-дизайнеров.

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

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

<audio src="witchitalineman.mp3" controls>

</audio>

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

HTML для веб-дизайнеров

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

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

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

</audio>

<div>

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

</button>

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

</button>

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

Громче.

</button>

<buttononclick="document.getElementById(‘player’). volume-= 0.1">

Тише.

</button>

</div>

HTML для веб-дизайнеров

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