По умолчанию у нас будет блок, который разделен на две части, слева у нас будут все радиостанции, с возможностью добавления в избранное, а с права будет блок с Вашими любимыми станциями. Внизу мы добавили аудио проигрыватель с элементами управления.

Шаг 1. HTML

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

<div class="panel panel-channel-list favorites">
 <header>
 <div class="title">Избранное</div>
 </header>
 <div class="list">
 <ul>
 <li>
 <div class="title"> <span class="name">247 A State Of Trance Armin Van Buuren</span><span class="country">(UK)</span></div>
 <div class="categories">Dance</div>
 <div class="bitrate">128 kbit</div>
 <div class="star fa fa-star"></div>
 </li>
 <li>
 <div class="title"> <span class="name">Sky Radio</span><span class="country">(ES)</span></div>
 <div class="categories">Top 40</div>
 <div class="bitrate">192 kbit</div>
 <div class="star fa fa-star"></div>
 </li>
 <li>
 <div class="title"> <span class="name">Energy Dance</span><span class="country">(CH)</span></div>
 <div class="categories">Trance, House</div>
 <div class="bitrate">64 kbit </div>
 <div class="star fa fa-star"></div>
 </li>
 </ul>
 </div>
 </div>

Затем мы добавляем разметку, в которой будут содержаться блоки, с информацией и станциями, мы добавляем классы для добавления в закладки, а также удобный плеер внизу списка.
Шаг 2. CSS

Теперь нам необходимо добавить немного стилизации, так как большую часть основной работы у нас будет выполнять css, стили достаточно просты, по этому если вы сталкивались с css, вам будет все доступно:

.panel.panel-channel-list.available {
left: 4%; right: 52%;
}
.panel.panel-channel-list.favorites {
left: 52%; right: 4%;
}
.panel.panel-controls {
position: absolute;
left: 4%; right: 4%;
bottom: 2%;
height: 5rem;
padding: 0.5rem;
.cover-overlay {
display: none;
@include absolute(100%, 100%);
background-image: url('');
background-size: cover;
background-position: center;
opacity: 0.2;
}
.cover {
float: left;
width: 4rem;
height: 4rem;
margin-right: 0.5rem;
background-image: url('');
background-size: cover;
@include border-radius(4px);
}
.playButton {
float: left;
width: 3rem;
height: 3rem;
margin: 0.5rem;
border: 2px solid lighten($c, 10%);
@include border-radius(3rem);
line-height: 3rem;
text-align: center;
vertical-align: center;
i {
margin-left: 2px;
font-size: 1.4rem;
color: lighten($c, 40%);
}
&.playing i:before {
content: "\f04c";
}
}
.tracker {
position: relative;
margin-left: 9rem;
.slider {
margin-top: 0.2rem;
.time, .totalTime {
float: left;
font-size: 0.8rem;
i {
margin-right: 5px;
}
.slide {
float: left;
width: 60%;
height: 0.5rem;
overflow: hidden;
background-color: rgba(White, 0.3);
@include border-radius(0.5rem);
margin: 0.4rem 0.5rem;

.pos {
width: 21%;
height: 0.5rem;
background-color: White;
@include border-radius(0.5rem);
}
}
@include clearfix();
}
.trackName {
font-weight: 600;
i {
width: 1.2rem;
}
}


.artistName {
font-size: 0.9rem;
}
.favorite {
position: absolute;
top: 0rem;
right: 0.5rem;
i {
font-size: 1.2rem;
}
&.starred i:before {
content: "\f005"
}
}
.volume {
position: absolute;
right: 0;
bottom: 0;
.icon {
display: inline-block;
padding-bottom: 0.2rem;
width: 1rem;
}
.slide {
display: inline-block;
width: 4rem;
height: 0.5rem;
background-color: rgba(White, 0.3);
@include border-radius(0.5rem);
margin: 0.0rem 0.5rem;
.pos {
width: 80%;
height: 0.5rem;
background-color: White;
@include border-radius(0.5rem);
} 

Мы приводим к рассмотрению часть кода, более детально можно просмотреть в исходниках, давайте перейдем к следующему шагу.

Шаг 3. JS

Так как мы используем такие дополнения как добавление в избранное и регуляторы и перемотка музыки, то нам необходимо добавить соответствующие функции. Для этого у нас будет соответствующий фрагмент кода.

$(".favorite").on "click", ->
$(this).toggleClass("starred");
$(".playButton").on "click", ->
$(this).toggleClass("playing");
$(".slider .slide").on "click", (e)->
$this = $(this)
pos = (e.offsetX / $this.width()) * 100
console.log pos.toFixed(0) + "%"
$this.find(".pos").width(pos + "%");
$(".volume .slide").on "click", (e)->
$this = $(this)
pos = (e.offsetX / $this.width()) * 100
roundPos = Math.round(pos / 25) * 25
console.log pos.toFixed(0) + "%, " + roundPos + "%"
$this.find(".pos").width(roundPos + "%")
if roundPos > 50
$(".volume .icon i").removeClass().addClass "fa fa-volume-up"
else if roundPos > 0
$(".volume .icon i").removeClass().addClass "fa fa-volume-down"
else
$(".volume .icon i").removeClass().addClass "fa fa-volume-off"

$ ->
$(".list").perfectScrollbar()

Обратите внимание, что это не полностью готовый и рабочий макет, мы показываем как создать дизайн для такого проигрывателя, и стилизовать его элементы, добавлять функции для ваших нужд придется самостоятельно. Спасибо за понимание.

Вот и все. Готово!