UI Audio Player

Memasang kode UI Audio Player
Kode ini dapat memainkan musik dengan format mp3. Untuk menerapkan kode tersebut Langkah awal 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 ini Get Blank Template edit background warna sesuai keinginan dan 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

<style class="mys2010-styles">

body {
  font-family: Roboto;
  background-color: #bbdefb;
}
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.player {
  position: relative;
  background-color: #ffffff;
  background-image: url("http://alcohol-time.ru/for-codepen/md-ui-audio-player/image/tim_minchin_piano.jpg");
  width: 550px;
  height: 375px;
  border-radius: 3px;
  border-bottom: 6px solid #3f51b5;
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.player:hover .mask {
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-transition: all 1s;
  transition: all 1s;
}
.player .like {
  position: absolute;
  width: 35px;
  height: 35px;
  top: 15px;
  right: 20px;
  z-index: 15;
  font-size: 1.5em;
  vertical-align: middle;
  line-height: 38px;
  color: #f2f2f2;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}
.player .icon-heart {
  display: block;
}
.player .mask {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: 2;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.player-info {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 4;
  list-style: none;
  color: #262626;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.player-info li {
  margin-bottom: 7px;
}
.player-info li:nth-child(1) {
  font-size: 1.5em;
}
.player-info li:nth-child(2) {
  font-size: 1.2em;
}
.player-info li:nth-child(3) {
  font-size: .9em;
}
.player .info-two {
  left: auto;
  right: 4.5%;
  z-index: 1;
  color: #f2f2f2;
}
.player .info-two li:nth-child(2) {
  float: right;
}
.player .info-two li:nth-child(3) {
  display: inline-block;
  float: right;
  clear: both;
}
.player #play-button {
  box-sizing: border-box;
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #5c6bc0;
  box-shadow: 0 8px 25px 6px rgba(0, 0, 0, 0.5);
  right: 40px;
  bottom: 90px;
  z-index: 5;
  cursor: pointer;
  -webkit-transition: all 70ms;
  transition: all 70ms;
  border: none;
}
.player #play-button:hover {
  width: 70px;
  height: 70px;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.5);
  right: 45px;
  bottom: 95px;
  -webkit-transition: all 70ms;
  transition: all 70ms;
}
.player #play-button .icon-play {
  position: absolute;
  font-size: 1.5em;
  left: 52%;
  top: 50%;
  -webkit-transform: translate(-48%, -50%);
          transform: translate(-48%, -50%);
  -webkit-transition: all 70ms;
  transition: all 70ms;
  color: #ffffff;
}
.player #play-button:hover .icon-play {
  font-size: 1.2em;
  -webkit-transition: all 70ms;
  transition: all 70ms;
}
.player #play-button .icon-cancel {
  position: absolute;
  font-size: 1.6em;
  left: 50%;
  top: 49%;
  -webkit-transform: translate(-50%, -51%);
          transform: translate(-50%, -51%);
  color: #ffffff;
}
.control-row {
  position: absolute;
  bottom: -1px;
  width: 100%;
  height: 130px;
  background-color: #ffffff;
  overflow: hidden;
  z-index: 3;
}
.control-row #pause-button {
  box-sizing: border-box;
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f2f2f2;
  left: 40px;
  bottom: 25px;
  z-index: 5;
  cursor: pointer;
  border: none;
  -webkit-transform: scale(0);
          transform: scale(0);
  display: none;
  -webkit-animation: scale-animation 0.4s;
          animation: scale-animation 0.4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}
.control-row #pause-button .icon-pause {
  position: absolute;
  font-size: 1.5em;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all .1s;
  transition: all .1s;
  color: #424242;
}
.control-row #pause-button .icon-play {
  position: absolute;
  font-size: 1.5em;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all .1s;
  transition: all .1s;
  color: #424242;
}
.control-row .seek-field {
  bottom: 67px;
  left: 148px;
  position: absolute;
  width: 170px;
  z-index: 5;
  -webkit-transform: scale(0);
          transform: scale(0);
  display: none;
  -webkit-animation: scale-animation 0.4s;
          animation: scale-animation 0.4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}
.control-row .volume-field {
  bottom: 67px;
  right: 127px;
  position: absolute;
  width: 50px;
  z-index: 5;
  -webkit-transform: scale(0);
          transform: scale(0);
  display: none;
  -webkit-animation: scale-animation 0.4s;
          animation: scale-animation 0.4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}
.control-row .volume-icon {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  bottom: 58px;
  right: 185px;
  z-index: 5;
  font-size: 1.2em;
  display: none;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation: scale-animation 0.4s;
          animation: scale-animation 0.4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}
.control-row .volume-icon .icon-volume-up {
  color: #424242;
}
.like-active {
  color: #ef5350;
  -webkit-animation: scale-animation 0.4s;
          animation: scale-animation 0.4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes scale-animation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-animation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.waves-animation-one {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #5c6bc0;
  z-index: 3;
  left: 42.5%;
  bottom: 20%;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation: waves-animation-one 0.25s;
          animation: waves-animation-one 0.25s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
  display: none;
}
@-webkit-keyframes waves-animation-one {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  99% {
    -webkit-transform: scale(7.8);
            transform: scale(7.8);
  }
  100% {
    -webkit-transform: scale(7.8);
            transform: scale(7.8);
  }
}
@keyframes waves-animation-one {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  99% {
    -webkit-transform: scale(7.8);
            transform: scale(7.8);
  }
  100% {
    -webkit-transform: scale(7.8);
            transform: scale(7.8);
  }
}
.waves-animation-two {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #5c6bc0;
  z-index: 3;
  right: 40px;
  bottom: 35px;
  -webkit-transform: scale(7.8);
          transform: scale(7.8);
  display: none;
  -webkit-animation: waves-animation-two 0.2s;
          animation: waves-animation-two 0.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes waves-animation-two {
  to {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
@keyframes waves-animation-two {
  to {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
.info-active {
  -webkit-animation: info-active-animation 3s;
          animation: info-active-animation 3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .37s;
          animation-delay: .37s;
}
@-webkit-keyframes info-active-animation {
  to {
    bottom: 56.5%;
  }
}
@keyframes info-active-animation {
  to {
    bottom: 56.5%;
  }
}
.play-active {
  -webkit-animation: play-animation 0.3s;
          animation: play-animation 0.3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes play-animation {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  98% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transform: translate(-200px, 65px);
            transform: translate(-200px, 65px);
  }
  99% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transform: translate(-200px, 65px) scale(0);
            transform: translate(-200px, 65px) scale(0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transform: translate(0, 65px) scale(1);
            transform: translate(0, 65px) scale(1);
  }
}
@keyframes play-animation {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  98% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transform: translate(-200px, 65px);
            transform: translate(-200px, 65px);
  }
  99% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transform: translate(-200px, 65px) scale(0);
            transform: translate(-200px, 65px) scale(0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transform: translate(0, 65px) scale(1);
            transform: translate(0, 65px) scale(1);
  }
}
.play-inactive {
  -webkit-animation: play-inactive 1s;
          animation: play-inactive 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes play-inactive {
  from {
    -webkit-transform: translate(0, 65px);
            transform: translate(0, 65px);
  }
}
@keyframes play-inactive {
  from {
    -webkit-transform: translate(0, 65px);
            transform: translate(0, 65px);
  }
}
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
input[type="range"]:focus {
  outline: none;
}
input[type="range"] + .thumb {
  display: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
  background: #f2f2f2;
  border-radius: 0;
  border: 0px solid #000101;
}
input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
  border: 0px solid transparent;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #009688;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #f2f2f2;
}
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
  background: #f2f2f2;
  border-radius: 0;
  border: 0px solid #000101;
}
input[type="range"]::-moz-range-thumb {
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
  border: 0px solid transparent;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #009688;
  cursor: pointer;
}
input[type="range"]::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
  padding-top: 5px;
}
input[type="range"]::-ms-fill-lower {
  background: #f2f2f2;
  border: 0px solid transparent;
  border-radius: 0;
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
}
input[type="range"]::-ms-fill-upper {
  background: #f2f2f2;
  border: 0px solid transparent;
  border-radius: 0x;
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
}
input[type="range"]::-ms-thumb {
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
  border: 0px solid transparent;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #009688;
  cursor: pointer;
  margin-top: 1px;
}
input[type="range"]::-ms-tooltip {
  display: none;
}
input[type="range"]::-ms-ticks {
  display: none;
}
input[type="range"]:focus::-ms-fill-lower {
  background: #f2f2f2;
}
input[type="range"]:focus::-ms-fill-upper {
  background: #f2f2f2;
}

<div class="container">
<div class="player">
<div class="like waves-effect waves-light">
<i class="icon-heart"></i>
</div>
<div class="mask">
</div>
<ul class="player-info info-one">
<li>Rock'n'Roll Nerd</li>
<li>Tim Minchin</li>
<li>5:34</li>
</ul>
<ul class="player-info info-two">
<li>Rock'n'Roll Nerd</li>
<li>Tim Minchin</li>
<li><span id="duration"></span><i> / </i>5:34</li>
</ul>
<div id="play-button" class="unchecked">
<i class="icon icon-play"></i>
</div>
<div class="control-row">
<div class="waves-animation-one">
</div>
<div class="waves-animation-two">
</div>
<div id="pause-button">
<i class="icon"></i>
</div>
<div class="seek-field">
<input id="audioSeekBar" min="0" max="334" step="1" value="0" type="range" oninput="audioSeekBar()" onchange="this.oninput()">
</div>
<div class="volume-icon">
<i class="icon-volume-up"></i>
</div>
<div class="volume-field">
<input type="range" min="0" max="100" value="100" step="1" oninput="audio.volume = this.value/100" onchange="this.oninput()">
</div>
</div>
</div>
</div>

<link rel='stylesheet prefetch' href='//codepen.io/assets/reset/normalize.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400'>
<link rel='stylesheet prefetch' href='http://alcohol-time.ru/for-codepen/md-ui-audio-player/waves/waves.min.css'>
<link rel='stylesheet prefetch' href='http://alcohol-time.ru/for-codepen/md-ui-audio-player/font/font.css'>

<audio id="audio-player" ontimeupdate="SeekBar()" ondurationchange="CreateSeekBar()" preload="auto" loop>
<source src="http://alcohol-time.ru/for-codepen/md-ui-audio-player/audio/tim-minchin-rock-n-roll-nerd.ogg" type="audio/ogg">
<source src="http://alcohol-time.ru/for-codepen/md-ui-audio-player/audio/tim-minchin-rock-n-roll-nerd.mp3" type="audio/mpeg">
</audio>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>

<script src='https://code.jquery.com/jquery-2.1.1.min.js'>

</script>
<script src='http://alcohol-time.ru/for-codepen/md-ui-audio-player/waves/waves.min.js'>

</script>
<script>var audio = document.getElementById('audio-player');
$(document).ready(function () {
    $('#play-button').click(function () {
        if ($(this).hasClass('unchecked')) {
            $(this).addClass('play-active').removeClass('play-inactive').removeClass('unchecked');
            $('.info-two').addClass('info-active');
            $('#pause-button').addClass('scale-animation-active');
            $('.waves-animation-one, #pause-button, .seek-field, .volume-icon, .volume-field, .info-two').show();
            $('.waves-animation-two').hide();
            $('#pause-button').children('.icon').addClass('icon-pause').removeClass('icon-play');
            setTimeout(function () {
                $('.info-one').hide();
            }, 400);
            audio.play();
            audio.currentTime = 0;
        } else {
            $(this).removeClass('play-active').addClass('play-inactive').addClass('unchecked');
            $('#pause-button').children('.icon').addClass('icon-pause').removeClass('icon-play');
            $('.info-two').removeClass('info-active');
            $('.waves-animation-one, #pause-button, .seek-field, .volume-icon, .volume-field, .info-two').hide();
            $('.waves-animation-two').show();
            setTimeout(function () {
                $('.info-one').show();
            }, 150);
            audio.pause();
            audio.currentTime = 0;
        }
    });
    $('#pause-button').click(function () {
        $(this).children('.icon').toggleClass('icon-pause').toggleClass('icon-play');
        if (audio.paused) {
            audio.play();
        } else {
            audio.pause();
        }
    });
    $('#play-button').click(function () {
        setTimeout(function () {
            $('#play-button').children('.icon').toggleClass('icon-play').toggleClass('icon-cancel');
        }, 350);
    });
    $('.like').click(function () {
        $('.icon-heart').toggleClass('like-active');
    });
});
function CreateSeekBar() {
    var seekbar = document.getElementById('audioSeekBar');
    seekbar.min = 0;
    seekbar.max = audio.duration;
    seekbar.value = 0;
}
function EndofAudio() {
    document.getElementById('audioSeekBar').value = 0;
}
function audioSeekBar() {
    var seekbar = document.getElementById('audioSeekBar');
    audio.currentTime = seekbar.value;
}
function SeekBar() {
    var seekbar = document.getElementById('audioSeekBar');
    seekbar.value = audio.currentTime;
}
audio.addEventListener('timeupdate', function () {
    var duration = document.getElementById('duration');
    var s = parseInt(audio.currentTime % 60);
    var m = parseInt(audio.currentTime / 60 % 60);
    duration.innerHTML = m + ':' + s;
}, false);
Waves.init();
Waves.attach('#play-button', [
    'waves-button',
    'waves-float'
]);
Waves.attach('#pause-button', [
    'waves-button',
    'waves-float'
]);
</script>

Penjelasan :
Edit Kode Warna ganti link Mp3 dan Link Gambar sesuai keinginan.
Ganti nama artist & judul lagu, Jika ingin menambahkan Background gambar copy kode berikut :

 body
{
 background:url(http://Link Gambar.jpg);}

Pastekan dibawah kode

<style class="mys2010-styles">

Kemudian Klik Simpan selesai

Edited by. Myscript2010
Sources by. Michael Zhigulin on Codepen

DEMOSHOW

Category: UI Audio Player

HTML 5 Audio Player

Memasang kode HTML 5 Audio Player
Kode ini dapat memainkan musik dengan format mp3. Untuk menerapkan kode tersebut Langkah awal 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 ini Get Blank Template edit background warna sesuai keinginan dan 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

<style class="mys2010-styles">@import url(http://fonts.googleapis.com/css?family=Montserrat);
* {
  box-sizing: border-box;
}

body {
  background-color: #ded6d6;
  font-family: "Montserrat", sans-serif;
}

.player-wrap:before, .player-wrap:after {
  content: "";
  background-color: #423939;
  border-radius: 50%;
  height: 91px;
  width: 100px;
  position: absolute;
  display: block;
  top: 0;
  z-index: -1;
}

.player-container {
  display: block;
  width: 422px;
  height: 300px;
  margin-top: 200px;
  padding-top: 91px;
  padding-left: 15px;
  margin: 0 auto;
  background-image: url("http://#");
  background-repeat: no-repeat;
  background-position: 21px -14px;
}

.player-wrap {
  background-color: #423939;
  display: block;
  z-index: 1;
  width: 230px;
  height: 91px;
  margin: 0 auto;
  color: white;
  position: relative;
}
.player-wrap:before {
  left: -45px;
           /*
border-bottom: 2px solid white;*/
}
.player-wrap:after {
  right: -45px;
}

.play-pause {
  width: 100px;
  height: 100px;
  display: inline-block;
  position: absolute;
  left: -33px;
  top: 7px;
  background-image: url("http://dev.steelehouse.com/codepen/play-dark.gif");
  border-radius: 20%;
  background-repeat: no-repeat;
  cursor: pointer;
}
.play-pause.paused {
  background-image: url("http://dev.steelehouse.com/codepen/pause-dark.gif");
}
.play-pause.pausing {
  background-image: url("http://dev.steelehouse.com/codepen/play-to-pause-dark.gif");
}
.play-pause.playing {
  background-image: url("http://dev.steelehouse.com/codepen/pause-to-play-dark.gif");
}

progress {
  height: 7px;
  border-radius: 7px;
  width: 100%;
  background-color: white;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

progress[value]::-webkit-progress-bar {
  background-color: white;
  border-radius: 50%;
  padding: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

progress[value]::-webkit-progress-value {
  background: #c34747;
  padding-left: 6px;
}

.song-meta {
  margin-left: 55px;
  z-index: 5;
  width: 100%;
  padding-right: 40px;
  padding-top: 11px;
}

.artist, .pcast-time {
  font-size: 11px;
  font-weight: lighter;
  text-transform: uppercase;
  letter-spacing: .15em;
  opacity: .6;
}

.pcast-time {
  letter-spacing: 0;
}

.player-wrap, .player-wrap:before, .player-wrap:after {
  background-image: url(data:image/png;base64,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);
}
</style>

<div class="player-container">
  <div class="player-wrap">
    <div class="play-pause"></div>
    <section class="song-meta">
      <div class="artist">Nama Artis</div>
      <div class="song">Judul Lagu</div>
      <div class="timeline"></div>  
      <progress class="pcast-progress" value="0"></progress>
      <span class="pcast-currenttime pcast-time">0:00</span>
    </section> 
   <audio id="main-audio" preload="none" width="100%" src="http://Link Lagu.mp3">
            <source src="http://Link Lagu.mp3" type="audio/mpeg">
          </audio>
  </div>
</div>

<script>
(function () {
    $('.play-pause').click(function () {
        if ($(this).hasClass('pausing')) {
            $(this).removeClass('pausing');
            $(this).addClass('playing');
            $(this).css('background-image', 'url(http://dev.steelehouse.com/codepen/play-to-pause-faster.gif)');
            audio.play();
        } else if ($(this).hasClass('playing')) {
            $(this).removeClass('playing');
            $(this).addClass('pausing');
            $(this).css('background-image', 'url(http://dev.steelehouse.com/codepen/pause-to-play-faster.gif)');
            audio.pause();
        } else {
            $(this).addClass('playing');
            $(this).css('background-image', 'url(http://dev.steelehouse.com/codepen/play-to-pause-faster.gif)');
            audio.play();
        }
    });
    var pcastPlayers = document.querySelectorAll('.player-container');
    var speeds = [
        1,
        1.5,
        2,
        2.5,
        3,
        0.5
    ];
    for (i = 0; i < pcastPlayers.length; i++) {
        if (window.CP.shouldStopExecution(1)) {
            break;
        }
        var player = pcastPlayers[i];
        var audio = player.querySelector('audio');
        var progress = player.querySelector('.pcast-progress');
        var currentTime = player.querySelector('.pcast-currenttime');
        var currentSpeedIdx = 0;
        var toHHMMSS = function (totalsecs) {
            var sec_num = parseInt(totalsecs, 10);
            var hours = Math.floor(sec_num / 3600);
            var minutes = Math.floor((sec_num - hours * 3600) / 60);
            var seconds = sec_num - hours * 3600 - minutes * 60;
            if (hours < 10) {
                hours = '0' + hours;
            }
            if (minutes < 10) {
                minutes = '' + minutes;
            }
            if (seconds < 10) {
                seconds = '0' + seconds;
            }
            var time = hours + ':' + minutes + ':' + seconds;
            if (hours <= 1) {
                var time = minutes + ':' + seconds;
            }
            return time;
        };
        audio.addEventListener('loadedmetadata', function () {
            progress.setAttribute('max', Math.floor(audio.duration));
            duration.textContent = toHHMMSS(audio.duration);
        });
        audio.addEventListener('timeupdate', function () {
            progress.setAttribute('value', audio.currentTime);
            currentTime.textContent = toHHMMSS(audio.currentTime);
        });
        progress.addEventListener('click', function (e) {
            audio.currentTime = Math.floor(audio.duration) * (e.offsetX / e.target.offsetWidth);
        }, false);
    }
    window.CP.exitedLoop(1);
}(this));
//# sourceURL=pen.js
</script>

Penjelasan :
Jika ingin menambahkan background gambar ganti kode berikut ini :

body {
  background-color: #ded6d6;
  font-family: "Montserrat", sans-serif;
}

Dengan kode :

body {
  background:url(http://Link Gambar.jpg);
  font-family: "Montserrat", sans-serif;
}

Tambahkan Teks Shadow jika diperlukan, Copy kode berikut :

<style class="Mys2010-styles">body{
  background:hsla(0,0%,0%,1);
  margin:0;
  width:100%;
  overflow:hidden;
}
p{
  margin: 55px auto 0 auto;
  font-size:130px;
  font-weight:bold;
  font-family: Serif;
  text-align:center;
  color:rgba(0,0,255,0.1);
  text-shadow: 0 1px 0 #000,
               0 2px 0 #111,
               0 3px 0 #222,
               0 4px 0 #333,
               0 5px 0 #444,
               0 6px 1px rgba(0,0,0,1),
               0 12px 2px rgba(0,0,0,1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15),
               0 3px 8px rgba(255,255,255,.2);

}
.illuminated
{
    color: rgba(100,100,255,0.3);
    text-shadow: 0 1px 0 #000,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15),
               0 0px 6px rgba(255,255,255,.3),
               0 8px 8px rgba(255,255,255,.6),
               0 16px 16px rgba(255,255,255,.3),
               0 0 150px rgba(255,255,255,.4),
               0 0 500px rgba(255,255,255,.2);
}
</style>
<p class="illuminated" id="lbl">
RENUNGAN</p>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function flicker() {
    $('#lbl').removeClass('illuminated');
    setTimeout(function () {
        $('#lbl').addClass('illuminated');
    }, 50);
}
function triggerFlicker() {
    setTimeout(flicker, 100);
    setTimeout(triggerFlicker, Math.floor(Math.random() * 2000));
}
triggerFlicker();
//# sourceURL=pen.js
</script>

Pastekan kode tersebut diatas kode :

 <style class="mys2010-styles">@import url(http://fonts.googleapis.com/css?family=Montserrat);
* {
  box-sizing: border-box;
}

Kemudian klik simpan Selesai

Edited by. Myscript2010
Teks Shadow
Source by. Armin Boss on Codepen
Audio Player
Sources by. Hans Engebretsen on Codepen

DEMOSHOW

Category: HTML 5 Audio Player

Movie Credits

Memasang kode Teks Movie Credits
Kode ini menampilkan Teks Slide up. Untuk menerapkan kode tersebut Langkah awal 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 ini Get Blank Template edit background warna sesuai keinginan dan 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

 <style class="mys2010-styles">@import @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background: radial-gradient(ellipse at top left, #334455 0%, #112233 100%);
  overflow: hidden;
}

.wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  font: 300 30px/1 'Open Sans Condensed', sans-serif;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  animation: 60s credits linear infinite;
}

.movie {
  margin-bottom: 50px;
  font-size: 50px;
}

.job {
  margin-bottom: 5px;
  font-size: 18px;
}

.name {
  margin-bottom: 50px;
  font-size: 35px;
}

@keyframes credits {
  0% {
    top: 100%;
  }
  100% {
    top: -500%;
  }
}

</style>

<div class='wrapper'>
  <div class='movie'>life of john doe</div>
  <div class='job'>directed by</div>
  <div class='name'>christopher nolan</div>
  <div class='job'>produced by</div>
  <div class='name'>steven spielberg</div>
  <div class='job'>screenplay by</div>
  <div class='name'>michael bay</div>
  <div class='job'>director of photography</div>
  <div class='name'>wolfgang petersen</div>
  <div class='job'>story</div>
  <div class='name'>david fincher</div>
  <div class='job'>visual effects supervisor</div>
  <div class='name'>jerry bruckheimer</div>
  <div class='job'>cast supervisor</div>
  <div class='name'>john doe</div>
  <div class='job'>directed by</div>
  <div class='name'>christopher nolan</div>
  <div class='job'>produced by</div>
  <div class='name'>steven spielberg</div>
  <div class='job'>screenplay by</div>
  <div class='name'>michael bay</div>
  <div class='job'>director of photography</div>
  <div class='name'>wolfgang petersen</div>
  <div class='job'>story</div>
  <div class='name'>david fincher</div>
  <div class='job'>visual effects supervisor</div>
  <div class='name'>jerry bruckheimer</div>
  <div class='job'>cast supervisor</div>
  <div class='name'>john doe</div>
  <div class='job'>directed by</div>
  <div class='name'>christopher nolan</div>
  <div class='job'>produced by</div>
  <div class='name'>steven spielberg</div>
  <div class='job'>screenplay by</div>
  <div class='name'>michael bay</div>
  <div class='job'>director of photography</div>
  <div class='name'>wolfgang petersen</div>
  <div class='job'>story</div>
  <div class='name'>david fincher</div>
  <div class='job'>visual effects supervisor</div>
  <div class='name'>jerry bruckheimer</div>
  <div class='job'>cast supervisor</div>
  <div class='name'>john doe</div>
  <div class='job'>directed by</div>
  <div class='name'>christopher nolan</div>
  <div class='job'>produced by</div>
  <div class='name'>steven spielberg</div>
  <div class='job'>screenplay by</div>
  <div class='name'>michael bay</div>
  <div class='job'>director of photography</div>
  <div class='name'>wolfgang petersen</div>
  <div class='job'>story</div>
  <div class='name'>david fincher</div>
  <div class='job'>visual effects supervisor</div>
  <div class='name'>jerry bruckheimer</div>
  <div class='job'>cast supervisor</div>
  <div class='name'>john doe</div>
  <div class='job'>directed by</div>
  <div class='name'>christopher nolan</div>
  <div class='job'>produced by</div>
  <div class='name'>steven spielberg</div>
  <div class='job'>screenplay by</div>
  <div class='name'>michael bay</div>
  <div class='job'>director of photography</div>
  <div class='name'>wolfgang petersen</div>
  <div class='job'>story</div>
  <div class='name'>david fincher</div>
  <div class='job'>visual effects supervisor</div>
  <div class='name'>jerry bruckheimer</div>
  <div class='job'>cast supervisor</div>
  <div class='name'>john doe</div>
</div>

Penjelasan : Edit kode yang diwarnai

Edited by. Myscript2010
Sources by. Oliver Knoblich

DEMOSHOW

Category: Movie Credits

Teks Animasi

Memasang kode Teks animasi Kode ini menampilkan Teks animasi yang dapat menghiasi blogg. Untuk menerapkan kode tersebut Langkah awal 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 ini Get Blank Template edit background warna sesuai keinginan dan 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

<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script><script src='http://dimajt.github.io/textition/js/textition.js'></script> <script>
var init = function () {
    $('body').css('opacity', 1);
    $('header').textition({
        map: {
            x: 50,
            y: 20,
            z: 500
        },
        speed: 0.8,
        handler: false,
        autoplay: true,
        interval: 3
    });
    $('nav a:eq(0)').textition({
        map: {
            x: 100,
            y: 0,
            z: 0
        },
        speed: 0.5,
        handler: 'mouseenter mouseleave'
    });
    $('nav a:eq(1)').textition({
        map: {
            x: 0,
            y: 0,
            z: 100
        },
        speed: 0.5,
        perspective: 50,
        handler: 'mouseenter mouseleave'
    });
    $('nav a:eq(2)').textition({
        map: {
            x: 0,
            y: 40,
            z: 0
        },
        speed: 0.5,
        animation: 'ease-out',
        handler: 'mouseenter mouseleave'
    });
};
$(document).ready(init);
//# sourceURL=pen.js
</script>

<header>
<h1> Let's Share </h1>
<h2> Through </h2>
<h2> Social Networking </h2>
</header>

Penjelasan : Ganti teks yang berwarna orange, tambahkan kode warna teks 
diatas kode <header> klik publish selesai <font size="3" color="white"face="arial">

Sources by. Codepen
Edited by. Myscript2010

DEMOSHOW

Category: Teks Animasi

HTML5 Animated 3D Card

Memasang kode HTML5 Animated 3D Card
Kode ini menampilkan Gambar serta musik Mp3. Untuk menerapkan kode tersebut
Langkah awal 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 ini Get Blank Template edit background warna sesuai keinginan dan 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

<style class="mys2010-styles">
* { -moz-boz-sizing: border-box; font-family: Avenir, sans-serif; }
body { margin: 0; }
figure#desk {
  transform: rotateX(60deg);
  position: relative;
  width: 200%;
  height: 900px;
  background: url(http://Link Gambar.jpg);
  background-size: cover;
  margin-left: -200px;
  margin-top: -150px;
  transition: 1.2s 2s;
}

div#scatter {
  perspective: 700px;
  width: 100%;
  height: 493px;
  overflow: hidden;
  background: linear-gradient(#000  0%, #fff 100%);
}
figure#desk a  {
  position: absolute;
  top: 150px;
  border: 20px solid #ffe;
  box-shadow: 0px 0px 6px 6px rgba(0,0,0,0.3);
  width: 20%;
  font-size: 0;
  background: #000;
}
figure#desk a video { width: 100%; font-size: 0; transition: .6s; }
figure a#Sule  {
  transform: translateX(200%) rotateZ(60deg);
  transition: 2s;
}
figure:hover a#Sule  { transform: translateX(30%) rotateZ(700deg);
}
figure a#Mys2010 {
  top: 300px;
  transform: translateX(220%) rotateZ(48deg);
  transition: 2s .4s;
}
figure#desk:hover a#Mys2010 {
  transform: translateX(100%) rotateZ(360deg);
}
figure#desk:hover {
  transform: rotateX(10deg);
}
figure#desk a:hover video { opacity: 0.5; }
figure#desk a:before {
  content: "play";
  font-size: 30px;
  position: absolute;
  top: 45%; left: 45%;
  color: #fff;
  opacity: 0;
  transition: .3s;
}

figure#desk a:hover:before { opacity: 1; }
figure#desk a.playing:hover:before {
  content: none;
  opacity: 0;
}
figure#desk a.playing video { opacity: 1; }</style>
</head><body>
<div id="scatter">
<figure id="desk">
<a href="#" id="Sule">
<video poster="http://Link Gambar.jpg">
<source src="https://Link musik.mp3" type="video/mpeg">
<source src="https://Link musik.mp3" type="video/webm">
</video>
</a>
<a href="#" id="Mys2010">
<video poster="http://Link Gambar.jpg">
<source src="https://Link musik.mp3" type="video/mpeg">
<source src="https://Link musik.mp3" type="video/webm">
</video>
</a>
</figure>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script>
(function () {
    var desk = document.getElementById('desk');
    var links = desk.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        if (window.CP.shouldStopExecution(1)) {
            break;
        }
        links[i].addEventListener('click', handler, false);
    }
    window.CP.exitedLoop(1);
    ;
    function handler(e) {
        e.preventDefault();
        var x = e.target;
        var video = x.querySelector('video');
        x.play();
        x.parentNode.classList.add('playing');
    }
    ;
}());
//# sourceURL=pen.js
</script>

