behavior-audio-source.js
View Options

	/**
	* @provides javelin-behavior-audio-source
	* @requires javelin-behavior
	* javelin-stratcom
	* javelin-vector
	* javelin-dom
	* @javelin
	*/

	/**
	* Allows an element to behave as an audio source. It plays a sound either
	* when the user scrolls it into view, or loops a sound which gets louder and
	* louder as the user gets closer.
	*/
	JX.behavior('audio-source', function(config, statics) {
	if (!window.Audio) {
	return;
	}

	var audio = new Audio();
	audio.setAttribute('src', config.audioURI);

	if (config.loop) {
	audio.setAttribute('loop', true);
	}

	audio.load();

	config.audio = audio;

	statics.items = statics.items \|\| [];
	statics.items.push(config);

	if (statics.initialized) {
	return;
	}
	statics.initialized = true;

	var onupdate = function() {
	timeout = null;

	var scroll = JX.Vector.getScroll();
	var view = JX.Vector.getViewport();
	var view_mid = scroll.y + (view.y / 2);

	for (var ii = 0; ii < statics.items.length; ii++) {
	var item = statics.items[ii];
	if (!item.element) {
	try {
	item.element = JX.$(item.sourceID);
	} catch (ignored) {
	continue;
	}
	}

	var pos = JX.Vector.getPos(statics.items[ii].element);
	var dim = JX.Vector.getDim(statics.items[ii].element);

	var item_mid = pos.y + (dim.y / 2);
	var item_distance = Math.abs(item_mid - view_mid);

	// item_distance is the number of pixels between the vertical middle
	// of the macro and the vertical middle of the viewport. We divide it
	// by the viewport height to get the "number of viewports" away from
	// the middle we are, then map that to [0, 1], where 0 means that the
	// image is far away from the viewport and 1 means the image is pretty
	// much in the middle of the viewport.

	var near = 1.25 - ((item_distance / view.y) * 1.25);
	near = Math.max(0, near);
	near = Math.min(1, near);

	if (near === 0) {
	if (item.playing) {
	item.audio.pause();
	item.playing = false;

	// If this isn't an ambient/looping sound, it only gets to fire
	// once. Even if it didn't finish, throw it out.
	if (!item.loop) {
	statics.items.splice(ii, 1);
	ii--;
	}
	}
	continue;
	} else {
	if (!item.playing) {
	if (!item.loop && near < 1) {
	// Don't start playing one-shot items until they're solidly on
	// screen.
	continue;
	}
	item.audio.volume = near;
	item.playing = true;
	item.audio.play();
	} else {
	item.audio.volume = near;
	}
	}
	}

	};

	var timeout;
	var onadjust = function() {
	timeout && clearTimeout(timeout);
	timeout = setTimeout(onupdate, 200);
	};

	JX.Stratcom.listen(['scroll', 'resize'], null, onadjust);
	onadjust();

	});

File Metadata

Mime Type: text/plain
Expires: Wed, Nov 26, 8:38 PM (20 h, 20 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 402448
Default Alt Text: behavior-audio-source.js (2 KB)

behavior-audio-source.js
No OneTemporary
Actions

behavior-audio-source.js
View Options

File Metadata

Event Timeline

behavior-audio-source.jsNo OneTemporaryActions

behavior-audio-source.jsView Options

File Metadata

Event Timeline

behavior-audio-source.js
No OneTemporary
Actions

behavior-audio-source.js
View Options