На этом уроке мы создадим аудио-плеер из Impressionist UI от Владимира Кудинова. Мы будем использовать CSS3 для оформления плеера и "MediaElement.js" для создания функциональности.
На этом уроке мы создадим аудио-плеер из Impressionist UI от Владимира Кудинова. Мы будем использовать CSS3 для оформления плеера и "MediaElement.js" для создания функциональности.
MediaElement.js - это HTML5 аудио и видео плеер, который также работает в старых браузерах, используя Flash и Silverlight, чтобы имитировать HTML5 MediaElement API.
Для начала нам нужно скачать "MediaElement.js" и распаковать архив. Из этого архива нам нужны три файла:
Скопируйте все эти три файла в одну директорию, я назвал её "js".
Теперь нам нужно подключить библиотеку 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>
Прежде всего, давайте сбросим некоторые стили для всех элементов, которые используются в контейнере.
.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; }
Зададим местоположение для названия и обложки в контейнере, а затем добавим некоторые типографические стили для заголовка.
.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; }
Шаг 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; }
Для регулятора громкости мы зададим абсолютное позиционирование, и установим ширину равную 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; }
Для индикатора загрузки мы зададим такую же ширину, как и контейнер плеера (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; }
Теперь мы добавим ручки для индикатора загрузки и регулятора громкости. В общем, мы только добавим фоновое изображение, установим ширину/высоту и его положение.
.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; }
На последнем этапе мы добавим подсказку для времени, которая будет появляться, когда мы наводим курсор мыши на индикатор загрузки. Стили простые и, думаю, не нуждаются в подробном описании.
.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; }
Вот мы и создали свой аудио-плеер. Если у Вас возникли вопросы, дайте мне знать в комментариях.
Новый комментарий