Как изменить дизайн и цвет html тега audio

По умолчанию тег аудио выглядит пример так (браузер mozilla firefox):



Код тега по спецификации выглядит так:

<audio controls="">
<source src="sound.mp3" type="audio/mpeg" />
Тут информация или код для браузеров не поддерживающих html5
</audio>

Чтобы изменить цвета и дизайн проигрывателя, нужно нарисовать кнопки и создать плеер с нуля, используя javascript и css.

css код:

#audioplayer{
	width: 280px;
	height: 10px;
	margin: 0px auto}
#pButton{
    height:10px; 
    width: 2px;
    border: none;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
    float:left;
    outline:none;}
.play{width:5px;
	height:8px;
	margin-top:0px;
	background:rgb(216,216,216)}
.pause{width:5px;
	height:8px;
	margin-top:0px;
	background:rgb(254,207,210)}
#timeline{
	width: 250px;
	height: 10px;
	margin-left: 5px;
	float: left;
	border-radius: 15px;
	background:rgb(216,216,216)}
#playhead{
	width:  8px;
	height:  8px;
	border-radius: 50%;
	margin-top: 1px;
	background: white;}
</style>

javascript код:

<script type="text/javascript">

var music = document.getElementById('music'); // id for audio element
var duration; // Duration of audio clip
var pButton = document.getElementById('pButton'); // play button

var playhead = document.getElementById('playhead'); // playhead

var timeline = document.getElementById('timeline'); // timeline
// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;

// timeupdate event listener
music.addEventListener("timeupdate", timeUpdate, false);

//Makes timeline clickable
timeline.addEventListener("click", function (event) {
	moveplayhead(event);
	music.currentTime = duration * clickPercent(event);
}, false);

// returns click as decimal (.77) of the total timelineWidth
function clickPercent(e) {
	return (e.pageX - timeline.offsetLeft) / timelineWidth;
}

// Makes playhead draggable 
playhead.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);

// Boolean value so that mouse is moved on mouseUp only when the playhead is released 
var onplayhead = false;
// mouseDown EventListener
function mouseDown() {
	onplayhead = true;
	window.addEventListener('mousemove', moveplayhead, true);
	music.removeEventListener('timeupdate', timeUpdate, false);
}
// mouseUp EventListener
// getting input from all mouse clicks
function mouseUp(e) {
	if (onplayhead == true) {
		moveplayhead(e);
		window.removeEventListener('mousemove', moveplayhead, true);
		// change current time
		music.currentTime = duration * clickPercent(e);
		music.addEventListener('timeupdate', timeUpdate, false);
	}
	onplayhead = false;
}
// mousemove EventListener
// Moves playhead as user drags
function moveplayhead(e) {
	var newMargLeft = e.pageX - timeline.offsetLeft;
	if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
		playhead.style.marginLeft = newMargLeft + "px";
	}
	if (newMargLeft < 0) {
		playhead.style.marginLeft = "0px";
	}
	if (newMargLeft > timelineWidth) {
		playhead.style.marginLeft = timelineWidth + "px";
	}
}

// timeUpdate 
// Synchronizes playhead position with current point in audio 
function timeUpdate() {
	var playPercent = timelineWidth * (music.currentTime / duration);
	playhead.style.marginLeft = playPercent + "px";
	if (music.currentTime == duration) {
		pButton.className = "";
		pButton.className = "play";
	}
}
//Play and Pause
function play() {
	// start music
	if (music.paused) {
		music.play();
		// remove play, add pause
		pButton.className = "";
		pButton.className = "pause";
	} else { // pause music
		music.pause();
		// remove pause, add play
		pButton.className = "";
		pButton.className = "play";
	}
}
// Gets audio file duration
music.addEventListener("canplaythrough", function () {
	duration = music.duration;  
}, false);
</script>

И сам html код:

<audio id="music" preload="true">
  <source src="http://sound.mp3" />
  <source src="sound.ogg" />
Тут информация или код для браузеров не поддерживающих html5
</audio>
<div id="audioplayer">
	<button id="pButton" class="play"></button>
  <div id="timeline">    
  <div id="playhead"></div>
  </div>
</div>

Ваш плеер будет выглядеть вот так:



Изменяя CSS код вы можете нарисовать свой собственный плеер под дизайн вашего сайта.