Tienes una web, y quieres poner alguna música, podcast o charla de fondo. Hasta aquí bien, pero qué me dices si te enseño cómo incrustar directamente audio de Youtube en tu web.
Para incluir cualquiera de las cosas que acabo de comentar en tu sitio, lo normal es llevar a cabo un proceso.
Conseguir el mp3 del audio a incrustar, colocarlo en tu servidor o hosting y utilizar alguna librería o plugin para que este archivo mp3 que tienes hospedado se reproduzca.
Cómo poner el audio de cualquier vídeo de Youtube en tu web
Pues gracias a Labnol.org esto ya no tiene por qué ser así. Si tienes algún canal de podcasts, si sueles poner música a tus páginas o incluso si simplemente quieres enviar un mensaje a tus usuarios, lo tienes muy fácil.
El método consiste en colocar un pequeño script que hace uso de la API de YouTube, por lo que todo será completamente legal.
Este script se encargará de coger la pista de audio, y según lo hayamos configurado reproducirlo automáticamente o no, e incluso poder ponerlo en bucle para que se repita indefinidamente.
Por supuesto hay un botón de play pausa para los usuarios, no a todo el mundo le gusta tener sonido de fondo mientras mira una web.
Para poder hacer uso de él simplemente tendremos que seguir estos pasos:
- Abre el vídeo de youtube del que quieres incrustar el sonido. Vale también si solo tienes la url, pues te interesa únicamente la id, cópiala
https://www.youtube.com/watch?v=No3WQXSLxPU El id es: No3WQXSLxPU
- Ahora inserta este código dentro del body de tu página, donde quieras que aparezca el botón de reproducción:
<div data-video="ID_DEL_VIDEO" data-autoplay="0" data-loop="1" id="youtube-audio"> </div> <script src="https://www.youtube.com/iframe_api"></script> <script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>Como puedes ver la configuración es muy sencilla, 1 para activar 0 para desactivar.
– Data-vídeo, en este tienes que poner la id del vídeo que has copiado.
– Data-autoplay es la opción que activará la reproducción al entrar en la página o no.
– Data-loop hace que se reproduzca en un bucle infinito.
Una vez lo tengas colocado en el código fuente de tu página te empezará a aparecer un botón similar al siguiente:
Como puedes ver trabaja con un script que se carga y dá la funcionalidad al div al que hace referencia.
Si quieres optimizar un poco mejor el código en tu página, puedes separarlo en dos. Coloca el <div> donde quieres que aparezca el botón de play, pero coloca preferiblemente las etiquetas <script> a la parte de abajo para que no retrase los tiempos de carga.
Lo bueno de todo esto es que solo tendrás que crearte un canal en youtube, que teniendo web seguramente tienes uno ya. Y ahí ir subiendo las pistas de audio (convertidas a vídeo), o los vídeos que tengas, y quedarán almacenados sin ocupar espacio en tu servicio de hosting.
Si quieres conocer más acerca de los detalles de funcionamiento de este script puedes hacerlo desde la página de labnol.
¿Sueles poner audio en tus webs? ¿De qué tipo? Déjame tu comentario y comparte.