Как создать аудио-плеер при помощи HTML5 и CSS3

На этом уроке мы создадим аудио-плеер из Impressionist UI от Владимира Кудинова. Мы будем использовать CSS3 для оформления плеера и "MediaElement.js" для создания функциональности. MediaElement.js - это HTML5 аудио и видео плеер, который также работает в старых браузерах, используя Flash и Silverlight, чтобы имитировать HTML5 MediaElement API.

Шаг 1 - Загрузка MediaElement.js

Для начала нам нужно скачать "MediaElement.js" и распаковать архив. Из этого архива нам нужны три файла:

  • flashmediaelement.swf
  • MediaElement-и-player.min.js
  • silverlightmediaelement.xap

Скопируйте все эти три файла в одну директорию, я назвал её "js".

Шаг 2 - HTML-разметка

Теперь нам нужно подключить библиотеку jQuery, мы можем скачать её на свой хост или использовать библиотеку из хранилища Google. Затем нам нужно подключить скрипт "mediaelement-and-player.min.js" и файл CSS. Все эти три файла должны быть внутри тега <head>.

<head>
 <title>Audio Player</title>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script src="js/mediaelement-and-player.min.js"></script>
 <link rel="stylesheet" href="css/style.css" media="screen">
</head>

Чтобы создать плеер, мы добавим <div> с классом "audio-player". Это будет контейнер для нашего плеера. Давайте еще добавим тег <h1> для названия песни и тег <img> для обложки. Затем добавим <audio> тег, который будет иметь ссылку на нашу песню, и мы также установим ID "audio-player" для этого тега.

 <div class="audio-player">
 <h1>Demo - Preview Song</h1>
 <img class="cover" src="img/cover.png" alt="">
 <audio id="audio-player" src="demo.mp3" type="audio/mp3" controls="controls"></audio>
</div>

Затем нам нужно добавить этот код перед закрывающимся тегом </ body>. Здесь нам необходимо указать тот ID, который мы использовали для <audio> тега. Вы можете также настроить некоторые параметры, для получения дополнительной информации обратитесь к документации "MediaElement.js".

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

Шаг 2. Как создать аудио-плеер при помощи HTML5 и CSS3

Шаг 3 - Стили для контейнера

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

 .audio-player,
.audio-player div,
.audio-player h1,
.audio-player a,
.audio-player img,
.audio-player span,
.audio-player button {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}

Теперь зададим стили для контейнера, мы установим ширину 400px и высоту 120px. Мы также добавим CSS3 градиент для фона и закругленные углы.

 div.audio-player {
 position: relative;
 width: 400px;
 height: 120px;

 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);

 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}

Шаг 3. Как создать аудио-плеер при помощи HTML5 и CSS3

Шаг 4 - Название и обложка

Зададим местоположение для названия и обложки в контейнере, а затем добавим некоторые типографические стили для заголовка.

 .audio-player h1 {
 position: absolute;
 top: 37px;
 left: 165px;

 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 14px;
 color: #ececec;
 text-shadow: 1px 1px 1px rgba(0,0,0, .5);
}

.audio-player .cover {
 position: absolute;
 top: 0;
 left: 0;
}

Шаг 4. Как создать аудио-плеер при помощи HTML5 и CSS3

Шаг 5 - Кнопки управления

Теперь мы зададим стили для элементов управления плеером (воспроизведение/пауза, отключение звука/включение звука). Сначала мы зададим некоторые общие стили для кнопок, а затем мы установим фиксированную ширину и высоту. Мы разместим кнопки "воспроизведение/пауза", а также кнопки "отключение звука/включение звука", в одном месте, и они будут переключаться по нажатию.

 .mejs-controls .mejs-button button {
 cursor: pointer;
 display: block;
 position: absolute;
 text-indent: -9999px;
}

.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
 width: 21px;
 height: 21px;
 top: 35px;
 left: 135px;
 background: transparent url(../img/play-pause.png) 0 0;
}

.mejs-controls .mejs-pause button { background-position:0 -21px; }

.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
 width: 14px;
 height: 12px;
 top: 70px;
 left: 140px;
 background: transparent url(../img/mute-unmute.png) 0 0;
}

.mejs-controls .mejs-unmute button { background-position: 0 -12px; }

Шаг 5. Как создать аудио-плеер при помощи HTML5 и CSS3

Шаг 6 - Регулятор громкости звука

Для регулятора громкости мы зададим абсолютное позиционирование, и установим ширину равную 200px и высоту - 8px. Нам также необходимо установить цвет фона, тени и закругленные углы.

 .mejs-controls div.mejs-horizontal-volume-slider {
 position: absolute;
 top: 71px;
 left: 165px;
 cursor: pointer;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
 width: 200px;
 height: 8px;
 background: #212227;

 -webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
 -moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
 box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);

 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
}

Затем зададим стили для "текущего уровня громкости", для этого мы добавим фоновое изображение, закругленные углы и т.д.

 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
 position: absolute;
 width: 0;
 height: 6px;
 top: 1px;
 left: 1px;
 background: url(../img/volume-bar.png) repeat-x;

 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
}

Шаг 6. Как создать аудио-плеер при помощи HTML5 и CSS3

Шаг 7 - Индикатор загрузки

Для индикатора загрузки мы зададим такую же ширину, как и контейнер плеера (400 пикселей) и разместим его внизу. Затем мы установим различные цвета фона для каждого состояния времени (общее, загруженно и текущее). Как вы можете заметить, мы должны установить ширину равную 0 для времени загрузки и текущего времени, и когда песня играет или загружается ширина увеличится.

 .mejs-controls div.mejs-time-rail { width: 400px; }

.mejs-controls .mejs-time-rail span {
 position: absolute;
 display: block;
 width: 400px;
 height: 5px;
 left: 0;
 bottom: 0;
 cursor: pointer;

 -webkit-border-radius: 0px 0px 2px 2px;</p>
<p>-moz-border-radius: 0px 0px 2px 2px;
 border-radius: 0px 0px 2px 2px;
}

.mejs-controls .mejs-time-rail .mejs-time-total { background: #999999; }

.mejs-controls .mejs-time-rail .mejs-time-loaded {
 width: 0;
 background: #cccccc;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
 width: 0;
 background: #64b44c;
}

Шаг 7. Как создать аудио-плеер при помощи HTML5 и CSS3

Шаг 8 - Ручки индикатора загрузки и громкости

Теперь мы добавим ручки для индикатора загрузки и регулятора громкости. В общем, мы только добавим фоновое изображение,  установим ширину/высоту и его положение.

 .mejs-controls .mejs-time-rail .mejs-time-handle,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
 position: absolute;
 display: block;
 width: 12px;
 height: 14px;
 top: -4px;
 background: url(../img/handle.png) no-repeat;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { top: -2px; }

Шаг 8. Как создать аудио-плеер при помощи HTML5 и CSS3

Шаг 9 - Подсказка для времени

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

 .mejs-controls .mejs-time-rail .mejs-time-float {
 position: absolute;
 display: none;
 width: 33px;
 height: 23px;
 top: -26px;
 margin-left: -17px;
 background: url(../img/time-box.png);
}

.mejs-controls .mejs-time-rail .mejs-time-float-current {
 width: 33px;
 display: block;
 left: 0;
 top: 4px;

 font-family: Helvetica, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
 color: #666666;
 text-align: center;
}

Шаг 9. Как создать аудио-плеер при помощи HTML5 и CSS3

Заключение

Вот мы и создали свой аудио-плеер. Если у Вас возникли вопросы, дайте мне знать в комментариях.

Перевод статьи с designmodo.com


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Комментарии  

#1 Петр Космынин 31.05.2013 18:01
А при изменении разрешения или при просмотре на айпаде плеер будет распадаться? Так ккак позиционирование кнопок явно указано... Можно как то сделать чтобы изменялся размер при изменении разрешения или при увелечении страницы?

You have no rights to post comments