HTML attributes

An easy way to connect HTML events to control WAXML is to use the HTML attributes (If you prefer Javascript, please refer to the Javascript API). WAXML can listen to any event on any HTML element and respond by triggering, stopping, or setting the value of a variable. The syntax is:

data-waxml-[eventName]-[commandName]

• eventName can be any event appropriate for the HTML element, e.g. click, mouseenter, mouseleave, loaded etc.
• commandName can be either trig, stop or set.

ex:

HTML

<div data-waxml-mouseenter-trig="sound1" data-waxml-mouseleave-stop="sound1">Rollover Sound</button>

XML

<ObjectBasedAudio src="audio/sound1.mp3" trig="sound1" stop="sound1" />

It is also possible to set a variable using WAXML HTML attributes:

This example show how a button can turn on the audio by setting the variable "gain" to 1 (supposed it is configured to control the volume in WAXML) or from a slider controlling the volume between 0 (off) to 1 (on):

HTML

<button data-waxml-click-set="gain=1">Turn on audio</button>
<input type="range" min="0" max="1" value="0" step="0.01" data-waxml-input-set="gain=this.value" />

XML

<GainNode gain="$gain" />