Penjelsan :
Terapkan Link Musik dan Link Gambar pada kode yang diwarnai

Edited by. Myscript2010
Sources by. Dudley Storey  on Codepen

DEMOSHOW

Category: HTML5 Animated 3D Card

Canvas & Js Fireworks HTML5

Memasang kode Canvas & Js Fireworks HTML5
Kode ini menampilkan Fireworks yang mengikuti kursor. Untuk menerapkan kode tersebut Langkah awal 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 ini Get Blank Template edit background warna sesuai keinginan dan 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

<style>     
/* basic styles for black background and crosshair cursor */
body {
    background: #000;
    margin: 0;
}
canvas {
    cursor: crosshair;
    display: block;
}
    </style>
<script>
  window.console = window.console || function(t) {};
</script>
<!-- setup our canvas element -->
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>
<script>
      // when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval
// not supported in all browsers though and sometimes needs a prefix, so we need a shim
window.requestAnimFrame = ( function() {
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
                function( callback ) {
                window.setTimeout( callback, 1000 / 60 );
                };
})();
// now we will setup our basic variables for the demo
var canvas = document.getElementById( 'canvas' ),
        ctx = canvas.getContext( '2d' ),
        // full screen dimensions
        cw = window.innerWidth,
        ch = window.innerHeight,
        // firework collection
        fireworks = [],
        // particle collection
        particles = [],
        // starting hue
        hue = 120,
        // when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
        limiterTotal = 5,
        limiterTick = 0,
        // this will time the auto launches of fireworks, one launch per 80 loop ticks
        timerTotal = 80,
        timerTick = 0,
        mousedown = false,
        // mouse x coordinate,
        mx,
        // mouse y coordinate
        my;      
