9.07.13, 21:59
0 комментарий
  Разное

Добавляем будильник в цифровые часы

Несколько дней тому назад мы занимались разработкой цифровых часов на jQuery и CSS3. Сегодня же нам хочется продолжить эту серию статей, и рассказать вам о том, как реализовать в них функцию будильника при помощи HTML5-элемента Audio.

Идея

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

* нам нужно, чтобы люди имели возможность устанавливать и редактировать будильник. Для этого понадобится диалоговое окно с полями, которые позволяют выставлять время будильника.
* каждую секунду нам нужно проверять, не пришло ли время для оповещения. Если да, то мы запускаем небольшой аудио-файл и отображаем диалоговое окно «Time’s up».

Для этих свойств нам нужно будет изменить HTML, CSS и jQuery. Давайте приступим!

Добавляем будильник в цифровые часы


HTML

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

Index.html

<div class="overlay">

    <div id="alarm-dialog">

        <h2>Set alarm after</h2>

        <label class="hours">
            Hours
            <input type="number" value="0" min="0" />
        </label>

        <label class="minutes">
            Minutes
            <input type="number" value="0" min="0" />
        </label>

        <label class="seconds">
            Seconds
            <input type="number" value="0" min="0" />
        </label>

        <div class="button-holder">
            <a id="alarm-set" class="button blue">Set</a>
            <a id="alarm-clear" class="button red">Clear</a>
        </div>

        <a class="close"></a>

    </div>

</div>

<div class="overlay">

    <div id="time-is-up">

        <h2>Time's up!</h2>

        <div class="button-holder">
            <a class="button blue">Close</a>
        </div>

    </div>

</div>


Оба эти диалоговых окна скрыты при помощи CSS, и отображаются при помощи jQuery-метода fadeIn() при необходимости. Также следует отметить, что диалоговое окно будильника использует HTML5-типы полей ввода с минимальным значением равным 0. Поля ввода цифр очень просто перепроверить при помощи javascript (подробнее об этом можно узнать в следующем разделе), и они также позволяют вывести цифровую клавиатуру на мобильных устройствах.

Далее следует HTML5-элемент audio. Он содержит теги source с двумя разными источниками аудио. Первый источник представляет собой mp3, а второй – ogg. Ogg-формат нужен только для Firefox, который не поддерживает воспроизведение mp3 ввиду нестыковок в лицензионном соглашением. Остальные же браузеры, поддерживающие HTML5 Audio, способны воспроизводить mp3.

Index.html

<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 сообщает браузеру, что эти звуковые файлы должны быть скачаны заранее, чтобы сразу же иметь к ним доступ, когда будет необходимо воспроизвести звук будильника (в противном случае, при первом же испытании будильника, звук задержится до тех пор, пока не будет скачан звуковой файл). Благодаря API HTML5 Audio на javascript мы можем невероятно простым образом воспроизводить аудиофайлы (подробнее об этом в следующем разделе).

jQuery

В данном разделе руководства мы дополним jQuery-код наших цифровых часов таким образом, чтобы они поддерживали воспроизведение звуков. Мы не будем рассматривать уже написанный код, и расскажем вам только о нововведениях.

Первое, что нам нужно сделать, это определить количество переменных, необходимых для функционирования будильника:

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;

Далее нам нужно проверить, если в ожидании функции update_time() установленный будильник.

// Is there an alarm set?

if(alarm_counter > 0){

    // Decrement the counter with one second
    alarm_counter--;

    // Activate the alarm icon
    alarm.addClass('active');
}
else if(alarm_counter == 0){

    time_is_up.fadeIn();

    // Play the alarm sound. This will fail
    // in browsers which don't support HTML5 audio

    try{
        $('#alarm-ring')[0].play();
    }
    catch(e){}

    alarm_counter--;
    alarm.removeClass('active');
}
else{
    // The alarm has been cleared
    alarm.removeClass('active');
}


Когда счетчик доходит до 0, это значит, что пора воспроизводить звук и показывать диалоговое окно. Обратите внимание, что, несмотря на то, что мы указываем элемент audio #alarm-ring при помощи jQuery, мы также осуществляем доступ к первому DOM-элементу внутри коллекции, и получаем доступ к javascript-методу play(), доступному в элементах audio.

Добавляем будильник в цифровые часы


Последнее, что нам осталось сделать, это разобраться с диалоговым окном «Set an alarm» и несколькими кнопками:

// Handle setting and clearing alamrs

$('.alarm-button').click(function(){

    // Show the dialog
    dialog.trigger('show');

});

dialog.find('.close').click(function(){
    dialog.trigger('hide')
});

dialog.click(function(e){

    // When the overlay is clicked, 
    // hide the dialog.

    if($(e.target).is('.overlay')){
        // This check is need to prevent
        // bubbled up events from hiding the dialog
        dialog.trigger('hide');
    }
});

alarm_set.click(function(){

    var valid = true, after = 0,
        to_seconds = [3600, 60, 1];

    dialog.find('input').each(function(i){

        // Using the validity property in HTML5-enabled browsers:

        if(this.validity && !this.validity.valid){

            // The input field contains something other than a digit,
            // or a number less than the min value

            valid = false;
            this.focus();

            return false;
        }

        after += to_seconds[i] * parseInt(parseInt(this.value));
    });

    if(!valid){
        alert('Please enter a valid number!');
        return;
    }

    if(after < 1){
        alert('Please choose a time in the future!');
        return;	
    }

    alarm_counter = after;
    dialog.trigger('hide');
});

alarm_clear.click(function(){
    alarm_counter = -1;

    dialog.trigger('hide');
});

// Custom events to keep the code clean
dialog.on('hide',function(){

    dialog.fadeOut();

}).on('show',function(){

    // Calculate how much time is left for the alarm to go off.

    var hours = 0, minutes = 0, seconds = 0, tmp = 0;

    if(alarm_counter > 0){

        // There is an alarm set, calculate the remaining time

        tmp = alarm_counter;

        hours = Math.floor(tmp/3600);
        tmp = tmp%3600;

        minutes = Math.floor(tmp/60);
        tmp = tmp%60;

        seconds = tmp;
    }

    // Update the input fields
    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” в 35-ой строке, которая доступна к использованию на полях ввода цифр в современных браузерах. Оно сообщает нам, составляет ли содержимое поля ввода больше 0 (помните, что 0 – это минимальное значение).

Также стоит обратить внимание на то, каким образом код для диалогового окна будильника организован при помощи пользовательских событий. Когда ‘show’-событие запущено, мы высчитываем оставшиеся часы, минуты и секунды до будильника, которые затем вносятся в поле ввода.

На этом наши милые цифровые часы с будильником готовы! Надеемся, что вам понравилось данное руководство, и окажется вам полезным в последующих проектах!

СКАЧАТЬ

Вес файла
68.13 Kb

Напишите своё мнение