В процессе реализации идеи динамической связи клиент-сервер (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.
