HTML5 Audio Example CSS

style.css

body {
	font-family:monospace;
	margin:0;
	line-height:1.45;
}

* {
	box-sizing:border-box;
}

#container {
	width: 600px;
	margin:0 auto;
	border:1px solid lightblue;
	padding: 1em;
	margin-top:1em;
	box-shadow: 0 0 10px lightblue;
}

#play-btn {
	width:128px;
	cursor: pointer;
	display:inline-block;
}

#progress-bar {
	position:relative;
	display:inline-block;
	border: 1px solid black;
	height:128px;
	width: 400px;
	box-shadow: inset 0 0 10px gray ;
}

#progress {
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	right:100%;
	background-color: #00FFAE;
	box-shadow: inset 0 0 10px green;
}

input[type="range"] {
	-webkit-appearance: none;
	width:540px;
	background: lightgreen;
	height:20px;
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance:none;
	width: 20px;
	height:22px;
	background: blue;
}