In this webpage we present a web browser plug-in for real-time audio synthesis. The plug-in runs the Pure Data (Pd) sound synthesis engine within the web browser.
The plug-in enables dynamic multimedia content where sound plays an important role and the playback of static sound files is not sufficient.
The project is being developed by the Interactive Sonic Systems Department at the Music Technology Group in Barcelona, Spain.
Publications related to this project:
ICMC2004: An Internet Browser Plug-in for Real-time Audio Synthesis using Pure Data
Description
Usage
Embedding
First we have to embed the plug-in in the website loading a patch:
<object id="pdx" classid="CLSID:3F795FF5-1732-4114-8A3C-C46FA0288ACC" type="audio/x-pd" codebase="http://www.iua.upf.es/~malonso/pdplugin/pdcontrol-last.cab#version=0,1,0,0"> <param name="src" value="pdPatch.pd"> <embed type="audio/x-pd" src="pdPatch.pd" hidden="true" pluginspace="http://www.iua.upf.es/~malonso/pdplugin/pdplugin-last.xpi"></embed> </object>
Scripting
Then we need a JavaScript handler of the plug-in:
<script language="javascript"> var pd; // get the plugin handler if(document.all) pd = window.document.pdx; // ie else pd = document.embeds[0]; // netscape/mozilla </script>
Once we have the handler we can start sending messages using JavaScript.
The avaliable plug-in methods are:
start(): Starts the audio output ( same as send('pd dsp',1) )
stop(): Stops the audio output ( same as send('pd dsp',0) )
send(name, value): Sends a message to pd, the name is the receive symbol in pd
To receive the new 'freq' value, for example, we need a receiving symbol in our PD patch:

Then we can send a message using JavaScript:
The avaliable plug-in methods are:
start(): Starts the audio output ( same as send('pd dsp',1) )
stop(): Stops the audio output ( same as send('pd dsp',0) )
send(name, value): Sends a message to pd, the name is the receive symbol in pd
To receive the new 'freq' value, for example, we need a receiving symbol in our PD patch:

Then we can send a message using JavaScript:
<a href="javascript:pd.send('freq',440);">Set frequency to 440hz</a>
Installation
Internet Explorer
It will install automatically the first time you run the plug-in (try loading one of the examples below).
Netscape/Mozilla Win32
Pd Plug-in Setup 0.1 - You can also use this link to trigger de automatic installer of your browser.
To check if the installation was succesfull address your browser to "about:plugins". A "Pd Plug-in" should appear in the Installed Plug-ins list.
To check if the installation was succesfull address your browser to "about:plugins". A "Pd Plug-in" should appear in the Installed Plug-ins list.
Netscape/Mozilla GNU/Linux
Pd Plug-in Linux 0.2 - Read the Readme file for installation instructions
Netscape/Mozilla Mac OS X
Looking for contributors.
Pd features like file access and network access can be used by a malicious patch.
We assume no responsability for any damage caused by the plug-in.
Examples
Once you have the plug-in installed you can check these examples:
Download all examples in one file with source code: pdplugin-demos.zip
- Audio and messaging system test: Test 1
- JavaScript message sending test: Test 2
- More complex test with some HTML form element: Test 3
- Simple Flash -> Plug-in message example: Flash Test 1
- More complex flash example: Flash Test 2
Download all examples in one file with source code: pdplugin-demos.zip
Change Log
Version 0.2 (30 Jan 2006):
- Bugfixes
- First Public Release
Known Bugs
Netscape/Mozilla Win32 Version
- Sometimes audio suddenly stops and the plug-in has to be restarted.