API-интерфейс мультимедиа поддерживает как видео, так и аудио. Каждое событие, метод и свойство, добавленные для поддержки видео, работают также и с аудиофайлами. Следовательно, в нашем шаблоне нужно только заменить элемент <video> элементом <audio>, и мы моментально получим готовый аудиопроигрыватель.
Листинг 5.13. Шаблон для аудиопроигрывателя
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Audio Player</title>
<link rel="stylesheet" href="player. css">
<script src="player. js"></script>
</head>
<body>
<section id="player">
<audio id="media">
<source src="http://minkbooks.com/content/beach.mp3">
<source src="http://minkbooks.com/content/beach.ogg">
</audio>
<nav>
<div id="buttons">
<button type="button" id="play">Play</button>
</div>
<div id="bar">
<div id="progress"></div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
В новом шаблоне из листинга 5.13 появилось только одно изменение: мы добавили элемент <audio> и соответствующие источники. Весь остальной код остался прежним, включая ссылки на внешние файлы. Больше ничего менять не нужно, так как события, методы и свойства одинаковы для обоих типов медиафайлов.
Создайте новый файл с именем audio. html, скопируйте код из листинга 5.13 в этот файл и откройте его в своем браузере.
Для запуска аудиопроигрывателя можно использовать те же файлы player. css и player. js, которые вы создали раньше.
Добавить комментарий