Home Sobre F.A.Q Créditos Kawaii

fevereiro 08, 2018

Usar Youtube como Player de Áudio no Blog

Há algum tempo procurei um tutorial que deixasse apenas áudios de vídeos do youtube tocando no blog, para evitar a fadiga de ter que hospedar a música na internet e colocar pra tocar...(*´∀`*) Já conhecia essas duas maneiras que postei para vocês: player kawaii, playlist com html.
Queria algo que nem o SCM music player, aquele site para criar playlists super fofas, mas que não está funcionando mais no blogger atualmente. Encontrei nesse site uma solução bem legal e simples, usando o próprio Youtube como player. É ideal para quem quer deixar sua música favorita no blog tocando enquanto o leitor acessa seus posts, ou só para adicionar algum hit que não sai da sua cabeça mesmo. Tudo o que você precisa é do código abaixo, de imagens para play/pause e da ID do vídeo do qual quer o áudio.
O código pode ser adicionado em um gadget html/javascript ou antes de </body> no html do template caso queira que apareça láaaa no final do blog, também fica bonitinho:
<div data-autoplay='0' data-loop='1' data-video='ID DO VIDEO' id='youtube-audio'>
  </div><span class='titulo'>TITULO DA MUSICA - CANTOR</span>
<style>
.titulo {
    font-family: Tahoma;
    font-size: 9px;
    color: hotpink;
    text-align: center;
    list-style: none;
    display: list-item;
    margin: -60px 0px 0px 85px;
}
</style>
        <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
  <script type="text/javascript" src="https://kawaiiicode.github.io/youtube.js"></script>


Onde está ID DO VIDEO = essa ID é o que vem depois de "v=...." no link do vídeo, por exemplo:
https://www.youtube.com/watch?v=RQUuqbzQVsY
TITULO DA MUSICA - CANTOR, é opcional. Se você apagar vai aparecer apenas a imagem de play ou pause.
Ali onde diz autoplay='0', mude o 0 para 1 se quiser que a música toque automaticamente. Se deixar o título da música, em margin: -60px 0px 0px 85px, altere os valores para posicionar.
Essas imagens podem ser úteis se quiser salvar/trocar as que adicionei ao código:
Para mudar a imagem, abra esse link. É o script do youtube áudio player, você precisará editar em um editor HTML, salvar e hospedar onde preferir. Edite esse trecho do código, trocando os links das imagens pelos das que for substituir:
E o resultado vocês podem ver clicando ali na sidebar ((。・ω・。)se me conheço bem, já devo ter trocado o áudio).
o shimeji estava sentado bem na frente do player, ainda bem que se levantou na hora de tirar a screenshot né... (*°∀°) isso é que é educação!
Imagem do início do post: pixabay.com

Um comentário:

  1. Awn, adorei o tutorial <3 já usei player de música no blog, mas sempre dava problema, já que ao invés de hospedar a música - que eu tenho preguiça de fazer - eu só colocava o link do youtube. Desse jeito é bem mais prático! E também é bom que não toca automaticamente, odeio entrar em um blog e levar susto assim ><

    ~beijos
    ♡ Made by Lisa ♡

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart

I it