Minimal Audio Player

index.html

<div class="player">
    <div class="player__bar">
        <div class="player__album">
            <div class="player__albumImg active-song" 
                data-author="Khalid"
                data-song="Location"
                data data-src="http://ol5.mp3party.net/online/8418/8418598.mp3" style="background-image: url(https://alikinvv.github.io/minimal-player/build/img/album.jpg">
            </div>
            <div class="player__albumImg" 
                data-author="Khalid"
                data-song="Angels"
                data data-src="http://music.dawnfoxes.com/_fxs_/_upls_/_sngs_/USA/khalid-angels.mp3" style="background-image: url(https://alikinvv.github.io/minimal-player/build/img/album.jpg">
            </div>           
        </div>
        <div class="player__controls">

            <div class="player__prev">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M26.695 34.434v31.132L54.5 49.998z"/><path d="M24.07 34.434v31.132c0 2.018 2.222 3.234 3.95 2.267l27.804-15.568c1.706-.955 1.707-3.578 0-4.533L28.02 32.168c-2.957-1.655-5.604 2.88-2.649 4.533l27.805 15.564v-4.533L25.371 63.3l3.95 2.267V34.435c-.001-3.387-5.251-3.387-5.251-.001z"/><g><path d="M55.5 34.434v31.132l27.805-15.568z"/><path d="M52.875 34.434v31.132c0 2.018 2.222 3.234 3.949 2.267 9.27-5.189 18.537-10.379 27.805-15.568 1.705-.955 1.705-3.578 0-4.533L56.824 32.168c-2.957-1.655-5.604 2.88-2.648 4.533l27.803 15.564v-4.533L54.176 63.3l3.949 2.267V34.435c0-3.387-5.25-3.387-5.25-.001z"/></g></svg>
            </div>

            <div class="player__play">
					<svg class="icon play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M51.109 30.335l-36-24A2 2 0 0 0 12 8v48a2.003 2.003 0 0 0 2 2c.388 0 .775-.113 1.109-.336l36-24a2 2 0 0 0 0-3.329z"/></svg>
					<svg class="icon pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M22.537 8.046h17.791c1.104 0 2.003.898 2.003 1.993v79.912a2.005 2.005 0 0 1-2.003 2.003h-17.79a2.005 2.005 0 0 1-2.003-2.003V10.04c0-1.095.898-1.993 2.002-1.993zM59.672 8.046h17.8c1.095 0 1.993.898 1.993 1.993v79.912a2.003 2.003 0 0 1-1.993 2.003h-17.8a1.997 1.997 0 0 1-1.993-2.003V10.04c0-1.095.889-1.993 1.993-1.993z"/></svg>
            </div>

            <div class="player__next">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M26.695 34.434v31.132L54.5 49.998z"/><path d="M24.07 34.434v31.132c0 2.018 2.222 3.234 3.95 2.267l27.804-15.568c1.706-.955 1.707-3.578 0-4.533L28.02 32.168c-2.957-1.655-5.604 2.88-2.649 4.533l27.805 15.564v-4.533L25.371 63.3l3.95 2.267V34.435c-.001-3.387-5.251-3.387-5.251-.001z"/><g><path d="M55.5 34.434v31.132l27.805-15.568z"/><path d="M52.875 34.434v31.132c0 2.018 2.222 3.234 3.949 2.267 9.27-5.189 18.537-10.379 27.805-15.568 1.705-.955 1.705-3.578 0-4.533L56.824 32.168c-2.957-1.655-5.604 2.88-2.648 4.533l27.803 15.564v-4.533L54.176 63.3l3.949 2.267V34.435c0-3.387-5.25-3.387-5.25-.001z"/></g></svg>
            </div>
        </div>
    </div>
    <div class="player__timeline">
        <p class="player__author"></p>
        <p class="player__song"></p>
        <div class="player__timelineBar"><div id="playhead"></div></div>
    </div>
</div>

<!-- github  -->
<a href="https://github.com/alikinvv/minimal-player" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#ffeff5; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

minimal-audio-player.markdown

Minimal Audio Player

Dribbble shot: https://dribbble.com/shots/4240318-Made-with-InVision-Studio-Music-Player

This is a minimal, clean audio/music/mp3 player with spinning cover images, built with jQuery, TweenMax.js and SVG images.

A Pen by Valery Alikin on CodePen.

License.

script.js

