Un reproductor musical es un elemento importante en cualquier sitio web de entretenimiento, ya que permite a los visitantes disfrutar de sus canciones y videos favoritos sin salir de la página. Si tienes una web o proyecto online, agregar un reproductor con una lista de videos de YouTube no solo hará que tu sitio sea más dinámico, sino que también mantendrá a tus visitantes por más tiempo.
En este artículo te enseñaré cómo crear tu propio reproductor musical con una lista de videos de YouTube, totalmente funcional y fácil de usar. Además, podrás personalizarlo a tu gusto y adaptarlo al estilo de tu web o Blog.
En este artículo te enseñaré cómo crear tu propio reproductor musical con una lista de videos de YouTube, totalmente funcional y fácil de usar. Además, podrás personalizarlo a tu gusto y adaptarlo al estilo de tu web o Blog.
A continuación, te presentaré el código HTML listo para copiar y pegar en tu sitio, sin complicaciones:
See the Pen Reproductor Youtube con Playlist Editable by Z̵̘̥̝͙͖̘̮̝͍̱͂̔̇̓̃̆͑̈̚h̸̞̙͔̩̪̘̎̾̏̏eard̶̈́🐿️Andrich! (@zheard) on CodePen.
Solo tienes que copiar el código HTML en su sitio Web. Agregar el CSS dentro de etiquetas
Adicional, para el panel de control con los botones de reproducción es necesario agregar un recurso, se trata de la librería Font Awesome:
El resultado será como un reproductor con su lista de reproducción como el siguiente:
<style></style> y Javascript dentro de <script></script>.
Adicional, para el panel de control con los botones de reproducción es necesario agregar un recurso, se trata de la librería Font Awesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> que puedes agregar antes del </head> de tu sitio web.
-
1. Desenfocao - Rauw Alejandro
-
2. POR QUE SERA - Grupo Frontera
-
3. Ella Quiere Beber (Remix) - Anuel Aa
-
4. De Nada - Yami Safdie
-
5. MI EX TENIA RAZON - KAROL G
-
6. MIx corazon - CORAZON SERRANO
Este reproductor permite reproducir los videos en forma ordenada. Al dar click en el botón Play empezará a reproducir un video y al terminar continuar con el siguiente video de forma automática. Además lo controles en dispositivos móviles se fijan en la parte inferior de la página permitiendo que el visitante pueda reproducir la música facilmente.
Nota: En el CSS puedes cambiar el color del texto de las canciones, el color del borde y fondo e los controles. Asimismo puedes agregar más canciones a tu lista. Solo tienes que adicionar más líneas <li></li> y editar los valores, ten presente que data-video="ID DE VIDEO YOUTUBE"
Si tienes alguna duda, no dudes en comentarnos por aquí o contactarnos por nuestras redes sociales.