Использование 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.

One Reply to “Использование AudioContext (Web Audio API) в плагине”

  1. Hi! This is kind of off topic but I need some advice from an established blog.
    Is it very difficult to set up your own blog? I’m not very techincal but I can figure things out
    pretty quick. I’m thinking about making my own but I’m not sure
    where to start. Do you have any tips or suggestions? Thanks

    Feel free to visit my homepage :: you can try this out

Leave a Reply

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