Создание аудиоплеера при помощи HTML5. Часть 3: микроданные и внешний вид

Перевод статьи 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. Это тоже может быть интересно:

7 Комментарии

  1. Ali

    А это весь код в HTML записываете или в трех разных файлах?

    1. Art

      А какая разница? Как хотите, так и записывайте

  2. Константин

    Если всё-таки будет продолжение с обещанными картинками и прочей информацией о песне, я думаю, что все будут весьма признательны (понимаю, что обещано было другим автором, но может вы сами напишите продолжение?)

    1. Инал

      Были бы еще демки.

      1. SelenIT

        Добавили пример из оригинала.

  3. Сергей

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

    1. Shtyrnyaev

      Нужна расположить два разных плеера, не только продублировать html код но и js, и все id переименовать чтобы каждый блок js кода управлял своим блоком на html

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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