Audio Player In Pure JS & CSS

Memasang kode Audio Player In Pure JS & CSS
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="audio-styles">
@font-face {
    font-family:"SSStandard";
  src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ss-standard.woff') format('woff');
  font-weight:normal;
  font-style:normal;
}
.ss-icon,.ss-icon.ss-standard {
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    -webkit-font-feature-settings: "liga","dlig";
            font-feature-settings: "liga","dlig";
}
.ss-icon,.ss-icon.ss-standard {
    font-family: "SSStandard";
}
* { box-sizing: border-box; }
figure#audioplayer { 
  border: 1px solid #000;
  background: #333;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/dark_wall.png);
  overflow: hidden;
  width: 32rem;
  padding: .4rem;
  margin: 0 auto;
}
figure#audioplayer audio { width: 0; height: 0; }
figure#audioplayer figcaption { 
  width: 21.5rem; font-size: 0;
  margin: .45rem; background: #000;
  float: left; 
  border: 1px solid #555;
}
figure#audioplayer figcaption div { 
  background: #000;
  color: #fff;
  padding: .8rem;
  font-family: Avenir, Helvetica, sans-serif;
  text-transform: uppercase; font-size: .8rem;
  display: inline-block;
}
figure#audioplayer figcaption div span { 
  display: block;
  font-size: 1.3rem;
  text-indent: 1rem; 
}
div#album { 
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  width: 100%; 
}
div#time { 
  width: 7.55rem;
  border-left: 1px solid #555; 
}
input#volumeSlider { -webkit-appearance: slider-vertical;  }
figure#audioplayer button { 
  width: 3rem; height: 3rem; 
  background: #000; color: #fff; 
  border: none; 
}
#playback { clear: both; }
div#fader { display: inline-block; }
#playback progress { 
  margin-left: 1rem; 
  width: 20rem; height: 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #888;
  border: none;
  color: hsl(44,100%,44%);
}
progress::-webkit-progress-bar, progress::-moz-progress-bar, progress::progress-bar {
  background: hsl(44,100%,44%);
}
progress::-webkit-progress-value { background: hsl(44,100%,44%); }
progress::-moz-progress-bar {
background-color: hsl(44,100%,44%);
}
@media screen and (max-width: 500px) {
  div#time { display: block !important; border-top: 1px solid #555; width: 100%; }
  figure#audioplayer { width: 100%; padding: .2rem; }
  figure#audioplayer figcaption div { padding: .4rem; }
}
@media screen and (max-width: 450px) {
figure#audioplayer figcaption { width: 16rem; }
#playback progress { width: 220px; } 
}
@media screen and (max-width: 400px) {
figure#audioplayer figcaption { width: 14rem; }
}</style>

<figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
<figcaption>
<div>
Track<span itemprop="name">24 Ghosts III</span></div>
<div id="album">
Album<span itemprop="inAlbum">Ghosts III</span></div>
<div id="artist">
Artist<span itemprop="byArtist">Nine Inch Nails</span></div>
<div id="time">
Time<span id="playbacktime">00:00</span></div>
</figcaption>
<meta itemprop="duration" content="PT2M29S">
<div id="fader">
</div>
<div id="playback">
</div>
<audio controls src="//demosthenes.info/assets/audio/24-ghosts-III.mp3" id="audiotrack" preload="auto" itemprop="audio"></audio>
</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 player() {
    if (audioTrack.paused) {
        setText(this, 'Pause');
        audioTrack.play();
    } else {
        setText(this, 'Play');
        audioTrack.pause();
    }
}
function setText(el, text) {
    el.innerHTML = text;
}
function finish() {
    audioTrack.currentTime = 0;
    setText(playButton, 'Play');
}
function updatePlayhead() {
    playhead.value = audioTrack.currentTime;
    var s = parseInt(audioTrack.currentTime % 60);
    var m = parseInt(audioTrack.currentTime / 60 % 60);
    s = s >= 10 ? s : '0' + s;
    m = m >= 10 ? m : '0' + m;
    playbacktime.innerHTML = m + ':' + s;
}
function volumizer() {
    if (audioTrack.volume == 0) {
        setText(muteButton, 'volume');
    } else {
        setText(muteButton, 'volumehigh');
    }
}
function muter() {
    if (audioTrack.volume == 0) {
        audioTrack.volume = restoreValue;
        volumeSlider.value = restoreValue;
    } else {
        audioTrack.volume = 0;
        restoreValue = volumeSlider.value;
        volumeSlider.value = 0;
    }
}
function setAttributes(el, attrs) {
    for (var key in attrs) {
        if (window.CP.shouldStopExecution(1)) {
            break;
        }
        el.setAttribute(key, attrs[key]);
    }
    window.CP.exitedLoop(1);
}
var audioPlayer = document.getElementById('audioplayer'), fader = document.getElementById('fader'), playback = document.getElementById('playback'), audioTrack = document.getElementById('audiotrack'), playbackTime = document.getElementById('playbacktime'), playButton = document.createElement('button'), muteButton = document.createElement('button'), playhead = document.createElement('progress');
volumeSlider = document.createElement('input');
setText(playButton, 'Play');
setText(muteButton, 'volumehigh');
setAttributes(playButton, {
    'type': 'button',
    'class': 'ss-icon'
});
setAttributes(muteButton, {
    'type': 'button',
    'class': 'ss-icon'
});
muteButton.style.display = 'block';
muteButton.style.margin = '0 auto';
setAttributes(volumeSlider, {
    'type': 'range',
    'min': '0',
    'max': '1',
    'step': 'any',
    'value': '1',
    'orient': 'vertical',
    'id': 'volumeSlider'
});
var duration = audioTrack.duration;
setAttributes(playhead, {
    'min': '0',
    'max': '100',
    'value': '0',
    'id': 'playhead'
});
fader.appendChild(volumeSlider);
fader.appendChild(muteButton);
playback.appendChild(playButton);
playback.appendChild(playhead);
audioTrack.removeAttribute('controls');
playButton.addEventListener('click', player, false);
muteButton.addEventListener('click', muter, false);
volumeSlider.addEventListener('input', function () {
    audioTrack.volume = volumeSlider.value;
}, false);
audioTrack.addEventListener('volumechange', volumizer, false);
audioTrack.addEventListener('playing', function () {
    playhead.max = audioTrack.duration;
}, false);
audioTrack.addEventListener('timeupdate', updatePlayhead, false);
audioTrack.addEventListener('ended', finish, false);
//# sourceURL=pen.js
</script>

Penjelasan :
Ganti Judul lagu, nama artis dan backgroud audio player sesuai keinginan
kemmudian tambahkan background gambar jika diperlukan copy kode berikut ini :

*{    margin:0px;
 padding:0px;}
body
{
 background:url(http://Link Gambar.jpg);
 background-size:cover;
 background-repeat:no-repeat;
 font-family: "Open Sans", sans-serif;
 font-size: 11px;} 

Pastekan dibawah kode

<style class="audio-styles">

Kemudian klik simpan selesai

Edited by. Myscript2010
Sources by. Dudley Storey on Codepen

DEMOSHOW

Category: Audio Player In Pure JS & CSS

Tweet