$(document).ready(function () {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', $('.active-song').attr('data-src'));

    var tl = new TimelineMax();
    tl.to('.player__albumImg', 3, {
        rotation: '360deg',
        repeat: -1,
        ease: Power0.easeNone
    }, '-=0.2');
    tl.pause();

    $('.player__play').click(function () {

        if ($('.player').hasClass('play')) {
            $('.player').removeClass('play');
            audioElement.pause();
            TweenMax.to('.player__albumImg', 0.2, {
                scale: 1,
                ease: Power0.easeNone
            })
            tl.pause();
        } else {
            $('.player').addClass('play');
            audioElement.play();
            TweenMax.to('.player__albumImg', 0.2, {
                scale: 1.1,
                ease: Power0.easeNone
            })
            tl.resume();
        }

    });


    var playhead = document.getElementById("playhead");
    audioElement.addEventListener("timeupdate", function () {
        var duration = this.duration;
        var currentTime = this.currentTime;
        var percentage = (currentTime / duration) * 100;
        playhead.style.width = percentage + '%';
    });

    function updateInfo() {
        $('.player__author').text($('.active-song').attr('data-author'));
        $('.player__song').text($('.active-song').attr('data-song'));
    }
    updateInfo();

    $('.player__next').click(function () {
        if ($('.player .player__albumImg.active-song').is(':last-child')) {
            $('.player__albumImg.active-song').removeClass('active-song');
            $('.player .player__albumImg:first-child').addClass('active-song');
            audioElement.addEventListener("timeupdate", function () {
                var duration = this.duration;
                var currentTime = this.currentTime;
                var percentage = (currentTime / duration) * 100;
                playhead.style.width = percentage + '%';
            });
        } else {
            $('.player__albumImg.active-song').removeClass('active-song').next().addClass('active-song');
            audioElement.addEventListener("timeupdate", function () {
                var duration = this.duration;
                var currentTime = this.currentTime;
                var percentage = (currentTime / duration) * 100;
                playhead.style.width = percentage + '%';
            });
        }
        updateInfo();
        audioElement.setAttribute('src', $('.active-song').attr('data-src'));
        audioElement.play();
    });

    $('.player__prev').click(function () {
        if ($('.player .player__albumImg.active-song').is(':first-child')) {
            $('.player__albumImg.active-song').removeClass('active-song');
            $('.player .player__albumImg:last-child').addClass('active-song');
            audioElement.addEventListener("timeupdate", function () {
                var duration = this.duration;
                var currentTime = this.currentTime;
                var percentage = (currentTime / duration) * 100;
                playhead.style.width = percentage + '%';
            });
        } else {
            $('.player__albumImg.active-song').removeClass('active-song').prev().addClass('active-song');
            audioElement.addEventListener("timeupdate", function () {
                var duration = this.duration;
                var currentTime = this.currentTime;
                var percentage = (currentTime / duration) * 100;
                playhead.style.width = percentage + '%';
            });
        }
        updateInfo();
        audioElement.setAttribute('src', $('.active-song').attr('data-src'));
        audioElement.play();
    });

});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

style.scss

.icon {
	display: inline-block;
	width: 2em;
	height: 2em;
	font-size: 30px;
	fill: #D7DCE2;
	transition: all .2s ease-in-out;
}

html, body {
	height: 100%;
}

body {
	background: #ffeff5;
	position: relative;
}

.player {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	&.play {
		.player__timeline {
			transform: translateY(-90%);
		}
		.player__album:after {
			box-shadow: 0px 30px 28px -10px rgba(0,0,0,.2);
		}
		.player__album {
			top: -65px;
		}
		.pause {
			display: inline-block;
		}
		.play {
			display: none;
		}
	}
	&__album {
		width: 112px;
		height: 112px;		
		border-radius: 50%;
		margin-right: 22px;
		position: relative;
		top: -50px;
		transition: all .4s ease-in-out;
		&:before {
			content: '';
			width: 25px;
			height: 25px;
			position: absolute;
			z-index: 3;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: #fff;
			border-radius: 50%;
		}
		&:after {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			border-radius: 50%;
			box-shadow: none;
			transition: all .3s ease-in-out;
		}
	}
	&__albumImg {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		position: relative;
		z-index: 2;
		display: none;
		&.active-song {
			display: block;
		}
	}
	&__bar {
		background: #fff;
		padding: 10px 25px;
		height: 100px;
		display: flex;
		justify-content: space-between;
		border-radius: 15px;
		box-shadow: 0 30px 56px 6px rgba(0,0,0,0.1);
		position: relative;
		z-index: 3;
	}
	&__controls {
		display: flex;
		align-items: center;
	}
	&__prev {
		transform: rotate(180deg);
		height: 80px;
		width: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		border-radius: 15px;
		transition: all .2s ease-in-out;
		margin-right: 3px;
		&:hover {
			background: #D7DCE2;
			svg {
				fill: #fff;
			}
		}
	}
	&__play {
		cursor: pointer;
		height: 80px;
		width: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 15px;
		transition: all .2s ease-in-out;
		margin-right: 3px;		
		position: relative;
		&:hover {
			background: #D7DCE2;
			svg {
				fill: #fff;
			}
		}
		svg {
			font-size: 20px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			&.pause {
				display: none;
			}
		}
	}
	&__next {
		cursor: pointer;
		height: 80px;
		width: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 15px;
		transition: all .2s ease-in-out;
		margin-left: -8px;
		&:hover {
			background: #D7DCE2;
			svg {
				fill: #fff;
			}
		}
	}
	&__timeline {
		background: #fff6fb;;
		height: 95px;
		border-radius: 15px;
		position: absolute;
		bottom: 0;
		left: 10px;
		right: 10px;
		transform: translateY(0);
		transition: all .3s ease-in-out;
		z-index: 1;
		padding-left: 160px;
		flex-direction: column;
		justify-content: center;
	}
	&__timelineBar {
		background: #E7E7E7;
		width: 95%;
		height: 4px;
		border-radius: 15px;
		margin-top: 13px;
		position: relative;
	}
	#playhead {
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 15px;
		width: 0;
		height: 100%;
		background: #fd6d94;
	}
	&__author {
		line-height: 1;
		font-weight: bold;
		margin-bottom: 6px;
		margin-top: 15px;
	}
	&__song {
		line-height: 1;
		margin: 0;
		font-size: 12px;
		color: #949494;
	}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />