Demostração

<!doctype html public>
<html lang="pt-br">
 <head>
  <title>Player Album</title>
  <meta charset="utf-8">
 </head>
<style type="text/css">
div.bloco:before{
 content:"";
 position:fixed;
 left:0;
 right:0;
 z-index:-1;
 
 display:block;
 background-image:url('https://i.ytimg.com/vi/BPulcR5fOfQ/maxresdefault.jpg');
 width:500px;
 height:200px;
 
 -webkit-filter:blur(5px);
 -moz-filter:blur(5px);
 -o-filter:blur(5px);
 -ms-filter:blur(5px);
 filter:blur(5px);
}
#imagem #perfil{
 z-index:9999;
 border-radius:50%;
 margin-top:23px;
 border:2px solid #000;
}
#play{
 z-index:9999;
 border:0;
 position:absolute;
 float:left;
 background:rgba(206, 205, 205, 0.58);
 margin-left:-100px;
 margin-top:75px;
 border-radius:50%;
 width:56px;
 height:52px;
}
#play:hover{
 z-index:9999;
 border:0;
 position:absolute;
 float:left;
 background:#ccc;
 margin-left:-100px;
 margin-top:75px;
 border-radius:50%;
 width:56px;
 height:52px;
}
#nome-descri{
 width:315px;
 color:#FFF;
 float:right;
 position:absolute;
 margin-left:160px;
 margin-top:-150px;
}
p{
 width:110px;
 color:#fff;
 height:30px;
 border-radius:2px;
 background:rgba(255,0,0,0.54);
 border:1px solid #F33;
}
</style>
<script language="text/javascript">
function alertaPause(){
 alert("olá\nEntre no link para ver o resto.");
 var vid = document.getElementById("player-radio");
}
function myFunctiom(){
 isSupp = vid.canPlayerType("audio/mpeg");
 if (isSupp == ""){
  vid.src = "https://s1.vocaroo.com/media/download_temp/Vocaroo_s1RocxDYz5rx.mp3";
 }else {
  vid.src = "";
 }
 vid.load();
}
</script>
<body>
 <div class="bloco">
  <div id="imagem">
   <img id="perfil" src="https://i.ytimg.com/vi/BPulcR5fOfQ/maxresdefault.jpg" width="150" height="150">
   <audio id="player-radio" style="display:none;" controls onpause="alertaPause()">
    <source src="https://s1.vocaroo.com/media/download_temp/Vocaroo_s1RocxDYz5rx.mp3" type="audio/mpeg">
   </audio>
   <img id="play" onclick="document.getElementById('player-radio').play()" title="Ouvir" src="https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons-round/512/Button_3-512.png" width="56" height="52" />
  </div>
<div id="nome-descri">
   <h2>
<b><marquee scrolldelay="300">titulo da musica - nome do artista</marquee></b></h2>
<p>
<b><a style="color:white; text-decoration:none; padding-top:5px; float:left; " target="_blank" title="seu titulo" href="#">MC Luiz Bruno</a></b></p>
</div>
</div>
</body>
</html>

Script Tutoriais

Pesquisar este blog

Demostração

Comentários

Postar um comentário