Главная » Файлы » Скрипты для 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
Этот как бы что то реальное, живое, к чему вы можете прикоснуться. Плеер, также может быть использован на сенсорных экранах. Все, что вы можете сделать курсором, вы также можете сделать с помощью пальца. Каждое действие имеет свой свое сенсорное событие.

Адаптивности
  • JavaScript отключен? Не беспокойтесь, плеер браузер по умолчанию будет осуществлять проигрывание.

  • Бегунок громкости прячется, если выключить звук (плохо для IOS).

  • Когда браузер не поддерживает [audio] элемент целиком или любой из предоставленных аудио файлов, плеер изящно деградирует до нажатия одной кнопки (Play/ Pause) [embed /] элемента на основе плеера, который будет использовать третий участник плагин (Quick Time основан на Mac, Windows Media Player в Windows) для воспроизведения аудио.


    • Минимум изображений
    Ни одно животное не пострадало при создании данного проигрывателя. Имеется ввиду, что в данном плеере в CSS не используется ни одно изображение.

    Управление
  • Существует контроль Play / Pause и прогресс воспроизведения.

  • Контроль громкости Вкл / Откл / Вверх / Вниз.

  • Индикация, на сколько аудио файл загружен (буфер).


    • Плеер в коей мере не стандартный, но он стремится , чтобы быть как можно ближе к стандартному. Во-первых, он ведет себя в соответствии с определенными атрибутами [audio] элементов.
  • src - определяет местоположение (URL) аудио файла;

  • autoplay - логический атрибут указывает, будет ли играть звук, когда он готов;

  • loop - логический атрибут, указывает, следует ли воспроизводить аудио файл снова и снова, каждый раз, когда он будет закончен;

  • preload - определяет, как звуковой файл должен быть загружен, значения: auto | metadata | none.


    • Если вы знакомы с [audio] элементом, вам может быть интересно, где же атрибут controls. Дело в том, что он не имеет ничего общего с плагином. Атрибут важен, когда отключен JavaScript в браузере или подключаемый модуль не может быть загружен, тогда он отображается по умолчанию. Во-вторых, он принимает дочерний элемент и играет первый совместимый с обозревателем аудио файл.

    Легкость
    Уменьшенная версия плагина находится всего в 4 КБ файле.

    Как его использовать
    Достаточно теории, начинается самое интересное smile !

    Начальный 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>

    Кроме того, есть три неуказанных наименования классов присваиваемых родительским элементам:
  • audioplayer-playing - аудио воспроизведение (например, [div class="audioplayer audioplayer-playing"]);

  • audioplayer-mute - звук отключен (например, [div class="audioplayer audioplayer-mute"]);

  • audioplayer-novolume - регулировка громкости не доступна (например, [div class="audioplayer audioplayer-novolume"]);

    • Мини - когда не поддерживается 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:

    • Мы пойдем в CSS слева направо относительно плеера, описывая каждую зону в следующем порядке:
    • Родительский элемент и внутренняя структура
    • Кнопка Play / Pause
    • Таймеры
    • Прогресс бар
    • Регулятор громкости
    • Почти все единицы размеров представлены в em's, с тем чтобы обеспечить масштабируемость и последовательность. В комментариях, после em , вы найдете их эквивалент в пикселях, когда размеры теля шрифт 100% (16px).

    Родительский элемент и внутренняя структура
    Код
    *  
      {  
    -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;  
    }


    Фууух! Вот и все! Просмотрите ДЕМО, если вы еще не смотрели.
    Заливаем все в соответствующие папки smile
    Категория: Флеш | Добавил: Apocalypse | Теги: новейший, ucoz, Аудио, приятный, глазу, для, плеер
    Просмотров: 791 | Загрузок: 0 | Рейтинг: 0.0/0
    Всего комментариев: 0
    Имя *:
    Email: