WebAudio OSC Output for use with Wekinator
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | |
<html> <head> | |
<title>WebAudio OSC Output Example - 2 Variables</title> | |
<!-- By Scott Hawley @drscotthawley. Modified from https://github.com/automata/osc-web/blob/master/web-side/app.html | |
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! --> | |
</head> | |
<body> | |
<h2>WebAudio OSC Output Example - 2 Variables</h2> | |
<p>Following <a href="https://www.jroehm.com/2015/10/a-simple-guide-to-use-osc-in-the-browser/">instructions | |
by Juergen Rohm</a>, I grabbed the <a href="https://github.com/automata/osc-web">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> | |
<br> | |
<hr/> | |
<div>Listening on port 12000 (<a href="http://www.wekinator.org/">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="http://drscotthawley.github.io">Scott Hawley</a></p> | |
<script src="http://127.0.0.1:8081/socket.io/socket.io.js"></script> | |
<script> | |
//==================== WebSocket-handling Code ============ | |
socket = io.connect('http://127.0.0.1', { port: 8081, rememberTransport: false}); | |
console.log('oi'); | |
socket.on('connect', function() { | |
// sends to socket.io server the host/port of oscServer | |
// and oscClient | |
socket.emit('config', | |
{ | |
server: { | |
port: 12000, // listens on this port | |
host: '127.0.0.1' | |
}, | |
client: { | |
port: 3334, // sends on this port (unused) | |
host: '127.0.0.1' | |
} | |
} | |
); | |
}); | |
//==================== Main WebAudio-handling Code ============ | |
if ((window.AudioContext === undefined) && (window.webkitAudioContext === undefined)) { | |
//return | |
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' | |
oscillator.connect(gainNode); | |
gainNode.connect(audioCtx.destination); | |
// 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 | |
</script> | |
<!--- 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