En este artículo, aprenderás a crear un reproductor de música básico utilizando JavaScript y HTML5. Este proyecto es ideal para principiantes en programación web y te ayudará a comprender los conceptos fundamentales de la manipulación de audio en el navegador. ¡Vamos a ello!
Antes de comenzar, asegúrate de tener conocimientos básicos de HTML y JavaScript. También necesitarás un editor de texto para escribir tu código, así como un navegador web para probar tu reproductor.
La estructura de nuestro proyecto será bastante simple. Necesitaremos los siguientes archivos:
Comencemos creando el archivo index.html. Este archivo contendrá la estructura básica de nuestro reproductor.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Reproductor de Música Básico</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Reproductor de Música Básico</h1> <audio id="audio" src="ruta/a/tu/cancion.mp3" preload="auto"></audio> <div class="controls"> <button id="play">Reproducir</button> <button id="pause">Pausar</button> <button id="stop">Detener</button> </div> </div> <script src="script.js"></script> </body> </html>
Ahora, vamos a añadir algo de estilo a nuestro reproductor en el archivo styles.css.
body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { text-align: center; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .controls button { margin: 5px; padding: 10px 20px; border: none; background-color: #007bff; color: white; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .controls button:hover { background-color: #0056b3; }
Ahora es el momento de agregar la funcionalidad a nuestro reproductor a través de script.js.
const audio = document.getElementById('audio'); const playButton = document.getElementById('play'); const pauseButton = document.getElementById('pause'); const stopButton = document.getElementById('stop'); // Reproducir música playButton.addEventListener('click', () => { audio.play(); }); // Pausar música pauseButton.addEventListener('click', () => { audio.pause(); }); // Detener música stopButton.addEventListener('click', () => { audio.pause(); audio.currentTime = 0; // Reiniciar a la posición inicial });
Una vez que hayas creado todos los archivos y añadido el código, asegúrate de tener una canción en la ruta que especificaste en el atributo src del elemento <audio>. Luego, abre index.html en tu navegador y prueba el reproductor.
¡Enhorabuena! Has creado un reproductor de música básico utilizando JavaScript y HTML5. Este proyecto no solo es un gran ejercicio de programación, sino que también es un gran punto de partida para crear aplicaciones web más complejas. Ahora puedes seguir explorando y agregando más funcionalidades, como una lista de reproducción, controles de volumen o una barra de progreso.
Con esto finalizamos nuestro tutorial sobre cómo crear un reproductor de música básico. ¡Esperamos que te haya sido útil y que disfrutes programando!
Page loaded in 23.33 ms