Como você incorpora a parte de áudio de qualquer vídeo do YouTube em seu site? Uma opção fácil seria converter o vídeo do YouTube em um arquivo MP3 e carregá-lo em um site de hospedagem de áudio como o Soundcloud. Isso funcionará, mas é muito provável que o YouTube tenha um problema com sua abordagem devido a questões de direitos autorais.
Também existe uma abordagem mais simples que usa a API oficial do YouTube e não requer conversão de arquivo.
Você pode incorporar qualquer vídeo do YouTube em suas páginas da web e os visitantes de seu site poderão reproduzir e pausar o áudio do vídeo com um simples clique. Com essa técnica, você também pode usar um vídeo do YouTube como áudio de fundo que é executado em um loop.
Confira esta demonstração ao vivo. Pode ser parecido com um reprodutor de áudio embutido, mas na verdade há um vídeo do YouTube sendo reproduzido em segundo plano.
COMO EMBARCAR O YOUTUBE AUDIO
Basta uma etapa para incorporar um áudio do YouTube. Abra qualquer vídeo do YouTube e anote o ID do vídeo do YouTube (uma sequência de 11 caracteres).
Em seguida, copie e cole o código abaixo em qualquer lugar do seu site e substitua VIDEO_ID pelo ID real do seu vídeo do YouTube.
<div data-video = “VIDEO ID”
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>
Existem alguns outros parâmetros de configuração que você pode alterar, dependendo nos requisitos. Por exemplo, se você definir a reprodução automática de dados como 1, o áudio começará a ser reproduzido imediatamente no carregamento da página. Da mesma forma, defina o loop de dados como 1 e o áudio será reproduzido continuamente em um loop sem fim até ser interrompido manualmente.
Isso renderiza internamente o vídeo do YouTube usando o player IFRAME e, portanto, funcionaria em navegadores de desktop e de celular.
Os arquivos JavaScript são hospedados no Github enquanto as imagens são hospedadas no Imgur. É recomendável que você copie os ativos para seu próprio servidor antes de implantar em um site de tráfego pesado.
YOUTUBE AUDIO – OS DETALHES TÉCNICOS
Estamos usando a API JavaScript do YouTube que renderiza um player regular do YouTube, mas com largura e altura definidas para 0 pixels. Quando o usuário clica no botão de áudio, ele alterna o estado existente do player do YouTube e o vídeo começa a ser reproduzido ou é pausado.
Aqui está a versão anotada do código-fonte. Ele pode ser estendido para incorporar listas de reprodução do YouTube, o volume de reprodução padrão pode ser alterado ou até mesmo incorporar uma parte do vídeo.
<div data-video = “VIDEO_ID”
data-startseconds = “100”
data-endseconds = “200”
data-height = “480”
data-width = “640”
id = “youtube-player”>
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
function onYouTubeIframeAPIReady() {
var ctrlq = document.getElementById("youtube-player");
var player = new YT.Player('youtube-player', {
height: ctrlq.dataset.height,
width: ctrlq.dataset.width,
events: {
'onReady': function(e) {
e.target.cueVideoById({
videoId: ctrlq.dataset.video,
startSeconds: ctrlq.dataset.startseconds,
endSeconds: ctrlq.dataset.endseconds
});
}
}
});
}
</script>