// set canvas dimensions
canvas.width = cw;
canvas.height = ch;
// now we are going to setup our function placeholders for the entire demo
// get a random number within a range
function random( min, max ) {
    return Math.random() * ( max - min ) + min;
}
// calculate the distance between two points
function calculateDistance( p1x, p1y, p2x, p2y ) {
    var xDistance = p1x - p2x,
            yDistance = p1y - p2y;
    return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}
// create firework
function Firework( sx, sy, tx, ty ) {
    // actual coordinates
    this.x = sx;
    this.y = sy;
    // starting coordinates
    this.sx = sx;
    this.sy = sy;
    // target coordinates
    this.tx = tx;
    this.ty = ty;
    // distance from starting point to target
    this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
    this.distanceTraveled = 0;
    // track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails
    this.coordinates = [];
    this.coordinateCount = 3;
    // populate initial coordinate collection with the current coordinates
    while( this.coordinateCount-- ) {
        this.coordinates.push( [ this.x, this.y ] );
    }
    this.angle = Math.atan2( ty - sy, tx - sx );
    this.speed = 2;
    this.acceleration = 1.05;
    this.brightness = random( 50, 70 );
    // circle target indicator radius
    this.targetRadius = 1;
}
// update firework
Firework.prototype.update = function( index ) {
    // remove last item in coordinates array
    this.coordinates.pop();
    // add current coordinates to the start of the array
    this.coordinates.unshift( [ this.x, this.y ] );  
    // cycle the circle target indicator radius
    if( this.targetRadius < 8 ) {
        this.targetRadius += 0.3;
    } else {
        this.targetRadius = 1;
    }  
    // speed up the firework
    this.speed *= this.acceleration;  
    // get the current velocities based on angle and speed
    var vx = Math.cos( this.angle ) * this.speed,
            vy = Math.sin( this.angle ) * this.speed;
    // how far will the firework have traveled with velocities applied?
    this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );  
    // if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached
    if( this.distanceTraveled >= this.distanceToTarget ) {
        createParticles( this.tx, this.ty );
        // remove the firework, use the index passed into the update function to determine which to remove
        fireworks.splice( index, 1 );
    } else {
        // target not reached, keep traveling
        this.x += vx;
        this.y += vy;
    }
}
// draw firework
Firework.prototype.draw = function() {
    ctx.beginPath();
    // move to the last tracked coordinate in the set, then draw a line to the current x and y
    ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
    ctx.lineTo( this.x, this.y );
    ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
    ctx.stroke();  
    ctx.beginPath();
    // draw the target for this firework with a pulsing circle
    ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
    ctx.stroke();
}
// create particle
function Particle( x, y ) {
    this.x = x;
    this.y = y;
    // track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
    this.coordinates = [];
    this.coordinateCount = 5;
    while( this.coordinateCount-- ) {
        this.coordinates.push( [ this.x, this.y ] );
    }
    // set a random angle in all possible directions, in radians
    this.angle = random( 0, Math.PI * 2 );
    this.speed = random( 1, 10 );
    // friction will slow the particle down
    this.friction = 0.95;
    // gravity will be applied and pull the particle down
    this.gravity = 1;
    // set the hue to a random number +-50 of the overall hue variable
    this.hue = random( hue - 50, hue + 50 );
    this.brightness = random( 50, 80 );
    this.alpha = 1;
    // set how fast the particle fades out
    this.decay = random( 0.015, 0.03 );
}
// update particle
Particle.prototype.update = function( index ) {
    // remove last item in coordinates array
    this.coordinates.pop();
    // add current coordinates to the start of the array
    this.coordinates.unshift( [ this.x, this.y ] );
    // slow down the particle
    this.speed *= this.friction;
    // apply velocity
    this.x += Math.cos( this.angle ) * this.speed;
    this.y += Math.sin( this.angle ) * this.speed + this.gravity;
    // fade out the particle
    this.alpha -= this.decay;  
    // remove the particle once the alpha is low enough, based on the passed in index
    if( this.alpha <= this.decay ) {
        particles.splice( index, 1 );
    }
}
// draw particle
Particle.prototype.draw = function() {
    ctx. beginPath();
    // move to the last tracked coordinates in the set, then draw a line to the current x and y
    ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
    ctx.lineTo( this.x, this.y );
    ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
    ctx.stroke();
}
// create particle group/explosion
function createParticles( x, y ) {
    // increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though
    var particleCount = 30;
    while( particleCount-- ) {
        particles.push( new Particle( x, y ) );
    }
}
// main demo loop
function loop() {
    // this function will run endlessly with requestAnimationFrame
    requestAnimFrame( loop );  
    // increase the hue to get different colored fireworks over time
    //hue += 0.5;
  // create random color
  hue= random(0, 360 );  
    // normally, clearRect() would be used to clear the canvas
    // we want to create a trailing effect though
    // setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely
    ctx.globalCompositeOperation = 'destination-out';
    // decrease the alpha property to create more prominent trails
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    ctx.fillRect( 0, 0, cw, ch );
    // change the composite operation back to our main mode
    // lighter creates bright highlight points as the fireworks and particles overlap each other
    ctx.globalCompositeOperation = 'lighter';  
    // loop over each firework, draw it, update it
    var i = fireworks.length;
    while( i-- ) {
        fireworks[ i ].draw();
        fireworks[ i ].update( i );
    }  
    // loop over each particle, draw it, update it
    var i = particles.length;
    while( i-- ) {
        particles[ i ].draw();
        particles[ i ].update( i );
    }  
    // launch fireworks automatically to random coordinates, when the mouse isn't down
    if( timerTick >= timerTotal ) {
        if( !mousedown ) {
            // start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen
            fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
            timerTick = 0;
        }
    } else {
        timerTick++;
    }  
    // limit the rate at which fireworks get launched when mouse is down
    if( limiterTick >= limiterTotal ) {
        if( mousedown ) {
            // start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
            fireworks.push( new Firework( cw / 2, ch, mx, my ) );
            limiterTick = 0;
        }
    } else {
        limiterTick++;
    }
}
// mouse event bindings
// update the mouse coordinates on mousemove
canvas.addEventListener( 'mousemove', function( e ) {
    mx = e.pageX - canvas.offsetLeft;
    my = e.pageY - canvas.offsetTop;
});
// toggle mousedown state and prevent canvas from being selected
canvas.addEventListener( 'mousedown', function( e ) {
    e.preventDefault();
    mousedown = true;
});
canvas.addEventListener( 'mouseup', function( e ) {
    e.preventDefault();
    mousedown = false;
});
// once the window loads, we are ready for some fireworks!
window.onload = loop;
      //@ sourceURL=pen.js
    </script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>

Penjelsan :
Kode Fireworks dapat memperindah tampilan blogg, Modifikasi sesuai keinginan

Edited by. Myscript2010
Sources by. haiqing wang on Codepen

DEMOSHOW

Category: Canvas & Js Fireworks HTML5