tutorial de Música no perfil ദ്ദി

Oi, aqui é a Claire!

Eu vou viajar na quarta-feira (26/03) então não vou postar por um tempo, para não dizer que sou o diabo em pessoa vou deixar um tutorial que havia prometido antes de ter uma recaída pequenininha na semana passada. O famoso loop de música no perfil! Alguns amigos pediram durante a semana no meu chat e eu consegui ensinar bem brevemente, com tantas pessoas novas aqui é mais legal deixar essa informação pública para que todos possam colocar a música que quiser e não apenas as dispostas na página de layouts.

Come on?

Sons espaciais!!!!

Se você quer adicionar uma música no seu perfil para que seu perfil fique com mais da sua personalidade, está no lugar certo!

O HTML de música no perfil pode ser um pouquinho complicado, é bem flexível e há bastante coisas que podemos fazer com ele, os que eu sei mexer são o loop de autoplay do youtube e as playlists do spotify e youtube! É bom lembrar que o autoplay pode não funcionar em alguns navegadores. No mais, espero ajudar com os próximos passos.

Mais uma vez eu não peço pelos créditos no seu perfil caso usem do meu tutorial, apenas comentem "usando" nesse blog e cliquem nos "kudos" para que esse tutorial possa chegar em mais brasileiros. Agora, realmente, let's bora!

Pode colocar pagode, seu gerso! - Tutorial 1

Vamos começar com o <iframe> ... </iframe>

Ele é uma tag que incorpora um conteúdo externo no seu HTML, na sua página, nesse caso um vídeo do youtube ou uma playlist do spotify.

Iremos ver também bastante desse caractere "&". Ele indica as informações extras do seu HTML, em resumo são os parâmetros, que modificam o comportamento do código e sempre aparecem após um interrogação "?"

É um fato que para modificar a altura e largura usamos muito do HTML "width="número" height="número" " basta apenas adicioná-lo dentro do código que possua uma imagem ou caixa.

Dito isso... - Tutorial 2

Vamos desmembrar cada parte do HTML padrão para aprender, desse jeito não terão tanta dificuldade na hora de realmente montá-lo.

<iframe width="300" height="150" src="https://www.youtube.com/embed/XXXXXXXXX?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

"width="300" height="150" é definido por padrão, caso queira deixar o player a mostra você pode alterar para qualquer tamanho que te agrade, mas caso queira que fique invisível apenas defina ambos para zero.

O src funciona como quando usamos em um HTML de imagem. Precisamos apenas colocar o link inteiro para que funcione, mas nesse caso vamos precisar alterar algumas coisas nesse link para que funcione corretamente! O formato ".com/embed/XXXXXXXX" é o formato correto para ser usado na incorporação, você deve apenas mudar os Xs para o código do seu vídeo que pode conter letras, números, e outros caracteres...

essa é a área do código corretamente

Lembre-se de não apagar o interrogação, ele é importante para o parâmetro do autoplay funcionar corretamente. "?autoplay=1" faz o vídeo começar assim que a página for carregada sem precisar da interação do usuário.

O frameborder vai definir a borda do iframe. É simples.

Enquanto o allow="autoplay; encrypted-media" permite o autoplay do seu vídeo e permite, também, vídeos que são protegidos por direitos autorais...

Por último, não menos importante. Allowfullscreen permite que os usuários deixem o iframe em tela cheia caso queiram. (caso o seu iframe não esteja invisível, claro)

LOoOOooOOPp - Tutorial 3

Primeiramente, para que o seu vídeo, música, funcione em loop você PRECISA colocar o código de playlist com o ID do vídeo. Resumindo, basta que você adicione ao código "?autoplay=1" um "&loop=1" e mais "&playlist=XXXXXX". Assim o código inteiro seria:

"?autoplay=1&loop=1&playlist=XXXXXXX"

Sempre lembrando que os Xs são o código do URL do seu vídeo que você deve colocar.

Bônus - Tutorial 4

Eu havia mencionado que sabia como adicionar playlists do spotify, é simples, assim como o HTML de música do YouTube. Dessa vez apenas mudamos o link para oficial do spotify!

<iframe src="https://open.spotify.com/embed/playlist/XXXXXXXXXXXXXX" width="500" height="360" frameborder=0 allow="clipboard-write; encrypted-media"></iframe>

Assim como no tutorial 2, você substitui os Xs pelo código da playlist que desejar.

sempre após o ?si=

Infelizmente, o Spotify impede que o player toque as músicas sem que o usuário interaja com a caixa, então eu não recomendo que definam o width e o height como zero.

Dessa vez o encrypted-media é essencial para o HTML do Spotify, pois o app protege as músicas com direitos autorais.

Agora, caso queiram montar uma playlist que toque no seu perfil e que não apareça para os usuários interagirem, a única forma que conheço de fazer isso é adicionando o parâmetro "videoseries" ao link. Então ficaria "/embed/videoseries?list=XXXXXXXXX" e então o mesmo processo do tutorial 2 e 3.

ClaireDance!

O blog chegou ao fim! Caso alguma dúvida tenha ficado para trás fique a vontade para comentar, eu irei responder sem problema algum! Vou deixar os três códigos nos comentários para que seja mais fácil o ctrl+c e ctrl+v. Até a próxima!

Gostou? Me diz aí embaixo!
Não esquece dos Kudos, ein
eu to de olho...