Criando Playlist com HTML


Oie...para quem gosta de música e tem blog, provavelmente deve querer/ter compartilhado os sons que mais curte em playlists. E para adicionar uma geralmente a gente deve ter conta em algum site, como GrooveShark, Youtube, SoundCloud, certo? Certo, só que não...pois graças aos avanços para navegadores modernos é possível sim criar uma playlist usando apenas scripts, css e html. É isso que faremos hoje, mas para dar totalmente certo você deverá usar navegadores como Chrome ou Firefox. Para esse post, usei 3 tutoriais encontrados nos sites Last Rose, Ciudad Blogger e Cocorini <=créditos. Play!
Antes de tudo, é necessário hospedar as músicas em um site de sua preferência. Recomendo o Dropbox. Depois guarde os links de cada uma que tiver hospedado em um bloco de notas. Você irá precisar de imagens para usar como background de sua playlist. Achei esses modelinhos abaixo bem kawaii:



Agora vai:
1. Acesse Modelo - Editar HTML e cole antes de </body>:

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
var audio;var playlist;var tracks;var current;initaudio();function initaudio(){current=0;audio=$('audio');playlist=$('#playlist');tracks=playlist.find('li a');len=tracks.length-1;audio[0].volume=1;playlist.find('a').click(function(e){e.preventDefault();link=$(this);current=link.parent().index();runaudio(link,audio[0])});audio[0].addEventListener('ended',function(e){current++;if(current>len){current=0;link=playlist.find('a')[0]}else{link=playlist.find('a')[current]}runaudio($(link),audio[0])})}function runaudio(link,player){player.src=link.attr('href');par=link.parent();par.addClass('active').siblings().removeClass('active');audio[0].load();audio[0].play()}
//]]>
</script> 

Nota: Se por alguma causa, motivo, razão ou circunstância você estiver usando Jquery (primeiro script), remova-o do código acima.

2. Agora antes de /b:skin, cole isso(atualizei: modelo igual ao da imagem abaixo):
 #musicgadget {
z-index: 9999;
position: fixed;
bottom: -610px;/* desce o player */
right: 10px;/*direita*/
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#musicgadget:hover {
bottom: 0px;
}
#musicgadgettitle {
width: 240px;
padding: 3px 5px 5px 5px;
}
#playlist, #player {
width: 240px; /* largura total */
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#player {
/* background do player */
background: none;
padding: 10px 20px;
}
audio {
width:140px; /* player */
margin:0 auto;
margin-top: 40px;
display: inline-block;
border-radius: 30px;
opacity: .5;
filter:alpha(opacity=50);
}
#player:after {
/* hearts */
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvWc43PYY7G6LD9q1oQamTw00XvAaPmxbosAzmic8GLQkTmvbzFQ2G55kV-zZlEjCB7jTmmsR4a4__qIMprbRwnX7AyHKREEZd3RFC6qIOwusE7g7jSj6oVLWXMBb-KOzaC4CdjBcRdY/s1600/1424.gif);
padding-left: 10px;
}
#playlist {
margin: 0 auto 20px auto;
display: block;
width: 240px;
background: #fff; /* background da playlist */
text-align: left;
font-size: 12px; /* tamanho do texto */
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
outline-offset: -3px;
outline: 1px dashed #ddd5f5;
}
#imagetop {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLPbppDV3f4jBMF10PZn_PcPBAQXcQnXBObRSm08eX2mSeBhXRF_Hn0wRI2cMSwOw_NtQIZVMBGcY8hW0FVfqcoifYN2msfJ9oBevMcG_XrUYFfNZCq_qzMmy-Fi4q-SFvyAd9G5jJ4Ng/s1600/3.gif) no-repeat top;
width: 100%;
height: 100px;
border: none;
display: block;
}
#image {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUtErOpYUROVgM6TUCTplyQVUmxpKvKszgiG7EBrncI2NI_9UQbfvGw4hjmigDoF_98jscRdv8cw8yTAsHrHxC_dWIOztjdorSq79MUP4Yb_e9lElmJu1cyK3yTo8_GvteN4SksSl6HhI/s1600/4.gif) no-repeat bottom;
width: 100%;
height: 100px;
border: none;
display: block;
}
#playlist li, #playlist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#playlist li a {
color: #fcc; /* cor do texto */
background: #fff; /* background das músicas */
padding: 7px 5px;
display: block;
margim-left: 10px;
text-decoration: none;
outline-offset: -3px;
outline: 1px dashed #ddd5f5;
}
#playlist li a:hover{
background: #fee; /* background das músicas hover */
text-decoration: none;
}
#playlist .active a {
color: #faacca; /* cor da musica selecionada */
text-decoration: none;
outline-offset: -3px;
outline: 1px dashed #fff;
}
#playlist .active a:before {
content: "\25B6";
color: #faacca;
font-style: normal;
padding-right: 8px;
}
#playlist .active a:hover {
color: #ddd5f5; /* cor da musica seleciona em hover */
} 

