Делаем Аудио плеер на JavaScript

demosourse

В этой статье мы покажем процесс создания простого аудио плеера на JavaScript API, ориентированного в большей степени для работы на мобильных устройствах.

JavaScript API для аудио плеера

В данном уроке мы будем использовать следующие API:

  • Ambient Light API для смены темы в зависимости от окружающего освещения.
  • Proximity API для воспроизведения/остановке аудио.
  • Battery Status API для определения зарядки устройства и остановки воспроизведения, если уровень критически мал.
  • Web Notifications API для отправки сообщения пользователю о том, что уровень заряда устройства мал.
  • Vibration API для вибрации устройства при отправке сообщения.

Если браузер не осуществляет поддержку каких-то из вышеперечисленных API, то на саму работу плеера это не повлияет. В этом случае не будут работать отдельно взятые примочки.

Делаем разметку

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

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

Полный пример HTML кода:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Mobile Audio Player</title>
      <meta name="description" content="APIs-powered Audio Player">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="stylesheet" href="css/main.css">
   </head>
   <body class="normal-theme">
      <h1>APIs-powered Audio Player</h1>
      <p>
         This demo shows how to create a simple APIs-powered audio player. In particular this page
         uses the Proximity API, the Battery Status API, the Vibration API, the Web Notifications API,
         and the Ambient Light API.
      </p>
      <audio id="audio" src="http://freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3" controls>
         <p>I'm sorry but your browser doesn't support the <code>audio</code> element, so you can't run the demo.</p>
      </audio>

      <script src="js/main.js" async></script>
   </body>
</html>

Тема плеера

При слабом освещении мы будем отображать тёмный фон и светлый текст, чтобы избежать излишней нагрузки на глаза. При хорошем освещении цветовая гамма будет прямо противоположная. В нормальных условиях (по умолчанию) используем специальную тему.

Полный листинг CSS:

body
{
   max-width: 600px;
   margin: 0 auto;
   font-size: 20px;
   padding: 0 1em;
}

.dark-theme
{
   background-color: #000000;
   color: #FFFFFF;
}

.normal-theme
{
   background-color: #B8FFF7;
   color: #C53131;
}

.light-theme
{
   background-color: #FFFFFF;
   color: #000000;
}

Логика

Приступаем к самой интересной части данного урока - логика нашего примера. Тут мы покажем код управления плеером и всеми фишками, которые были перечислены в самом начале.

Первым делом мы должны проверить доступен тот или иной API в используемом браузере:

var tests = {
   proximity: 'onuserproximity' in window,
   light: 'ondevicelight' in window,
   vibration: 'vibrate' in window.navigator,
   notification: 'Notification' in window
};

Можно заметить что проверка Battery Status API отсутствует. В Firefox осуществлена поддержка старой версии спецификации. Вообще говоря, Firefox это единственный браузер, который полностью поддерживает все нужные нам API.

Чтобы осуществить тестирование нам нужна переменная для хранения конфигурации:

var config = {
   battery: {
      lowThreshold: 0.15,
      criticalThreshold: 0.05
   },
   vibration: {
      lowThreshold: [500, 200, 500],
      criticalThreshold: [1000]
   },
   notification: {
      lowThreshold: {
         tTitle: 'Battery level: low',
         message: 'Please charge your device to avoid the audio to be automatically paused.'
      },
      criticalThreshold: {
         title: 'Battery level: critical',
         message: 'The audio has been stopped to avoid the shutdown of your device.'
      }
   },
   light: {
      darkThreshold: 50,
      normalThreshold: 10000
   }
};

В данной переменной мы храним настройки для того или иного JavaScript API. К примеру, мы определили рамки для использования Battery Status API. Таким образом мы сможем распознать когда заряд батареи будет мал, а когда критично низок. Так же мы определили настройки вибрации, которые будут использоваться также в зависимости от заряда батареи. Наконец мы определили настройки для Web Notifications API и Ambient Light API для определения освещения.

