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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic5LuJMzaowyXKH-2Qx6ltWtqGD_mD-R2ndtQmMy-5myncQW1eJbY7UOc04NXBNmBJKd4RdC1T09Z33o1rW_DYzqaQrVzqvW2hDeEOJjgfeUqtNvJsCjMylLPYhldoEYyKMw4CHZZomO8/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: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic5LuJMzaowyXKH-2Qx6ltWtqGD_mD-R2ndtQmMy-5myncQW1eJbY7UOc04NXBNmBJKd4RdC1T09Z33o1rW_DYzqaQrVzqvW2hDeEOJjgfeUqtNvJsCjMylLPYhldoEYyKMw4CHZZomO8/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: Nevada - Vicetone.






Postar um comentário

8 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
  3. Boa tarde, amiga! Esse player reproduz musicas em aparelhos de celular? Parabéns pela criatividade. Eu to tentando criar um player simples com apenas dois botões que possa reproduzir em celulares android, mas ta muito dificil, rsss.

    ResponderExcluir
    Respostas
    1. Bom dia :3 Acho que sim; aquele anterior do botãozinho rosa, e esse, podem ser adicionados a um widget html (no Blogger), ou em alguma parte do HTML referente ao corpo da página do tema que estiver usando, então acredito que funcionem em celular também. Só hospedar o arquivo mp3 em sites como Github

      Excluir
    2. Dá certo Gilmar; atualizei aqui o arquivo MP3 e está tocando a música no celular também <:

      Excluir
    3. Obrigado minha querida. Fico grato a vc e desculpas pela demora em responder. Esses player são bons para colocar musicas no site. Grato a vc!

      Excluir
  4. E uma pena que não seja responsivo, no celular só aparece se colocar para computador. :( Tem jeito? Obg

    ResponderExcluir
    Respostas
    1. Vc pode reduzir as larguras dele para ficar menor e aparecer mais bonitinho em telas de smartphone :)

      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