WebAudioXML

An XML syntax for building Web Audio API applications

Generate Convert Improve

Install / Use

/learn @hanslindetorp/WebAudioXML

About this skill

Quality Score

0/100

README

WebAudioXML

Web Audio Made Easy

WebAudioXML is a plugin that helps content creators without any programming experience to prototype web audio applications with ease. It reduces the time spent on development radically compared to traditional technologies and distributes to all smartphones, tablets, and computers through a single web page.

DEMOs

https://hanslindetorp.github.io/WebAudioXML/demos/

Tutorials

https://www.youtube.com/playlist?list=PLQ9EtICrzxGrR-x6MWhTl7ci2orezvjtQ
https://www.youtube.com/playlist?list=PLQ9EtICrzxGrSvOLUT9Ibgrd07ColSu8m
https://www.youtube.com/playlist?list=PLQ9EtICrzxGqf97kn5OX5lpy-rIwx58qQ

Documentation

A detailed documentation covering the different elements, attributes, variable mapping and audio signal routing methods.

WebAudioXML is both a specification and a parser library. It defines how to structure Audio objects in a hierarchical, modular way using XML. The integration in a web-based application requires WebAudioXML.js - a free JavaScript library that parses the XML and creates and connects all Web Audio nodes into a tree-like structure, called an Audio Graph.

WebAudioXML is a PhD research project invented and maintained by Hans Lindetorp. It's free for anyone to use, but comes with no guarantees or support. Please don't hesitate to contact me if you find the project interesting.

Best wishes, Hans

Installation

WebAudioXML is added to a web page using one line of HTML-code added to the <head>-element or at the end of the <body>. The ‘data-source’ attribute specifies the path to a WebAudioXML document.

ex. external file:

<script src="WebAudioXML.js" data-source="audio.xml"></script>

The ‘data-source’ can be a relative path or an address pointing to a remote file. It is also possible to point to an embedded XML-element within the HTML-file using the ‘id’ attribute as an identifier.

ex. embedded XML:

<xml id="WebAudioXML">
  <audio version="1.0"></audio>
</xml>

<script src="WebAudioXML.js" data-source="#WebAudioXML"></script>

XMLstructure

The following shows the simplest configuration using only one OscillatorNode connected to the Web Audio destination:

<?xml version="1.0" encoding="UTF-8"?>
<audio version="1.0">
 <OscillatorNode></OscillatorNode>
</audio>

The structure of the XML-data follows some basic rules. The root element is named <audio> and the other elements can be either a valid Web Audio node, a Web Audio parameter or one of the following custom elements: mixer, chain, synth, voice, send, envelope or link. See the separate pages for comments on each element type.

Parameters / Attributes

Any valid Web Audio parameters can be set using attributes. The following example shows an oscillator node with type set to ‘sawtooth’ and frequency set to 880 Hz.

<?xml version="1.0" encoding="UTF-8"?>
<audio version="1.0">
 <OscillatorNode type="sawtooth" frequency="880"></OscillatorNode>
</audio>

Please follow the research on https://hans.arapoviclindetorp.se and https://www.facebook.com/hanslindetorpresearch/.

Academic publications:

Related Skills

node-connect

353.1k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

111.6k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

353.1k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

353.1k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。