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!
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.
Música: Nevada - Vicetone.
Oi troquei o GIF, porem a imagem não apareceu... vc saberia se tem que ser do tamanho do GIF original?
ResponderExcluirTalvez você deva alterar os tamanhos (width/height) para a nova imagem e depois o tamanho do widget ^^
ResponderExcluirBoa 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.
ResponderExcluirBom 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
ExcluirDá certo Gilmar; atualizei aqui o arquivo MP3 e está tocando a música no celular também <:
ExcluirObrigado 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!
ExcluirE uma pena que não seja responsivo, no celular só aparece se colocar para computador. :( Tem jeito? Obg
ResponderExcluirVc pode reduzir as larguras dele para ficar menor e aparecer mais bonitinho em telas de smartphone :)
Excluir