Не так давно мы занимались разработкой часов на javascript. Сегодня мы хотим развить эту тему и рассказать вам как реализовать в наших часах функцию будильника с помощью HTML5-тега audio.
Нам понадобится добавить следующий функционал:
- предоставить возможность устанавливать и редактировать будильник, для чего понадобится диалоговое окно с соответствующими полями.
- нам нужно ежесекундно проверять, не пришло ли время для звонка. Если час пробил, то запускаем аудио-файл и отображаем диалоговое окно «Время пришло».
Добавляем будильник в javascript-часы
У нас будет два диалоговых окна. Первое предназначено для настройки и редактирования будильника, а второе будет отображаться при наступлении заданного времени.
<div class="overlay">
<div id="alarm-dialog">
<h2>Настройка будильника</h2>
<label class="hours">Часы
<input type="number" value="0" min="0" />
</label>
<label class="minutes">Минуты
<input type="number" value="0" min="0" />
</label>
<label class="seconds">Секунды
<input type="number" value="0" min="0" />
</label>
<div class="button-holder">
<a id="alarm-set" class="button blue">Вкл.</a>
<a id="alarm-clear" class="button red">Выкл.</a>
</div>
<a class="close"></a>
</div>
</div>
<div class="overlay">
<div id="time-is-up">
<h2>Пробил час!</h2>
<div class="button-holder">
<a class="button blue">Закрыть</a>
</div>
</div>
</div>
Оба этих диалоговых окна будут скрыты при помощи CSS. Мы будем отображать их при помощи команды jQuery fadeIn(). Диалоговое окно нашего будильника использует HTML5-типы полей ввода с минимальным значением равным 0. Такие поля легко перепроверить при помощи javascript, также они позволяют вывести цифровую клавиатуру на мобильных устройствах.
Далее нам потребуется HTML5-тег audio. Он содержит теги source с двумя разными аудио источниками для максимальной совместимости с разными браузерами.
<audio id="alarm-ring" preload>
<source src="assets/audio/ticktac.mp3" type="audio/mpeg">
<source src="assets/audio/ticktac.ogg" type="audio/ogg">
</audio>
Атрибут preload уведомляет браузер, что эти аудио-файлы должны быть загружены заранее, чтобы сразу же получить к ним доступ, когда потребуется воспроизвести сигнал будильника (иначе при первом звонке, звук задержится до тех пор, пока не будет скачан звуковой файл).
jQuery
Допишем javascript-код наших часов (assets/js/script.js), чтобы они поддерживали воспроизведение звуков. Для начала нам нужно определить переменные, необходимые для функционирования будильника:
var dialog = $('#alarm-dialog').parent(),
alarm_set = $('#alarm-set'),
alarm_clear = $('#alarm-clear'),
time_is_up = $('#time-is-up').parent();
// This will hold the number of seconds left
// until the alarm should go off
var alarm_counter = -1;
Далее нам нужно проверить включена ли функция будильника.
// Будильник включен?
if(alarm_counter > 0){
// Декремент счетчика на одну секунду
alarm_counter--;
// Активация значка будильника
alarm.addClass('active');
}
else if(alarm_counter == 0){
time_is_up.fadeIn();
// Играть звуковой сигнал. Звука не будет
// в браузерах, не поддерживающих HTML5 аудио
try { $('#alarm-ring')[0].play(); } catch(e) {}
alarm_counter--;
alarm.removeClass('active');
}
else{
// Убрать значок будильника
alarm.removeClass('active');
}
Когда счетчик доходит до нуля, мы должны проиграть сигнал будильника и показывать диалоговое окно. Обратите внимание, что, несмотря на то, что мы указываем тег audio #alarm-ring
при помощи jQuery, мы также осуществляем доступ к первому DOM-элементу внутри коллекции, и получаем доступ к javascript-методу play()
, доступному в элементах audio.
Добавляем будильник в цифровые часы
Последнее, что нам осталось сделать, - это разобраться с диалоговым окном «Установка будильника» и несколькими кнопками:
// Установка и сброс будильника
$('.alarm-button').click(function(){
// Показать диалог
dialog.trigger('show');
});
dialog.find('.close').click(function(){
dialog.trigger('hide')
});
dialog.click(function(e){
// Когда кликнули по оверлею скрыть диалог
if($(e.target).is('.overlay')){
// Эта проверка необходима для предотвращения
// всплывающих событий из скрытого диалогового окна
dialog.trigger('hide');
}
});
alarm_set.click(function(){
var valid = true, after = 0,
to_seconds = [3600, 60, 1];
dialog.find('input').each(function(i){
// Используем свойство validity в HTML5-совместимых браузерах:
if(this.validity && !this.validity.valid){
// Поле ввода содержит нечто иное, чем цифры
valid = false;
this.focus();
return false;
}
after += to_seconds[i] * parseInt(parseInt(this.value));
});
if(!valid){
alert('Введите правильное число!');
return;
}
if(after < 1){
alert('Выберите время, которое наступит!');
return;
}
alarm_counter = after;
dialog.trigger('hide');
});
alarm_clear.click(function(){
alarm_counter = -1;
dialog.trigger('hide');
});
// Пользовательские события, чтобы сохранить код в чистоте
dialog.on('hide',function(){
dialog.fadeOut();
}).on('show',function(){
// Считаем, сколько времени осталось до выключения будильника.
var hours = 0, minutes = 0, seconds = 0, tmp = 0;
if(alarm_counter > 0){
// Будильник включен, рассчитать оставшееся время
tmp = alarm_counter;
hours = Math.floor(tmp/3600);
tmp = tmp%3600;
minutes = Math.floor(tmp/60);
tmp = tmp%60;
seconds = tmp;
}
// Обновление полей ввода
dialog.find('input').eq(0).val(hours).end().eq(1).val(minutes).end().eq(2).val(seconds);
dialog.fadeIn();
});
time_is_up.click(function(){
time_is_up.fadeOut();
});
В приведенном выше коде есть несколько важных мест. Обратите внимание как мы используем встроенное свойство validity. Оно сообщает нам, является ли введенное содержимое числом больше нуля (вы ведь омните, что 0 – это наше минимальное значение).
Также внимательно изучите как организован код для диалогового окна будильника при помощи пользовательских событий: show означает, что событие запущено, мы высчисляем оставшиеся часы, минуты и секунды до звонка будильника. Это значение потом выводится в поле ввода.
На этом мы закончили писать часы на javascript! Если хотите расширить свой кругозор, попробуйте создать часы в Unity.