Книга: HTML5 для веб-дизайнеров

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

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

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

<audio src="witchitalineman.mp3" controls>
</audio>

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

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

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

<audio 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>

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

Оглавление книги