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