Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 3 days ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 6 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

Awesome Material inspired audio player

Based on Google's Material Design principles - a beautiful audio player built with CSS and JS

AshleyAshley

I came across this nicely designed audio player on CodePen, put together by Michael Zhigulin It uses the waves.js click effect library inspired by Google’s Material Design. For this tutorial demo I’m using a royalty free track from bensound.com.

audio player

What is Google Material?

Google’s Material Design language has begun making its first appearances in the wild. Designers and technologists everywhere are aflutter with praise for the new design language, which aspires to unite Google’s expansive product line under a rich set of design styles and principles. Material is a culmination of design principles put together over many years of evolution. You can check out the full documentation here. Material Design doesn’t just create order, it creates order with purpose and meaning. It’s a sensory expression of Google’s brand, and if it gains traction could be a game changer in the way we design and develop interfaces across the web.

The HTML



<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>Memories (royalty free)</li>
<li>Bensound.com</li>
<li>3.50</li>
</ul>
<ul class="player-info info-two">
<li>Memories (royalty free)</li>
<li>Bensound.com</li>
<li><span id="duration"></span><i> / </i>3.50</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>
<audio id="audio-player" ontimeupdate="SeekBar()" ondurationchange="CreateSeekBar()" preload="auto" loop>
<source src="audio/bensound-memories.ogg" type="audio/ogg">
<source src="audio/bensound-memories.mp3" type="audio/mpeg">
</audio>

The JS



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"]);

 

Demo Download

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 0
There are currently no comments.