Перевод статьи Making An Audio Player With HTML5, Part 3: Microdata and Skinning с сайта demosthenes.info, c разрешения автора — Дадли Стори.

В первых двух статьях этого цикла я представил концепцию и код для собственного аудиоплеера. Прототип, который сконструирован к этому моменту – «сырой», без какого-либо оформления: HTML5 и JavaScript был написан на скорую руку, чтобы убедиться, что базовая концепция работает. В этой статье я сосредоточусь на улучшении внешнего вида плеера и добавлении микроданных, прежде чем вводить дополнительные функции в четвёртой статье.

Элементы аудио

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

<figure id="audioplayer">
<figcaption>
<div>Track<span>24 Ghosts III</span></div>
<div id="album">Album<span>Ghosts III</span></div>
<div id="artist">Artist<span>Nine Inch Nails</span></div>
<div id="time">Time<span>00:00</span></div>
</figcaption>
<div id="fader">
<input type="range" min="0" max="1" step="any" value="1"id="volumeSlider">
<button type="button">volumehigh</button>
</div>
<div id="playback">
<button type="button">Play</button>
<progress min="0" max="100" value="0" id="playhead">
</progress>
</div>
<audio src="/assets/audio/24-ghosts-III.mp3"id="audiotrack" preload="auto">
</audio>
</figure>

В этот код мы добавим микроданные, чтобы получить пользу от поисковых систем и подключить добавочный Javascript позже в этом цикле статей. Код стал таким в конце:

<figure id="audioplayer" itemprop="track"itemtype="http://schema.org/MusicRecording">
<figcaption>
<div>Track
<span itemprop="name">24 Ghosts III</span>
</div>
<div id="album">Album
<span itemprop="inAlbum">Ghosts III</span>
</div>
<div id="artist">Artist
<span itemprop="byArtist">Nine Inch Nails</span>
</div>
<div id="time">Time
<span>00:00</span>
</div>
</figcaption>
<meta itemprop="duration" content="PT2M29S">
<div id="fader">
<input type="range" min="0" max="1" step="any" value="1"orient="vertical" id="volumeSlider">
<button type="button">volumehigh</button>
</div>
<div id="playback">
<button type="button">Play</button>
<progress min="0" max="100" value="0" id="playhead">
</progress>
</div>
<audio src="/assets/audio/24-ghosts-III.mp3"id="audiotrack" itemprop="audio" preload="auto">
</audio>
</figure>

Оформление аудио

CSS, который применён к плееру, использует несколько техник от среднего до продвинутого уровня. Начальный CSS сбрасывает модель box-sizing, устанавливает общее оформление для аудиоплеера и полностью скрывает элемент <audio>:

* {
box-sizing: border-box;}
figure#audioplayer {
border: 1px solid #000;
background: url(dark_wall.png) #333;
overflow: hidden;
width: 27rem;
padding: .4rem;
margin: 2rem auto;
}
figure#audioplayer audio {
width: 0; height: 0;
}

Далее оформим элементы с различной информацией внутри плеера, установив им границы со всех сторон, чтобы между ними был разделитель. При помощи CSS (к сожалению, нестандартного — прим. перев.) элемент input с типом range сделан вертикальным для Webkit и Chrome:

figure#audioplayer figcaption {
width: 21.5rem;
font-size: 0;
margin: .45rem;
background: #000;
float: left;
border: 1px solid #555;
text-align: left;}
figure#audioplayer figcaption div {
background: #000;
color: #fff;
padding: .8rem;
font-family: Avenir, Helvetica, sans-serif;
text-transform: uppercase;
font-size: .8rem;
display: inline-block;}
figure#audioplayer figcaption div span {
display: block;
font-size: 1.3rem;
text-indent: 1rem;}
div#album {
border-top: 1px solid #555;
border-bottom: 1px solid #555;
width: 100%;}
div#time {
width: 7.55rem;
border-left: 1px solid #555;}
input#volumeSlider{
-webkit-appearance: slider-vertical;
width: 35px; }

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

figure#audioplayer button {
width: 3rem;
height: 3rem;
background: #000;
color: #fff;
border: none;
-webkit-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";}
#playback {
clear: both;}
div#fader {
display: inline-block;}

Также я сделал оформление для элемента <progress>. Здесь используется HSL, чтобы в будущем (если потребуется) нам было легче менять цвет.

#playback progress {
margin-left: 1rem;
width: 20rem;
height: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #888;
border: none;
color: hsl(44,100%,44%);
}
progress::-webkit-progress-bar,
progress::-moz-progress-bar,
progress::progress-bar {
background: hsl(44,100%,44%);
}
progress::-webkit-progress-value {
background: hsl(44,100%,44%);
}
progress::-moz-progress-bar {
background-color: hsl(44,100%,44%);
}

Наконец, плеер поддерживает адаптивность, перемещая элементы в нужное место и уменьшая отступы при сужении области просмотра:

@media screen and (max-width:500px){
div#time {
display: block !important;
border-top: 1px solid #555;
width: 100%;}
figure#audioplayer {
width: 100%;
padding: .2rem;}
figure#audioplayer figcaption div {
padding: .4rem;}
}
@media screen and (max-width:450px){
figure#audioplayer figcaption {
width: 16rem;
}
#playback progress {
width: 220px;
}
}
@media screen and (max-width:400px) {
figure#audioplayer figcaption {
width: 14rem;
}
}

See the Pen Simple HTML5 Audio Player In Pure JS & CSS by Dudley Storey (@dudleystorey) on CodePen.

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

P.S. Это тоже может быть интересно:

• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами
• Псевдокласс :has() — не только «родительский селектор»
• CSS-выражения от контейнера для дизайнеров