No código já coloquei as explicações, mas qualquer dúvida é só perguntar; o que foi feito acima foi a personalização da aparência do player. Ele vai ficar com um mini player aparecendo no cantinho do rodapé do blog (destaque em rosa abaixo) que quando o mouse passar sobre ele, vai se abrir para ver todas as músicas. Basta clicar em alguma para tocar.

3. Finalmente, vamos adicionar as músicas em um gadget HTML/JavaScript:
 <div id="musicgadget">
<div id="musicgadgetinfo">
</div>
<div id="player">
<div id="musicgadgettitle"><audio controls="" id="audio" preload="auto" tabindex="0" type="audio/mpeg">
<source src="URL-DA-PRIMEIRA-MUSICA" type="audio/mp3"></source>
AVISO AO LEITOR PARA USAR CHROME OU FIREFOX.
</audio>
</div></div>
<ul id="playlist">
<div id="imagetop"></div>
<li class="active"><a href="URL-DA-PRIMEIRA-MUSICA">NOME DA MUSICA - CANTOR/BANDA</a></li>
<li><a href="URL-DA-SEGUNDA-MUSICA">NOME DA MUSICA - CANTOR/BANDA</a></li>
<li><a href="URL-DA-TERCEIRA-MUSICA">NOME DA MUSICA - CANTOR/BANDA</a></li>
<li><a href="URL-DA-QUARTA-MUSICA">NOME DA MUSICA - CANTOR/BANDA</a></li>
<li><a href="URL-DA-QUINTA-MUSICA">NOME DA MUSICA - CANTOR/BANDA</a></li>
<div id="image"></div>
</ul></div> 

Aquela mensagem de aviso só vai aparecer caso o leitor use um navegador como o Internet Explorer. E para adicionar mais de 5 músicas é só ir repetindo os últimos códigos. Salve e veja em seu blog como ficou. Só ouvir agora. Espero que gostem. Beijus.






Postar um comentário

9 Comentários

  1. Amei, mais eu acho super complicado de colocar xD Sou meio lerdinha mais com o tempo eu aprendo -q até mais o/

    Kim
    Coisinhas Orientais

    ResponderExcluir
  2. Que criativos! Adorei
    simsegredei.blogspot.com.br

    ResponderExcluir
  3. Amei, muito obrigada pelo tutorial haha' vou usar :3

    Bjoon

    ResponderExcluir
  4. Amora, deu um erro.
    quando fui testar, cliquei no botão para tocar.
    mas ele fica meio cinza e não toca nada.

    ResponderExcluir
  5. colei nos devido lugares porém ... nem o player e mem a playlist apareceram ... ñ aconteceu...vc pode me ajudar?

    ResponderExcluir
    Respostas
    1. Vou verificar aqui :)

      Excluir
    2. Eu coloquei um valor muito alto em bottom: -610px e quando modifiquei o número para -400px, apareceu aqui na tela ^^'

      Excluir
  6. coloquei no meu mais ão abre play ainda funciona?

    ResponderExcluir
    Respostas
    1. Tenho que atualizar os links dos scripts por causa das mudanças do blogger e do dropbox, onde hospedei a maioria dos meus links. Em breve farei isso ok ^^

      Excluir

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 - Deviantart

up