Memasang Kode HTML5 Audio Player
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut : Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut : Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.
Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="Mys2010-styles">
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300);
body {);color:#000;font-size:10px;theight:100%;overflow:hidden;}
body {
background: -webkit-linear-gradient(#401d61 0%, #793eb3 100%);
background: linear-gradient(#401d61 0%, #793eb3 100%);
}
header {
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
padding: 0px 0;
position: fixed;
top:-4px;
width: 100%;
text-align: center;
font-size: 6px;
background: linear-gradient(270deg, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60));
border-bottom: 3px solid #333;
-webkit-animation: shadow 6s ease-in-out infinite;
animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size: 11px;
background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
}
h2 {
padding:15px;
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%);
background: linear-gradient(transparent 10%, #333 50%, transparent 90%);
-webkit-animation: shadow 1s ease-in-out infinite;
animation: shadow 1s ease-in-out infinite;
}
/*Text Bawah1*/
M-2010, #teks, #posisi, #dibawah, span {
position: relative;
display: inline-block;
}
#M-2010, #teks, #posisi, #dibawah {
position: absolute;
font-size: 11px;
margin: 2px
}
#M-2010, #teks div {
text-decoration: underline;
cursor: pointer
}
#teks, #posisi {
text-align: right;
right: 50px;
}
#teks, #dibawah {
text-align: left;
left: 50px;
}
#dibawah, #posisi {
bottom:28px;
-webkit-animation: shadow 6s ease-in-out infinite;
animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow {
0% {
text-shadow: 0 0 2px #B0E0E6 ,
0 0 8px #B0E0E6 , 0 0 10px #B0E0E6 ,
0 0 20px #B0E0E6 , 0 0 30px #B0E0E6 ,
0 0 40px #B0E0E6, 0 0 50px #B0E0E6 ,
0 0 80px #B0E0E6;
}
50% {
text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8),
0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90),
0 -10px 2px rgba(255, 0, 0, 0.8);
}
100% {
text-shadow: 0 0 2px #800080 ,
0 0 8px #800080 , 0 0 10px #800080 ,
0 0 20px #800080 , 0 0 30px #800080 ,
0 0 40px #800080 , 0 0 50px #800080 ,
0 0 80px #800080 ;
}
}
/*end*/
.shadow-top:after {
content: " ";
box-shadow: 0 0 200px 200px #8E006B;
}
.shadow-top:before {
content: " ";
box-shadow: 0 0 200px 80px rgba(255, 0, 0, 0.90);
}
#M2010-shadow {
margin:-110px;
box-shadow: 0 0 150px 25px #Ff0;
}
.shadow1:before,.shadow1:after {
z-index:-1;
position:absolute;
content: " ";
bottom:25px;
left:10px;
width:50%;
max-width:110px;
box-shadow: 0 0 200px 90px rgba(255, 0, 0, 0.90);
-webkit-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
-o-transform:rotate(-8deg);
-ms-transform:rotate(-8deg);
transform:rotate(-8deg);
}
.shadow1:after {
-webkit-transform:rotate(8deg);
-moz-transform:rotate(8deg);
-o-transform:rotate(8deg);
-ms-transform:rotate(8deg);
transform:rotate(8deg);
right:10px;
left:auto;
}
/* Basic */
*, *:before, *:after { box-sizing: border-box; }
body { margin: 0; min-height: 100%; background: #8000800; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; }
a { color: #444; text-decoration: none; }
a:hover { color: #ff0000; }
p { margin: 0; }
.credits { position: absolute; left: 110px; bottom: 104px; color: #dad; font-size: 14px; }
.credits a { color: #24006B; }
/* Centering */
#container, #progress, #player, #flip-back, .cover, .playlist {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 104px;
}
#container {
width: 320px;
height: 320px;
perspective: 550px;
-webkit-perspective: 550px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
#player {
width: 300px;
height: 300px;
background: #24006B;
border-radius: 50%;
overflow: hidden;
box-shadow: 2px 2px 20px 0 #FF3300);
z-index: 300;
}
#progress {
width: 320px;
height: 320px;
z-index: 200;
transform: rotate(147deg);
-webkit-transform: rotate(147deg);
filter: blur(1px);
-webkit-filter: blur(1px);
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}
#flip-back {
width: 300px;
height: 300px;
background: #4D4D4D;
border: 4px solid #AEAEAE;
border-radius: 50%;
overflow: hidden;
box-shadow: inset 0 -10px 10px -5px rgba(0,0,0,.3), 2px 2px 20px 0 rgba(0,0,0,.3); /* inner + outer */
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
/* Album Cover */
img {
width: 100%;
height: 100%;
background: #fff;
opacity: .75;
transition: .3s all ease-in-out;
-webkit-transition: .3s all ease-in-out;
}
/* Fade */
#container:hover .cover,
#container:hover .to-lyrics-label,
#container:hover .to-back-label {
opacity: .9;
}
.cover,
.to-lyrics-label,
.to-back-label {
opacity: .3;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
/* Player Buttons */
.controls {
position: relative;
width: 100%;
color: #fff;
text-align: center;
}
button {
margin: 10px;
color: #fff;
background: transparent;
border: 0;
outline: 0;
cursor: pointer;
text-align: center;
text-shadow: 1px 1px 3px #000;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
button:hover {
color: #26C5CB;
}
#play-pause {
width: 46px;
height: 46px;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}
/* Song Info */
.info {
position: relative;
margin-top: 28px;
bottom: 10px;
color: #fff;
text-align: center;
text-shadow: 1px 1px 3px #000;
}
.song {
font-size: 18px;
}
.author {
font-size: 14px;
margin-bottom: -8px;
}
/* ... */
.song,
.author,
.playlist a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Volume */
input[type='range'] {
display: block;
margin: 14px auto;
width: 80px;
height: 2px;
outline: 0;
cursor: pointer;
box-shadow: 1px 1px 3px 0 #000;
-webkit-appearance: none !important;
}
input[type='range']::-webkit-slider-thumb {
background: #AEAEAE;
height: 6px;
width: 6px;
border-radius: 50%;
transition: .1s all linear;
-webkit-transition: .1s all linear;
-webkit-appearance: none !important;
}
input[type='range']:hover::-webkit-slider-thumb {
background: #26C5CB;
-webkit-transform:scale(2);
}
/* Checkboxes */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
text-shadow: 1px 1px 3px #000;
}
.to-back-label:hover,
.to-lyrics-label:hover {
color: #26C5CB;
}
label:active,
label:focus {
top: 0;
opacity: 0;
}
label.to-back-label {
position: absolute;
top: 20px;
left: 50%;
width: 30px;
height: 30px;
margin-left: -15px;
color: #fff;
text-align: center;
cursor: pointer;
z-index: 500;
}
label.to-lyrics-label {
position: absolute;
top: 276px;
left: 50%;
width: 20px;
height: 20px;
margin-left: -5px;
color: #fff;
cursor: pointer;
z-index: 500;
}
/* Flip Back */
#player, #flip-back {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: transform .5s ease-in-out;
-webkit-transition: -webkit-transform .5s ease-in-out;
}
#to-back:checked ~ #flip-back {
z-index: 400;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
#to-back:checked ~ #player {
z-index: -1;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
#to-back:checked ~ #progress {
opacity: 0;
transform: rotate(0);
-webkit-transform: rotate(0);
}
#to-back:checked ~ #flip-back .playlist {
transform: translateY(0);
-webkit-transform: translateY(0);
}
/* Lyrics */
.lyrics {
position: relative;
width: 100%;
height: 96px;
margin-top: 30px;
padding: 4px 24px;
color: #000;
background: rgba(255,255,255,.3);
font-size: 12px;
text-align: center;
overflow-y: scroll;
box-shadow: inset 0 -3px 5px 0 rgba(0,0,0,.5);
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}
.lyrics:hover {
background: rgba(255,255,255,.8);
}
.lyrics::-webkit-scrollbar {
display: none;
}
.scroll {
color: #fff;
text-align: center;
font-size: 9px;
font-weight: bold;
text-shadow: 1px 1px 3px #000;
}
.cover {
padding-top: 130px;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}
#to-lyrics:checked ~ .cover {
padding-top: 40px;
}
#to-lyrics:checked ~ .cover .lyrics {
margin-top: 0px;
}
#to-lyrics:checked ~ .cover button {
margin: 4px;
}
/* Playlist */
.playlist {
margin-top: 20px;
padding: 14px 20px;
font-size: 12px;
text-align: center;
list-style: none;
overflow-y: auto;
z-index: 9999;
transform: translateY(300px);
-webkit-transform: translateY(300px);
transition: transform .5s ease-in-out .3s;
-webkit-transition: -webkit-transform .5s ease-in-out .3s;
}
.playlist h3 {
color: #aeaeae;
}
.playlist li {
display: block;
padding: 4px 0;
color: #AEAEAE;
cursor: pointer;
text-decoration: none;
}
.playlist li:hover {
color: #26C5CB;
}
.playlist li:nth-child(1) {
padding: 0 24px;
}
.playlist::-webkit-scrollbar {
display: none;
}
/* Media Queries */
@media all and (max-width: 768px) {
#container, #player { width: 150px; height: 150px;}
#progress { width: 160px; height: 160px; margin-top: -5px; margin-left: -5px; }
label, .lyrics, .scroll { display: none; }
.cover { padding-top: 46px; }
button { margin: 4px; }
button:first-of-type, button:last-of-type { display: none; }
input[type='range'] { display: block; margin-top: -76px; height: 1px; }
.info { margin-top: 70px; }
.song { font-size: 12px; }
.author { font-size: 10px; }
}
</style>
<div align="center" style="margin-top:88px"> <div class="shadow1"> </div> <div id="M2010-shadow"> </div> <div align="center"> <div class="shadow-top"> </div> <div class="M-logo"> </div> </div></div> </div></div>
<div id="container"> <label class="to-back-label" for="to-back"><i class="fa fa-bars fa-lg"></i></label> <input type="checkbox" id="to-back"><!-- playlist toggle --> <canvas id="progress" width="320" height="320"></canvas><!-- progress bar --> <div id="player"> <audio id="audio" controls> <source src="https://sites.google.com/site/pelajaranku1/mp3ku/Led-Zeppelin-Stairway-to-Heaven-Mys2010.mp3" type="audio/mpeg" codecs="mp3" type="audio/mpeg" codecs="mp3"></source> </audio> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9uNCIgpqS9rQqBdDGd75cvC3Pa3XFO-BqgNv4ydf1gs5XKlR0nPFQTK28I1BJRCZsAJuCZc7mbdCOIbZiy10PKEMBGFxQHGAehM2x4pps4FB0jShj8uvNvMMh9xGidYo61CXM6YJwOFR5/s1600-r/swan-love-mys2010.jpg"><!-- album cover --> <label class="to-lyrics-label" for="to-lyrics"><i class="fa fa-caret-down fa-lg"></i></label> <input type="checkbox" id="to-lyrics"><!-- lyrics toggle --> <div class="cover"> <div class="controls"> <button id="backward" title="Backward"><i class="fa fa-retweet fa-lg"></i></button> <button id="backward" title="Backward"><i class="fa fa-backward fa-2x"></i></button> <button id="play-pause" title="Play" onclick="togglePlayPause()"><i class="fa fa-play fa-3x"></i></button> <button id="forward" title="Forward"><i class="fa fa-forward fa-2x"></i></button> <button id="backward" title="Backward"><i class="fa fa-random fa-lg"></i></button> <input id="volume" name="volume" min="0" max="1" step="0.1" type="range" onchange="setVolume()" /> </div> <!-- #controls --> <div class="info"> <p class="song"> </div> <!-- #info --> <div class="lyrics"> <p> Mys2010</p> </div> <!-- #lyrics --> <p class="scroll"> scroll down</p> </div> <!-- #cover --> </div> <!-- #player --> <div id="flip-back"> <ul class="playlist"><font size="2" color="#888"face="arial"> <h3> Led Zeppelin</h3> <h3> Stairway to Heaven</h3> </h3> <font size="2" color="#dad"face="arial"> <p> <b>Sources Code By </b></p> <p> Audio Player by. Arsen Zbidniakov </p> <p> Edited by. Mys2010 Cibeber Cimahi </p> </ul> </div> <!-- #flip-back --> </div> <!-- #container --> <div class="credits"> <p> MUSIC : <a href="http://www.ledzeppelin.com/video/stairway-heaven-ny-1973" target="_blank">Ledzepplin</a> <p> SOURCES : <a href="http://codepen.io/ARS/pen/sLDjh" target="_blank">Codepen</a> Edited by <a href="http://sample-mys2010.blogspot.co.id" target="_blank">Mys2010</a> Cibeber Cimahi : Next - <a href="http://Link Title">The Cranberries</a></p> </div> <div class="ap" id="ap"> <div align="center"> <div id="dibawah"> <span style="font-family: arial ; font-size: 12px; color:#fff;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><span style="color: #FFFF00; font-size: 14px;"> M - 2010 </a> DOWNLOAD </a> </div> <div id="posisi"> <span style="font-family: arial ; font-size: 12px; color:#fff;"> COPYRIGHT <a href="http://codepen.io/Myscript2010/pen/gLvKLV" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;"> © - 2016 </a> CODEPEN </a> </div><h2><a href="http://www.ledzeppelin.com/video/stairway-heaven-ny-1973"target="_blank" title="Mari Belajar"><span style="color:orange; font-size: 11pt">www.ledzeppelin.com</h2></div> </div> <header> <a href="http://sample-mys2010.blogspot.co.id/2016/12/html5-audio-player.html" target="_blank" title="Mari Belajar"> <h2> <span style="color:orange; font-size: 11pt">Let's Study</a> </h2> </a> </div> </header>
<!-- #credits -->
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script> <script>
var audio = document.getElementById('audio');
var progress = document.getElementById('progress');
var playpause = document.getElementById('play-pause');
var volume = document.getElementById('volume');
audio.controls = false;
audio.addEventListener('timeupdate', function () {
updateProgress();
}, false);
function togglePlayPause() {
if (audio.paused || audio.ended) {
playpause.title = 'Pause';
playpause.innerHTML = '<i class="fa fa-pause fa-3x"></i>';
audio.play();
} else {
playpause.title = 'Play';
playpause.innerHTML = '<i class="fa fa-play fa-3x"></i>';
audio.pause();
}
}
function setVolume() {
audio.volume = volume.value;
}
function updateProgress() {
var percent = Math.floor(100 / audio.duration * audio.currentTime);
progress.value = percent;
var canvas = document.getElementById('progress');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 150;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
var cpercent = percent / 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, circ * cpercent, false);
context.lineWidth = 10;
context.strokeStyle = '#fff';
context.stroke();
if (audio.ended)
resetPlayer();
}
function resetPlayer() {
audio.currentTime = 0;
context.clearRect(0, 0, canvas.width, canvas.height);
playpause.title = 'Play';
playpause.innerHTML = '<i class="fa fa-play fa-3x"></i>';
}
</script>
Audio Code by. Arsen Zbidniakov
Background code by. Myscript2010
Design Code is Edited by. M-2010 on Codepen
Background code by. Myscript2010
Design Code is Edited by. M-2010 on Codepen
If you want to directly copy and paste you canDownload Here HTML5 Audio Player
