Использование AudioContext (Web Audio API) в плагине

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

Leave a Reply

Your email address will not be published. Required fields are marked *