Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
WebAudio OSC Output for use with Wekinator
<html> <head>
<title>WebAudio OSC Output Example - 2 Variables</title>
<!-- By Scott Hawley @drscotthawley. Modified from
No additional license restrictions are introduced with these modifications; the automata/osc-web site gives no license info.
Thus as far as this author is concerned: "unlimited license": feel free to use & modify in any way you wish! -->
<h2>WebAudio OSC Output Example - 2 Variables</h2>
<p>Following <a href="">instructions
by Juergen Rohm</a>, I grabbed the <a href="">Open Sound Control Web Bridge</a>
and hooked it up to some WebAudio code for controlling the frequency of an oscillator.</p>
<p>To use it, follow the instructions on either Juergen's page or the OSC-Web github page, and run the bridge app. ("node bridge.js").
Then just open this HTML page.<p>
<p><i>Note that reloading the web page typically causes the OSC bridge server to crash, so you'll need to re-run it.</i></p>
<div>Listening on port 12000 (<a href="">Wekinator</a> default).<br>First input adjusts the frequency, second input adjusts the gain.<div>
<p>Received Wekinator OSC message: <span id="status"></span></p>
<p>Current frequency is:<span id="frequency"></span> Hz<br>
Current gain is:<span id="gain"></span></p>
<hr />
<p>--<a href="">Scott Hawley</a></p>
<script src=""></script>
//==================== WebSocket-handling Code ============
socket = io.connect('', { port: 8081, rememberTransport: false});
socket.on('connect', function() {
// sends to server the host/port of oscServer
// and oscClient
server: {
port: 12000, // listens on this port
host: ''
client: {
port: 3334, // sends on this port (unused)
host: ''
//==================== Main WebAudio-handling Code ============
if ((window.AudioContext === undefined) && (window.webkitAudioContext === undefined)) {
alert('The Web Audio API is not supported in your browser!');
// create web audio api context
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// create Oscillator and gain node
var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();
// connect oscillator -> gain node -> 'speakers'
// Choices for initial frequency and volume
var initialFreq = 440; // value in Hertz
var initialGain = 0.2; // tip: Don't start it too loud
// Assign options for the oscillator
oscillator.type = 'sine';
oscillator.frequency.value = initialFreq;
oscillator.start(0); // Play the tone
gainNode.gain.value = initialGain; // Note that we waited until after the osc. was started to "turn up" the gain
//=============================== end main Webaudio code
//============== When we get a socket message ==============
socket.on('message', function(obj) {
var status = document.getElementById("status");
// status[0] is the message name (from wekinator), the other elements of status are the values
msg_name = obj[0]
if ('/wek/outputs' == msg_name) {
status.innerHTML = obj // update the 'status' display with what was received.
freq_factor = obj[1] / 0.5 // Middle of Wekinator range will leave freq at Initial value
gain_factor = obj[2] / 0.5 // Middle of Wekinator range will leave gain at Initial value
// Change the oscillator values
oscillator.frequency.value = initialFreq * freq_factor
gainNode.gain.value = initialGain * gain_factor
// Update the display
frequency.innerHTML = oscillator.frequency.value
gain.innerHTML = gainNode.gain.value
} else {
console.log('Ignoring non-Wekinator socket message:'+obj);
}); // end of socket.on
<!--- Unused: <button onclick="socket.emit('message', '/foobar');">Send OSC message</button> -->
</body> </html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment