DDR64.ru

Выделяем главное

Простой аудио плеер на сайт

На сайте разместил простой аудио плеер, который я написал на JavaScript и JQuery. Использовать буду в разделе Радио.. В этой статье, опишу, как используя нехитрые приемы, можно сделать вот такой простой аудио плеер.  Для новичков в HTML, думаю, будет интересно.

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

Я опишу, три момента, как я менял иконки при кликах, как сделал таймер отсчета пройденного времени звучания трека,  и прогресс бар громкости.

Первое, что скажу, что по сути плеер можно было и не делать, т.к HTML5, позволяет размещать на сайте аудио плеер используя тег <audio>, при этом я и взял за основу, те же самые методы работы со звуком.

Пример на HTML5:

Вся моя конструкция крутится вокруг следующего ядра:

Это основные методы и свойства, которые нам нужны для создания своего аудио плеера.

В качестве иконок, я использовал шрифт от Google
За основу смены иконок был взят принцип, который ранее был описан в этой статье.

Привожу свой код смены иконок по клику:

Принцип прост, у нас есть заготовка:

В этом примере, один тег <i> отображается по умолчанию, это play, другой скрыт. Когда мы кликаем, на функцию поступает параметр со значением “pause”, тег прячется

а тег

появляется.

Теперь покажу функцию, которая преобразует audio.currentTime в часы, минуты и секунды. Значение audio.currentTime, по умолчанию, в секундах.

Заготовка:

Функция преобразования секунд  audio.currentTime и отображения на плеере:

Функция несложная, основной принцип заложен, в получении остатка от деления, благодаря чему, мы получаем минуты и часы.

И последнее, это регулятор громкости.

Заготовка:

Я решил пойти по следующему пути, создаю три области <div> блока, каждый накладываю один на другой, у всех у них свойство position:absolute,  с z-index: 1,2,3 соответственно.
Нижний блок, это белый прямоугольник с фиксированной шириной –background:#fff;
Второй блок, имеет другой свет,в моем случае, зеленый.Ширина у него изначально нулевая. За счет изменения ширины, мы будем формировать погресс бар громкости!
Третий блок прозрачный, он также фиксированной ширины и высоты, он принимает наши клики.

Теперь, в чем суть..

Когда мы двигаем мышку в сторону, или кликаем по области прогресс бара, происходит расчет координат от края окна, и края нахождения div блока с прогресс баром.

Также, нужно узнать, какая ширина блока, по которому мы кликаем:

Громкость у нас меняется от 0,1 до 1, т.е берем шаг 0,1

Теперь нужно рассчитать коэфициент, на который будет меняться у нас уровень громкости, в зависимости от ширины нашего прогресс бара. Показываю всю функцию, думаю, разберетесь в сути:

Что здесь еще есть, у меня громкость меняется, если я нажимаю  клавишу мыши (mousedown), нажмаю и  введу в сторону (mousemove), отпускаю (mouseup). Т.е. при нажиме, срабатывает функция f, потом мы ведем мышку в сторону, активируется снова функция f, а когда мы отпускаем клавишу, удаляется событие, которое висело на  mousemove.

Прочитать о всех методах и свойствах класса audio можно здесь.

Немного запутанно, но принцип, думаю, поняли. Будут вопросы, пишите в комментариях.

Оценить статью
(Пока оценок нет)

Добавить комментарий

Войти с помощью: