https://forumstatic.ru/files/0011/fb/fd/31859.jpg

Хтмл-низ:

Код:
<!-- Audio Player CSS & Scripts -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="http://designmodo.com/demo/audioplayer/js/mediaelement-and-player.min.js"></script>
	<link rel="stylesheet" href="http://designmodo.com/demo/audioplayer/css/style.css" media="screen">
	<!-- end Audio Player CSS & Scripts -->

Код плеера:

Код:
<!-- Audio Player HTML -->
	<div class="audio-player">
    <h1>Demo - Preview Song</h1>
    <img class="cover" src="http://designmodo.com/demo/audioplayer/img/cover.png" alt="">
    <audio id="audio-player" src="http://designmodo.com/demo/audioplayer/media/demo.mp3" type="audio/mp3" controls="controls"></audio>
	</div>

	<script>
    $(document).ready(function() {
    	$('#audio-player').mediaelementplayer({
        alwaysShowControls: true,
        features: ['playpause','volume','progress'],
        audioVolume: 'horizontal',
        audioWidth: 400,
        audioHeight: 120
    	});
    });
	</script>
	<!-- end Audio Player HTML -->

Содержание файла http://designmodo.com/demo/audioplayer/css/style.css (хтмл-низ) отвечает за стиль и оформление. Для удобного и быстрого редактирования без перезалива можно убрать из кода строку и добавить содержимое во второе окно КСС. За размеры плеера отвечают параметры:
audioWidth: 400,
audioHeight: 120