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="https://websarrolladores.com/content/audio.mp3"> <source src="https://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).