AWML — Audio Widget Markup Language

This is an introduction to the Audio Widget Markup Language (AWML). It explains the basic concepts and ideas behind AWML and contains several interactive examples. It aims to give the reader an overview of the possibilies and limitations of building user interfaces using AWML.

AWML - as the name suggests - is a markup language for audio widgets. The implementation described here is based on HTML5 Custom Elements and defines a HTML tag for each widget. In AWML we use this feature to build complex widgets that embed natively into HTML documents. The AWML implementation described here uses the toolkit JavaScript Audio Widget library.


Creating a widget using AWML is easy as writing standard HTML.

Interactive: Try changing values in the HTML above and check result in the widget below.


The way a widget behaves and its DOM representation are controlled by its options. In addition CSS can be used to change the way it looks.

There is several ways to specify options for a widget. Options can either be specified as attributes to the AWML tag, or using an awml-option tag as child node to the widget's tag.

All the options of a AWML widget correspond to those of the corresponding toolkit widget. See the toolkit documentation for a complete list of widgets and their options.


When setting options as tag attributes, the format is part of the attribute value. When setting options using the awml-options tag, the format is set in the type-attribute.

Example: <awml-option name="value" type="number">-21</awml-option>

The available formats are:

If no format is specified, the parser will treat what can be parsed

More Examples:

Multiple Knob Widgets

Multiple Value Knobs

Copyright©2016 Deuso GmbH