Lecaw

Учимся создавать Web-сайты

Создание аудиоплеера на HTML5

May 26, 2012 420hits

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

 

ДЕМО Исходные файлы

 

 

 

Введение

До сих пор реализация функций аудио в веб-проекте было утомительным процессом, полагаясь на несколько плагинов сторонних производителей, например, как Flash. После известия об iPhone, что Adobe не будут поддерживать Flash для мобильных устройств, многие разработчики ищут другие способы использовать звук в своих проектах. Для этого многие используют HTML5 аудио для решения этой проблемы.

Хотя HTML5 предоставляет стандартный способ для воспроизведения аудио файлов в Интернете, он все еще находится в зачаточном состоянии и до сих пор имеет довольно сложный путь, прежде чем он может обеспечить все другие плагины. Тем не менее, в большинстве случаев, этого более чем достаточно.

Простой HTML5 Audio

Самый простой способ для реализации звука в веб-страницы с помощью HTML5 является использование новых тегов - аудио. Создать документ и добавить следующий код:

<audio controls="controls"> 
  <source src="/track.ogg" type="audio/ogg" />
  <source src="/track.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

Если вы посмотрите на код выше, то увидите, что я добавил теги <audio> и определил атрибут управления, так что бы по умолчанию мы видели элементы аудио-плеера.

В тег <audio> мы добавили 2 тега SRC. Один определяет MP3 дорожки, другие определяют формат OGG. Формат OGG используется, чтобы позволить музыке воспроизводится в Firefox, это из-за проблем с лицензированием Firefox, он не поддерживает MP3 без использования стороннего плагина.

 

Атрибуты тега аудио

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

  • autoplay – Имеет два значения: "true ", либо оставить значение пустым "", для того что бы трек воспроизводился автоматически после загрузки страницы.
  • controls - Как видно из примера выше, этот атрибут определяет, будет ли размещены средства управления, такие как  "воспроизведение, пауза и т.д.".
  • loop – атрибут определяет будет ли трек воспроизводиться по кругу.
  • preload – Имеет значение "Auto" (загружает файл сразу после загрузки страницы), "metadata" (описывает метаданные, название трека и т.д.), "none " (браузер не загружает файл при загрузке страницы).
  • SRC - Его можно увидеть на примере выше, он определяет URL музыки, которая должна воспроизводится в проигрывателе.

Переменная myaudio

Когда мы будем использовать аудио с JavaScript, мы можем создать действительно интересные и полезные аудиоплееры. Давайте взглянем на функции JQuery, которые нам понадобятся. После того, как мы добавили ссылку на jQuery в наш основной документ, мы можем создать новые переменные для хранения наших аудио файлов:

var myaudio = new Audio('mysong.mp3');

Это действительно так просто! Потом, когда мы захотим выполнить действия с аудио мы можем вызвать их с помощью переменной myaudio. Вот список действий, которые мы можем взять из переменной. Запишите их, некоторые из них мы будем использовать в нашем уроке.

myaudio.play(); - Запуск музыки.
myaudio.pause(); - Остановка музыки.
myaudio.duration; - Возвращает длину трека.
myaudio.currentTime = 0; - Перемотка к началу.
myaudio.loop = true; - Запуск трека по кругу.
myaudio.muted = true; - Отключение трека.

HTML5

Теперь у вас есть немного основы аудио HTML5 и мы разобрали основные принципы их работы, теперь настало время применить их на практике. Я не буду задевать стадию проектирования, поскольку это выходит за рамки данного руководства, но вы можете скачать исходный код и файлы PSD, чтобы получить некоторое представление о том, как они используются.

    
<!DOCTYPE html> 
<head>
    <title>HTML5 Audio Tutorial</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <script src="http://code.jQuery.com/jQuery-latest.js" type="text/javascript"></script>
    <script type="text/javascript" src="/js/js.js"></script>
    <script type="text/javascript" src="/js/html5slider.js"></script>
</head>

После названия, я создал DIV с классом "container" и "gradient". Я создал отдельный класс с градиентом, для того что бы использовать его на других элементах. К классу ".container" я добавил изображение (которое будет на обложке альбома), и три якоря, которые будут использоваться в качестве элементов управления для плеера.

    
<body>
    <h1>HTML 5  Audio Player</h1>
    <div class="container gradient">
        <img class="cover" src="/images/cover.jpg" alt="">
        <div class="player  gradient">
            <a class="button  gradient" id="play" href="#" title=""></a> 
            <a class="button gradient" id="mute" href="#" title=""></a>                 <input type="range" id="seek" value="0" max=""/>             <a class="button gradient" id="close" href="#" title=""></a>         </div><!-- / player -->     </div><!-- / Container-->
</body>
</html>

CSS

В коде ниже я добавил градиент для проигрывателя, который был создан с помощью редактора градиентов CSS. Затем я создал класс ".container" с некоторыми CSS3 переходами.

Я также использовал CSS3 атрибут 'border-box'. Это добавляет рамку в 10px вокруг блоков, ширина котрых будет 427px. Если бы я не использовал этот размер в 427px, тогда изображение сделает блок больше, чем вы на самом деле хотите.

Я также добавил несколько CSS3 переходов ".coverlarge", чтобы было много красивых переходов, когда проигрыватель запускается. Сначала покажется что кода CSS слишком много, но это только для того что бы наш аудио-плеер корректно работал в различных браузерах.

.gradient {
    border: 1px solid black;
 
    -webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
    -moz-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
    box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
    background: #494949; /* Old browsers */
background: -webkit-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
 
    background: -moz-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
    background: -o-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
    background: -ms-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
    background: linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); /* W3C */
-image  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */
}
 
.container {
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -o-transition: all .7s ease;
    -ms-transition: all .7s ease;
    transition: all .7s ease;
    position: absolute;
    width: 427px;
    height: 70px;
 
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 
    -webkit-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
    -moz-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
    box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
    top: 50%;
    left: 50%;
    margin: -214px 0px 0px -214px;
    padding: 10px;
 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
 
.containerLarge {
    height: 427px;
}
 
.cover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    width: 398px;
    height: 10px;
    border: 2px solid black;
 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
 
    -webkit-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);
    -moz-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);
    box-shadow: inset 0px 5px 5px rgba(0,0,0,1);
}
 
.coverLarge {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    height: 398px;
 
    -webkit-transition: opacity .7s ease;
    -moz-transition: opacity .7s ease;
    -o-transition: opacity .7s ease;
    -ms-transition: opacity .7s ease;
    transition: opacity .7s ease;
 
    -webkit-transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    -ms-transition-delay: .5s;
    transition-delay: .5s;
}

Пришло время для создания кнопок контроля. Большинство кнопок были созданы с помощью CSS спрайтов.

К сожалению, IE не поддерживает HTML5, поэтому я решил не показывать аудио ползунок для IE пользователей. Если вы находитесь в положении, когда это неприемлемо, вы можете использовать слайдер JQuery UI по аналогично методу, который я использовал. Тем не менее, я решил просто скрыть ползунок, при помощи input{display:none\9!important;} он в основном скрывается от пользователей (дополнительная информация о \ 9).

Проблема с ползунком проигрывания HTML5 является то, что лишь немногие браузеры поддерживают пользовательские стили для него, WebKit браузеров (Chrome и Safari). Opera и Firefox к сожалению будут отображать только стандартный слайдер прокрутки. Если вам нужен пользовательский стиль во всех браузерах, то вы можете использовать слайдер JQuery UI, как упоминалось ранее. Вы можете увидеть пользовательский стиль для браузеров WebKit в атрибуте input::-webkit-slider-thumb:

.player {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    width: 300px;
    bottom: 10px;
    width: 95%;
 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 5px;
}
 
.button {
    display: block;
    width: 34px;
    height: 34px;
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    float: left;
    margin-right: 5px;
}
 
#play {
    background-position: 6px 5px;
}
 
#pause {
    background-position: -32px 5px;
}
 
#mute {
    background-position: -63px 5px;
}
 
#muted {
    background-position: -106px 5px;
}
 
input[type="range"] {
    width: 250px;
    margin-top: -5px;
}
 
#close {
    float: right;
    background-position: -146px 5px;
    display: none;
}
 
.volume {
    position: absolute;
    height: 100px;
    width: 34px;
    border: 1px solid black;
    background-color: #242323;
    top: -97px;
    display: none;
}
input{
    display:none\9!important;
}
input[type="range"] {
    -webkit-appearance: none;
    border: 1px solid black;
    position: absolute;
    top: 18px;
    display: block;
    width: 63%;
    height: 15px;
 
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background-color: #242323;
    left: 90px;
 
    -webkit-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
    -moz-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
    box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
}
 
input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border:1px solid black;
 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #80e4df; /* Old browsers */
background: -webkit-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
 
    background: -moz-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
    background: -o-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
    background: linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); /* W3C */
}

jQuery

После того, как стиль и разметка были созданы пришло время, оживить наш проигрыватель. Мы можем сделать это, используя JQuery JavaScript Framework. Мы создадим некоторые переменные, в которых мы можем сохранить наши объекты JQuery.

container = $('.container');
    cover = $('.cover');
    play = $('#play');
    pause = $('#pause');
    mute = $('#mute');
    muted = $('#muted');
    close = $('#close');
    song = new Audio('music/track1.ogg','music/track1.mp3');
    duration = song.duration;

В переменной "song", вы можете увидеть, что мы объявили два трека. Формата OGG для Firefox и MP3 для других браузеров. Затем я создал условный оператор IF, для того что бы проверить, поддерживает ли браузер MP3.

if (song.canPlayType('audio/mpeg;')) {
    song.type= 'audio/mpeg';
    song.src= 'music/track1.mp3';
    } else {
    song.type= 'audio/ogg';
    song.src= 'music/track1.ogg';
    }

Далее, мы собираемся создать, дополнительные функции, которые позволят нам воспроизводить и останавливать музыку. Я использую функцию play(), чтобы запустить звук, а затем использовать метод JQuery ReplaceWith, который в заменяет кнопку воспроизведения на кнопку паузы.

Я также добавил "coverLarge" и "containerLarge", классы "container" и "cover". " pause " действует, без переходов. При нажатии, она заменяется на кнопку "play".

play.live('click', function(e) { 
        e.preventDefault();
        song.play();         $(this).replaceWith('<a class="button gradient" id="pause" href="#" title=""></a>');
        container.addClass('containerLarge');
        cover.addClass('coverLarge');
        $('#close').fadeIn(300);
        $('#seek').attr('max',song.duration);
    });     pause.live('click', function(e) {
        e.preventDefault();
        song.pause();
        $(this).replaceWith('<a class="button gradient" id="play" href="#" title=""></a>');     });

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

mute.live('click', function(e) { 
        e.preventDefault();
        song.volume = 0;
        $(this).replaceWith('<a class="button gradient" id="muted" href="#" title=""></a>');     });     muted.live('click', function(e) {
        e.preventDefault();
        song.volume = 1;
        $(this).replaceWith('<a class="button gradient" id="mute" href="#" title=""></a>');     });

Когда пользователь нажимает кнопку "close" мы вызовем JQuery, чтобы удалить классы "containerLarge" и "coverLarge". Это позволит скрыть картинку и закрыть плеер. Затем мы остановим воспроизведение, вызвав действие pause() и сделаем CurrentTime равным 0. Это устанавливит положение воспроизведения к началу.

    
$('#close').click(function(e) { 
        e.preventDefault();
        container.removeClass('containerLarge');
        cover.removeClass('coverLarge');
        song.pause();
        song.currentTime = 0;
        $('#pause').replaceWith('<a class="button gradient" id="play" href="#" title=""></a>');         $('#close').fadeOut(300);
    });

Пришло время, чтобы установить полосу прокрутки аудио -"seek". Эта функция позволит нам перемещать ползунок в любую часть трека. Затем мы устанавливаем song.currentTime в соответствии с частью песни.

$("#seek").bind("change", function() {
        song.currentTime = $(this).val();
        $("#seek").attr("max", song.duration);
    });

В заключительной части JQuery, мы сделаем "#seek" что бы ползунок двигался вместе с продолжительностью звука. Я установил переменную "CURTIME", чтобы получить текущую songtime. Затем я изменил значение ползунка, чтобы отразить текущее положение времени.

song.addEventListener('timeupdate',function (){
    curtime = parseInt(song.currentTime, 10);
        $("#seek").attr("value", curtime);
    });

Теперь у нас есть готовый ауди-плеер на HTML5, который можно реализовать на своем сайте или в приложении.

ДЕМО Исходные файлы

Дополнительная информация

RATTING:
(2 голосов)

Медиа