Follow Us @soratemplates

terça-feira, 26 de julho de 2016

Music Player Kawaii


Oi. Para quem curte música, trouxe um gadget bem fofinho para enfeitar sua sidebar. É um music player kawaii, com opções de tocar, pausar, aumentar e abaixar o volume. Nesse modelinho só se coloca uma música, aquela que não sai da sua cabeça sabe, que você fica cantando toda hora, então, coloca ela no blog também :D
Vamos lá! Copie o código abaixo e coloque em um novo gadget HTML/JavaScript em Layout do seu blog. Salve e veja funcionando ao acessar sua página.
 <center>
<div style="background: none; font-family: 'Delius Swash Caps', cursive; font-size: 30px; letter-spacing: 3px; text-shadow: 3px 3px 3px #FFE2E2;">
<span style="color: #D2EEFC;">Ka</span><span style="color: #ffcccc;">wa</span><span style="color: #b9f0b9;">ii</span>
<span style="color: #ffcc80;">-S</span><span style="color: #e0a3ff;">on</span><span style="color: #ffc2eb;">g!</span>
</div></center><br/>
<div class='player-wrapper'>
<audio id='player' src="URL-DA-MUSICA.MP3"></audio>
<div class='player-controls'>
<div class='player-thumb'>
<img src='http://3.bp.blogspot.com/-ftHLJNJPW50/U6MlIejE56I/AAAAAAAANJY/6x1PZnQ3u_M/s1600/18.gif' />
<marquee behavior=" scroll" direction= "left" scrollamount="5" onmouseover="scrollAmount=3" onmouseout="this.scrollAmount=4">
<span style="color: #D2EEFC;">La-</span><span style="color: #ffcccc;">la-</span><span style="color: #b9f0b9;">la-</span>
<span style="color: #ffcc80;">La-</span><span style="color: #e0a3ff;">la</span><span style="color: #ffc2eb;">laaaa!</span></marquee>
</div>
<a onclick="document.getElementById('player').play()"><span style="color: #D2EEFC;">Pl</span><span style="color: #ffcccc;">ay</span></a>
<a onclick="document.getElementById('player').pause()"><span style="color: #D2EEFC;">Pau</span><span style="color: #ffcccc;">se</span></a>
<a onclick="document.getElementById('player').volume+=0.1"><span style="color: #D2EEFC;">+</span></a>
<a onclick="document.getElementById('player').volume-=0.1"><span style="color: #ffcccc;">-</span></a>
<progress id='progress' max='100' value='0'><span>0</span>%</progress>
</div> 
</div>
<style>
@import url(https://fonts.googleapis.com/css?family=Delius+Swash+Caps);
.player-wrapper {
font-family: 'Delius Swash Caps', cursive;
display: table;
height: auto;
width: 180px; /* largura */
background: #4C1303; /* Cor do player */
border-radius: 13px;
position: relative;
margin: 0 auto;
outline: 1px dashed;
outline-offset: -9px;
box-shadow: 2px 2px 5px 5px;
}
.player-thumb img {
width: 191px; /* tamanho da imagem */
padding:10px 0;
margin: 0 auto;
text-align: center;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
}
.player-thumb img:hover {
border-radius:10px !important;
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
.player-controls {
text-align: center;
display: table-cell;
vertical-align: middle;
padding:0 0 10px;
}
.player-controls a {
margin: 0 2px;
cursor: pointer;
cursor: hand;
}
.player-controls progress {
width:75%;
height: 7px;
background: #FFF;
color: #fcc !important;
margin-top: 5px;
}
/* barra de progresso */
::-moz-progress-bar {background: #fcc;}
::-webkit-progress-bar {background: #fff;}
::-webkit-progress-value {background: #fcc;}
</style>
<script>
var audio=document.getElementById('player');var pBar=document.getElementById('progress');audio.addEventListener('timeupdate',function(){var percent=Math.floor((100/audio.duration)*audio.currentTime);pBar.value=percent;pBar.getElementsByTagName('span')[0].innerHTML=percent},false);
</script> 

Você pode substituir os textos coloridos conforme verá no código, mantendo as palavras entre <span> e </span>. Em URL-DA-MUSICA.mp3, substitua pelo link de alguma música hospedada por você em sites tipo Dropbox, por exemplo, sendo que o arquivo tem que estar com o formato mp3 e se quiser mudar o gif, substitua esse link: http://3.bp.blogspot.com/-ftHLJNJPW50/U6MlIejE56I/AAAAAAAANJY/6x1PZnQ3u_M/s1600/18.gif. O resultado será esse (aperte o play):

Kawaii -Song!

La-la-la- La-lalaaaa!
Play Pause + - 0%





Caso queiram criar uma playlist apenas com HTML, veja esse post aqui, onde estão os créditos dos códigos originais com os quais eu editei para fazer esse. Espero que gostem!
Imagem: Pixabay.
Música: Gold Skies - Sander van Doorn, Martin Garrix, DVBBS feat. Aleesia.

2 comentários:

  1. Oi troquei o GIF, porem a imagem não apareceu... vc saberia se tem que ser do tamanho do GIF original?

    ResponderExcluir
  2. Talvez você deva alterar os tamanhos (width/height) para a nova imagem e depois o tamanho do widget ^^

    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