Создание HTML5 аудиоплеера (HTML audio)

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

Введение

Сложность

html5 audio player

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

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

Простой 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 без использования стороннего плагина.

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

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

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

Переменная myaudio

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

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

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

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

html5 audio

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>

После заголовка, я создал контейнер с двумя классами 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;
}

html audio

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

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

Проблема с ползунком проигрывания HTML5 возникает из-за того, что лишь немногие браузеры поддерживают пользовательские стили для него. 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);
    });

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

Перевод статьи Create a Customized HTML5 Audio Player

Тэги: transitionaudioplayer

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.