Программирование аудиопроигрывателя

Программирование аудиопроигрывателя.

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, которые вы создали раньше.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *