Главная » Файлы » Скрипты для uCoz » Флеш |
Приятный глазу новейший аудио плеер для uCoz
24.06.14, 14:19:09 | |
![]() Внимание! Вместо < > , я буду использовать [ ] , для корректного отображения тегов в материале! Зацените ДЕМО к материалу! Вы наверняка знаете, то чувство, когда вы находитесь и работаете в дизайн программе Photoshop (или другой, может быть, попроще ), а затем переходите к написанию разметки [select], [input type="radio | checkbox | file"], то понимаете , что вы вернулись в суровую реальность. Просто потому, что обычные стили CSS не предусматривались для таких работ, когда Бог создавал землю. Плохо, но [audio] элемент не является исключением. Каждый HTML5- совместимый браузер имеет свои собственные визуальные интерпретации элемента. Но у нас есть события, методы и свойства для [audio] элементов, а значит, можно манипулировать с помощью JavaScript. Эксперименты это хорошо, но все это будет бесполезным без практического применения. Несмотря на то, что видео является наиболее популярным видом СМИ в Интернете, есть также случаи, когда звук является важным или даже основным содержанием, например: подкасты или веб-сайты музыкантов. Хотя, моя ситуация была совершенно иной. Плагин Проще говоря, это jQuery плагин. Пользователи jQuery, которые составляют большинство среди всех пользователей в базе, будут рады добавить его в свою библиотеку jQuery. jQuery плагин сам по себе будет в значительной степени бесполезным без соответствующего CSS, который отвечает за внешний вид и некоторые функции, приведенные ниже. Цель Не путайте этот проигрыватель со всем медиа-центром, как iTunes или наподобие этого. Этот плагин ничего подобного и схожего не имеет с iTunes и подобными ему медиа-центрами. Это крошечный, легкий плеер с четко ясной целью: проигрывать один аудио файл. Этот плагин был создан с одним кредо: "Не решать проблемы, которых не существует". Вам не нужны сложные плагины или уродливые плееры со вспышками и тысячами бесполезных функций, чтобы проигрывать этот один чертов аудио файл. Быть инновационным, быть тонким - вот его цель. Как это работает? Плагин заменяет целевой [audio] элемент некоторыми HTML и JavaScript событиями прилагающимися к нему. Особенности Чувствительность Смартфон, планшет или тридцати дюймовый большой экран: плеер чувствует себя хорошо с любым размером экрана. Без необходимости запроса дополнительной информации, была принята простая и эластичная форма. Плеер довольно небольшой объект, так что это самая легкая часть. Мы подробнее рассмотрим это позже, в части CSS. Touchableness Этот как бы что то реальное, живое, к чему вы можете прикоснуться. Плеер, также может быть использован на сенсорных экранах. Все, что вы можете сделать курсором, вы также можете сделать с помощью пальца. Каждое действие имеет свой свое сенсорное событие. Адаптивности Минимум изображений Ни одно животное не пострадало при создании данного проигрывателя. Имеется ввиду, что в данном плеере в CSS не используется ни одно изображение. Управление Плеер в коей мере не стандартный, но он стремится , чтобы быть как можно ближе к стандартному. Во-первых, он ведет себя в соответствии с определенными атрибутами [audio] элементов. Если вы знакомы с [audio] элементом, вам может быть интересно, где же атрибут controls. Дело в том, что он не имеет ничего общего с плагином. Атрибут важен, когда отключен JavaScript в браузере или подключаемый модуль не может быть загружен, тогда он отображается по умолчанию. Во-вторых, он принимает дочерний элемент Легкость Уменьшенная версия плагина находится всего в 4 КБ файле. Как его использовать Достаточно теории, начинается самое интересное ![]() Начальный HTML Ничего особенного, просто типичное использование тега [audio] : Код <audio src="audio.wav" preload="auto" controls></audio> Это будет загружать только audio.wav файл. Будьте осторожны с атрибутом preload и не загружайте слишком много файлов одновременно. Используйте значения none или metadata для облегчения нагрузки. Чувствуете себя достаточно храбрым? Вы можете использовать autoplay файла при загрузке, а затем loop (повторять) это действие: Код <audio src="audio.wav" preload="auto" controls autoplay loop></audio> Для поддержки многими браузерами, вы можете указать несколько аудио форматов следующим образом: Код <audio preload="auto" controls> <source src="audio.wav" /> <source src="audio.mp3" /> <source src="audio.ogg" /> </audio> Модуль вызова Теперь у нас есть эта огромная и тяжелая HTML конструкция, давайте добавим JavaScript, просто добавив несколько строк: Код <audio src="audio.wav" preload="auto" controls></audio> <script src="jquery.js"></script> <script src="audioplayer.js"></script> <script>$( function() { $( 'audio' ).audioPlayer(); } );</script> В 4-й строке плагин применяется к аудио элементу. Можно также ориентироваться на элементы, используя соответствующие методы из очень широкого диапазона селекторов, например: [audio class="music"… а затем использовать $( '.music' )…. Кроме того, элемент audioPlayer имеет некоторые дополнительные параметры. Наиболее важным из них является classPrefix. Прошлое значение становится именем класса для родительского элемента и имя класса префикс для дочерних элементов. Другие параметры могут быть выгодны только для других языков, кроме английского. С их помощью легко: Код $( 'audio' ).audioPlayer( { classPrefix: 'player', // Значение по умолчанию: "audioplayer" strPlay: 'Play', // Значение по умолчанию: 'Play' strPause: 'Pause', // Значение по умолчанию: 'Pause' strVolume: 'Volume', // Значение по умолчанию: 'Volume' }); Магия Шучу, ничего магического здесь нет. Я просто стараюсь, привлечь ваше внимание на этот важный момент. При вызове плагина, он заменяет [audio] элемент полностью на новою часть пользовательского кода HTML. Есть два типа кода: Полная - когда audio элемент по крайней мере одному из указанных аудио файлов совместим с браузером: Код <div class="audioplayer"> <audio src="audio.wav" preload="auto" controls></audio> <div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div> <div class="audioplayer-time audioplayer-time-current">00:00</div> <div class="audioplayer-bar"> <div class="audioplayer-bar-loaded"></div> <div class="audioplayer-bar-played"></div> </div> <div class="audioplayer-time audioplayer-time-duration">…</div> <div class="audioplayer-volume"> <div class="audioplayer-volume-button" title="Volume"><a href="#">Volume</a></div> <div class="audioplayer-volume-adjust"><div><div></div></div></div> </div> </div> Кроме того, есть три неуказанных наименования классов присваиваемых родительским элементам: Мини - когда не поддерживается audio элемент или ни один из данных аудио файлов , совмести с браузером: Код <div class="audioplayer audioplayer-mini"> <embed src="audio.wav" width="0" height="0" volume="100" autostart="false" loop="false" /> <div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div> </div> К сожалению, но в данной ситуации дружба между JavaScript и [embed /] не велика. Таким образом, плеер изящно деградирует в упрощенную одну кнопку (Play и Pause) . Это хорошо для старых браузеров. ![]() Помните пункт сверху, Адаптивность? То была теория, а это практика. CSS Все, что осталось, это применить некоторые стили в HTML коде выше ↑ ! Чтобы сэкономить ваше время и сделать CSS цели ориентированными, я не буду использовать градиенты, тени и другие модные свойства в коде( но вы найдете его в демо-версии). Это означает, что если вы примените CSS ниже, плеер будет выглядеть следующим образом: ![]() Несколько замечаний, прежде чем погрузиться в CSS:
Родительский элемент и внутренняя структура Код * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .audioplayer { height: 2.5em; /* 40 */ color: #fff; background: #333; position: relative; z-index: 1; } /* fallback case (read Adaptiveness chapter) */ .audioplayer-mini { width: 2.5em; /* 40 */ margin: 0 auto; } /* inner elements positioning (helps to achieve responsiveness) */ .audioplayer > div { position: absolute; } Если вы никогда не использовали box-sizing: border-box, то это самое подходящее время, чтобы начать. Это игра меняющейся техники. Делая первый уровень внутренней позиции элементов, абсолютным, мы добиваемся отзывчивости. Не понимаете, о чем речь? Ниже приведена схема: ![]() Крошечные элементы имеют фиксированную ширину, и это совершенно прекрасно, пока они крошечные, а прогресс бар эластичный вместе с родительским элементом. Кнопка Play / Pause Код .audioplayer-playpause { width: 2.5em; /* 40 */ height: 100%; text-align: left; text-indent: -9999px; cursor: pointer; z-index: 2; top: 0; left: 0; } .audioplayer-mini .audioplayer-playpause { width: 100%; } .audioplayer-playpause:hover, .audioplayer-playpause:focus { background-color: #222; } .audioplayer-playpause a { display: block; } /* "play" icon when audio is not being played */ .audioplayer:not(.audioplayer-playing) .audioplayer-playpause a { width: 0; height: 0; border: 0.5em solid transparent; /* 8 */ border-right: none; border-left-color: #fff; content: ''; position: absolute; top: 50%; left: 50%; margin: -0.5em 0 0 -0.25em; /* 8 4 */ } /* "pause" icon when audio is being played */ .audioplayer-playing .audioplayer-playpause a { width: 0.75em; /* 12 */ height: 0.75em; /* 12 */ position: absolute; top: 50%; left: 50%; margin: -0.375em 0 0 -0.375em; /* 6 */ } .audioplayer-playing .audioplayer-playpause a:before, .audioplayer-playing .audioplayer-playpause a:after { width: 40%; height: 100%; background-color: #fff; content: ''; position: absolute; top: 0; } .audioplayer-playing .audioplayer-playpause a:before { left: 0; } .audioplayer-playing .audioplayer-playpause a:after { right: 0; } ТаймерыКод .audioplayer-time { width: 4.375em; /* 70 */ height: 100%; line-height: 2.5em; /* 40 */ text-align: center; z-index: 2; top: 0; } .audioplayer-time-current { border-left: 1px solid #111; left: 2.5em; /* 40 */ } .audioplayer-time-duration { right: 2.5em; /* 40 */ } .audioplayer-novolume .audioplayer-time-duration { border-right: 0; right: 0; } Прогресс бар Код .audioplayer-bar { height: 0.875em; /* 14 */ background-color: #222; cursor: pointer; z-index: 1; top: 50%; right: 6.875em; /* 110 */ left: 6.875em; /* 110 */ margin-top: -0.438em; /* 7 */ } .audioplayer-novolume .audioplayer-bar { right: 4.375em; /* 70 */ } .audioplayer-bar div { width: 0; height: 100%; position: absolute; left: 0; top: 0; } .audioplayer-bar-loaded { background-color: #555; z-index: 1; } .audioplayer-bar-played { background: #007fd1; z-index: 2; } Регулятор громкостиКод .audioplayer-volume { width: 2.5em; /* 40 */ height: 100%; border-left: 1px solid #111; text-align: left; text-indent: -9999px; cursor: pointer; z-index: 2; top: 0; right: 0; } .audioplayer-volume:hover, .audioplayer-volume:focus { background-color: #222; } .audioplayer-volume-button { width: 100%; height: 100%; } /* "volume" icon */ .audioplayer-volume-button a { width: 0.313em; /* 5 */ height: 0.375em; /* 6 */ background-color: #fff; display: block; position: relative; z-index: 1; top: 40%; left: 35%; } .audioplayer-volume-button a:before, .audioplayer-volume-button a:after { content: ''; position: absolute; } .audioplayer-volume-button a:before { width: 0; height: 0; border: 0.5em solid transparent; /* 8 */ border-left: none; border-right-color: #fff; z-index: 2; top: 50%; right: -0.25em; margin-top: -0.5em; /* 8 */ } .audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after { /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */ width: 0.313em; /* 5 */ height: 0.313em; /* 5 */ border: 0.25em double #fff; /* 4 */ border-width: 0.25em 0.25em 0 0; /* 4 */ left: 0.563em; /* 9 */ top: -0.063em; /* 1 */ -webkit-border-radius: 0 0.938em 0 0; /* 15 */ -moz-border-radius: 0 0.938em 0 0; /* 15 */ border-radius: 0 0.938em 0 0; /* 15 */ -webkit-transform: rotate( 45deg ); -moz-transform: rotate( 45deg ); -ms-transform: rotate( 45deg ); -o-transform: rotate( 45deg ); transform: rotate( 45deg ); } /* volume adjuster */ .audioplayer-volume-adjust { width: 100%; height: 6.25em; /* 100 */ cursor: default; position: absolute; left: 0; top: -9999px; background: #222; } .audioplayer-volume:not(:hover) .audioplayer-volume-adjust { opacity: 0; } .audioplayer-volume:hover .audioplayer-volume-adjust { top: auto; bottom: 100%; } .audioplayer-volume-adjust > div { width: 40%; height: 80%; background-color: #555; cursor: pointer; position: relative; z-index: 1; margin: 30% auto 0; } .audioplayer-volume-adjust div div { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: #007fd1; } .audioplayer-novolume .audioplayer-volume { display: none; } Фууух! Вот и все! Просмотрите ДЕМО, если вы еще не смотрели. Заливаем все в соответствующие папки ![]() | |
Просмотров: 821 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |