Papermashup

Subscribe


Tweets


"RT @cpray86: Good to see the receptionist's Jpeg of an Excel file is coming along nicely... #TheApprentice https://t.co/uiPGhf64U3"

@ashleyford 1 day ago

"Translation wrong for this paper it should be: Bitte nicht den Horror-Clown (Please not the Horror-clown) https://t.co/RYOD6aND6s via @bandt"

@ashleyford 3 weeks 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.