Programando un reproductor de audio

La API para medios fue desarrollada tanto para video como para audio. Cada evento, método y propiedad incorporada para video funcionará también con audio. Debido a esto, solo necesitamos reemplazar el elemento <video> por el elemento <audio> en nuestra plantilla e instantáneamente obtenemos un reproductor de audio:

Ejm 5.13

<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Audio</title>
<link rel="stylesheet" href="reproductor.css">
<script src="reproductor.js"></script>
</head>
<body>
<section id="reproductor">

<audio id="medio">
<source src="http://websarrolladores.com/content/audio.mp3">
<source src="http://websarrolladores.com/content/audio.ogg">
</audio>

<nav>
<div id="botones">
<button type="button" id="reproducir">Reproducir</button>
</div>
<div id="barra">
<div id="progreso"></div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>

En la nueva plantilla del ejm 5.13, solo incorporamos un elemento <audio> y sus fuentes correspondientes, dejando el resto del código intacto, incluyendo los archivos externos. No necesitamos cambiar nada más, los eventos, métodos y propiedades son los mismos para los dos medios (audio y video).