Последний шаг предварительных работ: выбираем элемент audio. Сделать это проще простого:

var audio = document.getElementById('audio');

Теперь мы готовы внедрить супер-фишки для нашего плеера. Во-первых, реализуем воспроизведение/остановку аудио файла. Для этого будет достаточно просто прикосновения пальца или другого предмета к сенсорному экрану.

Реализация:

if (tests.proximity) {
   window.addEventListener('userproximity', function (event) {
      if (event.near) {
         audio.paused ? audio.play() : audio.pause();
      }
   });
}

Просто, не правда ли? Далее реализуем смену темы в зависимости от освещения. Отследить уровень света можно, опираясь на наши переменные darkThreshold и normalThreshold. После проверки меняем тему. Теперь все эти слова превращаем в код:

if (tests.light) {
   window.addEventListener('devicelight', function(event) {
      var light = Math.round(event.value);

      if (light < config.light.darkThreshold) {
         document.body.className = 'dark-theme';
      } else if (light < config.light.normalThreshold) {
         document.body.className = 'normal-theme';
      } else {
         document.body.className = 'light-theme';
      }
   });
}

Теперь мы можем реализовать функционал, который будет базироваться на уровне заряда батареи. Для этого нам нужно прослушать событие levelchange сразу же после загрузки страницы. Напишем функцию manageBattery(). Так же определим версию Battery Status API для запуска того или иного функционала.

Код:

function manageBattery(battery) {
   // Code here...
}

if (window.navigator.getBattery) {
   window.navigator.getBattery().then(function(battery){
      battery.addEventListener('levelchange', manageBattery.bind(window, battery));
      manageBattery(battery);
   });
} else if (window.navigator.battery) {
   window.navigator.battery.addEventListener('levelchange', manageBattery.bind(window, window.navigator.battery));
   manageBattery(window.navigator.battery);
}

Последний шаг - написание тела функции manageBattery(). Там мы должны реализовать следующие фишки:

  1. Определяем уровень заряда (good, low, или critical)
  2. Останавливаем аудио, если уровень слишком мал
  3. Вибрация
  4. Показать сообщение пользователю, если уровень заряда батареи мал

А вот и код:

function manageBattery(battery) {
   if(!battery.charging && audio.duration > 0 && !audio.paused) {
      if (battery.level > config.battery.lowThreshold) {
         return;
      }

      var isCritical = battery.level <= config.battery.criticalThreshold;
      if (isCritical) {
         audio.pause();
      }

      if (tests.vibration) {
         window.navigator.vibrate(
            isCritical ? config.vibration.criticalThreshold : config.vibration.lowThreshold
         );
      }

      if (tests.notification) {
         Notification.requestPermission(function(permission) {
            if (permission !== 'denied') {
               new Notification(
                  isCritical ?  config.notification.criticalThreshold.title : config.notification.lowThreshold.title,
                  {
                     body: isCritical ?
                        config.notification.criticalThreshold.message :
                        config.notification.lowThreshold.message
                  }
               );
            }
         });
      }
   }
}

Теперь наш пример готов к тестированию.

Код и живой пример

Последнюю версию данного примера можно найти на GitHub. Так же можно посмотреть и живое демо.

Заключение

В данном уроке мы создали аудио плеер и применили множество сторонних JavaScript API. Опираясь на данный пример вы можете использовать различные JavaScript API для приложений, ориентированных на мобильные устройства.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/building-mobile-javascript-powered-audio-player/
Перевел: Станислав Протасевич
Урок создан: 8 Апреля 2015
Просмотров: 31417
Правила перепечатки

5 последних уроков рубрики "HTML5"

  • Расширяем возможности HTML за счёт создания собственных тегов

    В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

  • Определение доступности атрибута HTML5 с помощью JavaScript

    Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

  • HTML5: API работы с вибрацией

    HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

  • Создание форм с помощью Webix Framework — 4 практических примера

    Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

  • Знакомство с фрэймворком Webix

    В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

^ Наверх ^