В процессе реализации идеи динамической связи клиент-сервер (Sever Sent Events или сокращенно – SSE) в плагине WatchMan-Site7 возникла необходимость реализовать универсальное решение – звуковое сопровождение факта появления нового посетителя на сайте.
К счастью существует относительно новое решение от Mozilla (Firefox), которое получило название: интерфейс AudioContext, основанное на спецификации Web Audio API. Что особенно радует, так это то, что это решение универсально: работает в браузерах Chrome, Opera, Safari, ну и естественно Firefox. Касательно Internet Explorer, так и тут, с завидным постоянством разработчики этого несчастного браузера держатся особняком от всего мира.
Итак, что у меня получилось:
Для наглядности привожу скриншот интерфейса пользователя:
<table> <tr> <td style='height:20px;padding:0;margin:0;'> <label>frequency</label> </td> <td style='height:20px;padding:0;margin:0;'> <input type="range" id="fIn" name="wms7_main_settings[fIn]" value="<?php echo esc_html( $val['fIn'] ); ?>" min="40" max="6000" oninput="wms7_show()" /> </td> <td style='height:20px;padding:0;margin:0;'> <span id="fOut"></span> </td> </tr> <tr> <td style='height:20px;padding:0;margin:0;'> <label>type</label> </td> <td style='height:20px;padding:0;margin:0;'> <input type="range" id="tIn" name="wms7_main_settings[tIn]" value="<?php echo esc_html( $val['tIn'] ); ?>" min="0" max="3" oninput="wms7_show()" /> </td> <td style='height:20px;padding:0;margin:0;'> <span id="tOut"></span> </td> </tr> <tr> <td style='height:20px;padding:0;margin:0;'> <label>volume</label> </td> <td style='height:20px;padding:0;margin:0;'> <input type="range" id="vIn" name="wms7_main_settings[vIn]" value="<?php echo esc_html( $val['vIn'] ); ?>" min="0" max="100" oninput="wms7_show()" /> </td> <td style='height:20px;padding:0;margin:0;'> <span id="vOut"></span> </td> </tr> <tr> <td style='height:20px;padding:0;margin:0;'> <label>duration</label> </td> <td style='height:20px;padding:0;margin:0;'> <input type="range" id="dIn" name="wms7_main_settings[dIn]" value="<?php echo esc_html( $val['dIn'] ); ?>" min="1" max="5000" oninput="wms7_show()" /> </td> <td style='height:20px;padding:0;margin:0;'> <span id="dOut"></span> </td> </tr> </table>
Интерфейс не притязательный и понятен без разъяснений. Ниже привожу код:
/** * Start of sound notification when visiting the site. */ function wms7_beep() { var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); if ( ! get_cookie( 'wms7_sound_volume' ) && ! get_cookie( 'wms7_sound_frequency' ) && ! get_cookie( 'wms7_sound_type' ) && ! get_cookie( 'wms7_sound_duration' )) { var volume = '0.1'; var frequency = '469'; var type = 'square'; var duration = '488'; document.cookie = 'wms7_sound_volume=' + volume; document.cookie = 'wms7_sound_frequency=' + frequency; document.cookie = 'wms7_sound_type=' + type; document.cookie = 'wms7_sound_duration=' + duration; } else { var volume = get_cookie( 'wms7_sound_volume' ); var frequency = get_cookie( 'wms7_sound_frequency' ); var type = get_cookie( 'wms7_sound_type' ); var duration = get_cookie( 'wms7_sound_duration' ); } var oscillator = audioCtx.createOscillator(); var gainNode = audioCtx.createGain(); oscillator.connect( gainNode ); gainNode.connect( audioCtx.destination ); gainNode.gain.value = volume; oscillator.frequency.value = frequency; oscillator.type = type; oscillator.start(); setTimeout( function(){ oscillator.stop(); }, duration ); } /** * Saving audio alert settings to cookie. */ function wms7_setup_sound(){ document.cookie = 'wms7_sound_volume=' + volume; document.cookie = 'wms7_sound_frequency=' + frequency; document.cookie = 'wms7_sound_type=' + type; document.cookie = 'wms7_sound_duration=' + duration; } /** * Get content cookie. * * @param string cookie_name Cookie name. * @return string $result. */ function get_cookie(cookie_name){ var results = document.cookie.match( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' ); if ( results ) { result = decodeURI( results[2] ); return ( result ); } else { result = null; return result; } } /** * Settings for the sound notification object when visit the site. */ function wms7_show(){ frequency = document.getElementById( "fIn" ).value; document.getElementById( "fOut" ).innerHTML = frequency + ' Hz'; switch (document.getElementById( "tIn" ).value * 1) { case 0: type = 'sine'; break; case 1: type = 'square'; break; case 2: type = 'sawtooth'; break; case 3: type = 'triangle'; break; } document.getElementById( "tOut" ).innerHTML = type; volume = document.getElementById( "vIn" ).value / 100; document.getElementById( "vOut" ).innerHTML = volume; duration = document.getElementById( "dIn" ).value; document.getElementById( "dOut" ).innerHTML = duration + ' ms'; }
Пояснение:
Функция wms7_setup_sound() просто хранит пользовательские настройки в cookies, которые используются основной функцией wms7_beep().
Функция wms7_show() рисует интерфейс.
Функция get_cookie() получает данные из cookies.