На сайте разместил простой аудио плеер, который я написал на JavaScript и JQuery. Использовать буду в разделе Радио.. В этой статье, опишу, как используя нехитрые приемы, можно сделать вот такой простой аудио плеер. Для новичков в HTML, думаю, будет интересно.
Дизайн плеера опустим из рассмотрения, тут каждый может, как угодно творить.
Я опишу, три момента, как я менял иконки при кликах, как сделал таймер отсчета пройденного времени звучания трека, и прогресс бар громкости.
Первое, что скажу, что по сути плеер можно было и не делать, т.к HTML5, позволяет размещать на сайте аудио плеер используя тег <audio>, при этом я и взял за основу, те же самые методы работы со звуком.
Пример на HTML5:
|
1 2 3 |
<audio src="http://music.mp3" type="audio/mpeg" controls="controls"> |
Вся моя конструкция крутится вокруг следующего ядра:
|
1 2 3 4 5 6 7 8 |
var audio = new Audio();//Создаем объект аудио audio.src="music.mp3";//Аудио источник audio.play();//Воспроизведение audio.pause();Пауза audio.volume=0.5;//Регулируем уровень громкости audio.currentTime;//Получаем пройденное время звучания файла |
Это основные методы и свойства, которые нам нужны для создания своего аудио плеера.
В качестве иконок, я использовал шрифт от Google
За основу смены иконок был взят принцип, который ранее был описан в этой статье.
Привожу свой код смены иконок по клику:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function display(p){ if(p=='play'){ b='none'; n='block'; } else{ if(p=='pause'){ b='block'; n='none'; } } $('#play_circle_outline').css('display',b); $('#pause_circle_outline').css('display',n); } |
Принцип прост, у нас есть заготовка:
|
1 2 3 4 5 |
<div class="icons"> <i class="material-icons" id="play_circle_outline">play_circle_outline</i> <i class="material-icons" id="pause_circle_outline" style="display:none">pause_circle_outline</i></div> |
В этом примере, один тег <i> отображается по умолчанию, это play, другой скрыт. Когда мы кликаем, на функцию поступает параметр со значением “pause”, тег прячется
|
1 2 3 |
<i id="play_circle_outline"> |
а тег
|
1 2 3 |
<i id="pause_circle_outline"> |
появляется.
|
1 2 3 4 5 6 |
$('#pause_circle_outline').click(function(){ display('pause'); audio.pause(); }) |
Теперь покажу функцию, которая преобразует audio.currentTime в часы, минуты и секунды. Значение audio.currentTime, по умолчанию, в секундах.
Заготовка:
|
1 2 3 4 5 6 7 |
<div class="timer"> <div class="time_h">00</div><div class="blick"><span>:</span></div> <div class="time_m">00</div><div class="blick"><span>:</span></div> <div class="time_s">00</div>\ </div> |
Функция преобразования секунд audio.currentTime и отображения на плеере:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
function time(){ if(audio.currentTime > 0){ t=Math.floor(audio.currentTime); sek=t%60; if(sek==0){ //Защита от первого старта if(audio.currentTime>=60){ sekunda++; } min=sekunda%60; if(min<10){ min="0"+min; } $('.time_m').html(min); if(min==0){ hour=(audio.currentTime+1)/3600; hour=Math.floor(hour); if(hour<10){ hour="0"+hour; } $('.time_h').html(hour); } } if(sek<10){ sek="0"+sek; } $('.time_s').html(sek); } } |
Функция несложная, основной принцип заложен, в получении остатка от деления, благодаря чему, мы получаем минуты и часы.
И последнее, это регулятор громкости.
Заготовка:
|
1 2 3 4 5 6 7 |
<div class="volume_up"> <i class="material-icons" id="volume_on">volume_up</i> <i class="material-icons" id="volume_off" style="display:none">volume_off</i></div> <div class="volume_zone"><div class="progress"></div><div id="progress_click"></div> </div> |
Я решил пойти по следующему пути, создаю три области <div> блока, каждый накладываю один на другой, у всех у них свойство position:absolute, с z-index: 1,2,3 соответственно.
Нижний блок, это белый прямоугольник с фиксированной шириной –background:#fff;
Второй блок, имеет другой свет,в моем случае, зеленый.Ширина у него изначально нулевая. За счет изменения ширины, мы будем формировать погресс бар громкости!
Третий блок прозрачный, он также фиксированной ширины и высоты, он принимает наши клики.
Теперь, в чем суть..
Когда мы двигаем мышку в сторону, или кликаем по области прогресс бара, происходит расчет координат от края окна, и края нахождения div блока с прогресс баром.
|
1 2 3 4 |
start=Math.floor(document.getElementById("progress_click").getBoundingClientRect().left); end=Math.floor(event.pageX); |
Также, нужно узнать, какая ширина блока, по которому мы кликаем:
|
1 2 3 |
window['width']=document.getElementById("progress_click").getBoundingClientRect().width; |
Громкость у нас меняется от 0,1 до 1, т.е берем шаг 0,1
Теперь нужно рассчитать коэфициент, на который будет меняться у нас уровень громкости, в зависимости от ширины нашего прогресс бара. Показываю всю функцию, думаю, разберетесь в сути:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
window['width']=document.getElementById("progress_click").getBoundingClientRect().width; window['progress']=document.getElementById("progress_click"); var f=function(event){ kof=window['width']/10; start=Math.floor(document.getElementById("progress_click").getBoundingClientRect().left); end=Math.floor(event.pageX); p=end-start; vol=(Math.floor(p/kof))/10; audio.volume=vol; $('.progress').css("width",p); if(audio.volume > 0 & $('#volume_on').css('display')=='none'){ volume_display(1); } window['progress'].addEventListener("mousemove",f); } window['progress'].addEventListener("mousedown",f); window['progress'].addEventListener("mouseup",function(){ this.removeEventListener("mousemove",f); }); |
Что здесь еще есть, у меня громкость меняется, если я нажимаю клавишу мыши (mousedown), нажмаю и введу в сторону (mousemove), отпускаю (mouseup). Т.е. при нажиме, срабатывает функция f, потом мы ведем мышку в сторону, активируется снова функция f, а когда мы отпускаем клавишу, удаляется событие, которое висело на mousemove.
Прочитать о всех методах и свойствах класса audio можно здесь.
Немного запутанно, но принцип, думаю, поняли. Будут вопросы, пишите в комментариях.
