Created
September 25, 2017 13:19
-
-
Save steventhebrave/7c16a72fb940b05b5e5218390418b5bf to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head><title>SOUND</title></head> | |
| <body> | |
| <div>Frequence: <span id="frequency"></span></div> | |
| <script type="text/javascript"> | |
| var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); | |
| var oscillatorNode = audioCtx.createOscillator(); | |
| var gainNode = audioCtx.createGain(); | |
| var mute = true; | |
| var frequency = 500; | |
| var direction = ""; | |
| var volume = 0.8; | |
| var speed = 1; | |
| var grossTune = 5; | |
| var mediumTune = 0.5; | |
| var fineTune = 0.05; | |
| var keys = [ | |
| {key:81, direction:"down", tune:grossTune}, //q | |
| {key:87, direction:"up", tune:grossTune}, //w | |
| {key:69, direction:"down", tune:mediumTune},//e | |
| {key:82, direction:"up", tune:mediumTune}, //r | |
| {key:84, direction:"down", tune:fineTune}, //t | |
| {key:89, direction:"up", tune:fineTune} //y | |
| ]; | |
| oscillatorNode.connect(gainNode); | |
| gainNode.connect(audioCtx.destination) | |
| oscillatorNode.start(); | |
| oscillatorNode.frequency.value = frequency; | |
| gainNode.gain.value = 0; | |
| (function manualLoop() { | |
| setTimeout(function() { | |
| manualLoop(); | |
| if (direction == "up"){ | |
| frequency += speed; | |
| } | |
| if (direction == "down"){ | |
| frequency -= speed; | |
| } | |
| oscillatorNode.frequency.value = frequency; | |
| document.getElementById('frequency').innerHTML = frequency.toFixed(2); | |
| }, 40) | |
| }()); | |
| document.addEventListener('keydown', function(event) { | |
| if (event.keyCode == 32) { // space bar | |
| if (mute) { | |
| gainNode.gain.value = volume; | |
| mute = false; | |
| } else { | |
| gainNode.gain.value = 0; | |
| mute = true; | |
| } | |
| } | |
| for (var i = keys.length - 1; i >= 0; i--) { | |
| if(event.keyCode == keys[i].key) { | |
| direction = keys[i].direction; | |
| speed = keys[i].tune; | |
| } | |
| } | |
| }); | |
| document.addEventListener('keyup', function(event) { | |
| direction = ""; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
I just made a few changes to the original code for a bit more mobile user friendly and the possibility to add an optional argument in the url to set the frequency.
<!DOCTYPE html>
<html>
<head>
<title>Sound -</title>
</head>
<body>
<div>Frequence: <span id="frequency"></span></div>
<button type="button" id="play" onclick="play()">Play</button>
<button type="button" id="pause" onclick="pause()">Pause</button>
<div>
<table>
<tr>
<td>Space - on/off</td>
<td>
</td>
</tr>
<tr>
<td>a - Frequency---</td>
<td>
<button type="button" id="a" onclick="setFrequence(keys[0]);">---</button>
</td>
</tr>
<tr>
<td>z - Frequency+++</td>
<td>
<button type="button" id="z" onclick="setFrequence(keys[1])">+++</button>
</td>
</tr>
<tr>
<td>e - Frequency--</td>
<td>
<button type="button" id="e" onclick="setFrequence(keys[2])">--</button>
</td>
</tr>
<tr>
<td>r - Frequency++</td>
<td>
<button type="button" id="r" onclick="setFrequence(keys[3])">++</button>
</td>
</tr>
<tr>
<td>t - Frequency-</td>
<td>
<button type="button" id="t" onclick="setFrequence(keys[4])">-</button>
</td>
</tr>
<tr>
<td>y - Frequency+</td>
<td>
<button type="button" id="y" onclick="setFrequence(keys[5])">+</button>
</td>
</tr>
</table>
<p>
<a href="https://gist.github.com/steventhebrave/7c16a72fb940b05b5e5218390418b5bf">Source</a> :
<a href="https://gist.github.com/steventhebrave">Author</a>
</p>
</div>
<script type="text/javascript">
var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
var oscillatorNode = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();
var mute = true;
var frequency = 500;
var direction = "";
var volume = 0.8;
var speed = 1;
var grossTune = 5;
var mediumTune = 0.5;
var fineTune = 0.05;
var playButton = document.getElementById("play");
var pauseButton = document.getElementById("pause");
pauseButton.style.visibility = 'hidden';
var keys = [
// {key:81, direction:"down", tune:grossTune, val: -5}, //q
// {key:87, direction:"up", tune:grossTune, val: 5}, //w
// {key:69, direction:"down", tune:mediumTune, val: -1},//e
// {key:82, direction:"up", tune:mediumTune, val: 1}, //r
// {key:84, direction:"down", tune:fineTune, val: -0.25}, //t
// {key:89, direction:"up", tune:fineTune, val: 0.25} //y
{ key: 65, direction: "down", tune: grossTune, val: -5 }, //a
{ key: 90, direction: "up", tune: grossTune, val: 5 }, //z
{ key: 69, direction: "down", tune: mediumTune, val: -1 }, //e
{ key: 82, direction: "up", tune: mediumTune, val: 1 }, //r
{ key: 84, direction: "down", tune: fineTune, val: -0.25 }, //t
{ key: 89, direction: "up", tune: fineTune, val: 0.25 } //y
];
var aButton = document.getElementById("a");
var zButton = document.getElementById("z");
var eButton = document.getElementById("e");
var rButton = document.getElementById("r");
var tButton = document.getElementById("t");
var yButton = document.getElementById("y");
function play() {
playButton.style.visibility = 'hidden';
pauseButton.style.visibility = 'visible';
gainNode.gain.value = volume;
mute = false;
}
function pause() {
playButton.style.visibility = 'visible';
pauseButton.style.visibility = 'hidden';
gainNode.gain.value = 0;
mute = true;
}
pause();
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' +
'([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}
//to use: add this a the end of the url "?freq=<num>" and <num> is a float number
var newFreq = parseFloat(getURLParameter('freq'));
if (newFreq){
var frequency = newFreq;
}
else{
var frequency = 500;
}
oscillatorNode.connect(gainNode);
gainNode.connect(audioCtx.destination)
oscillatorNode.start();
oscillatorNode.frequency.value = frequency;
gainNode.gain.value = 0;
(function manualLoop() {
setTimeout(function() {
manualLoop();
if (direction == "up") {
frequency += speed;
}
if (direction == "down") {
frequency -= speed;
}
oscillatorNode.frequency.value = frequency;
document.getElementById('frequency').innerHTML = frequency.toFixed(2);
}, 40)
}());
document.addEventListener('keydown', function(event) {
if (event.keyCode == 32) { // space bar
if (mute) {
play();
} else {
pause();
}
}
for (var i = keys.length - 1; i >= 0; i--) {
if (event.keyCode == keys[i].key) {
direction = keys[i].direction;
speed = keys[i].tune;
}
}
});
function setFrequence(k) {
frequency += k.val;
}
document.addEventListener('keyup', function(event) {
direction = "";
});
</script>
</body>
</html>(Oh and yeah, i use an azerty keyboard, sorry for being French ahah)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SOUND - by stevethebrave</title>
<style text="text/css">
html, body {
overflow: hidden;
padding: 0;
margin: 0;
font-family: 'Ubuntu', sans-serif;
width: 100vh;
height: 100vh;
font-size: 6vh;
background-color: #000000;
color: #ffffff;
}
#text {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
</style>
</head>
<body>
<div id="text">
<h2>Frequence: <span id="frequency"></span></h2>
<h2>Playing: <span id="playing">False</span></h2>
<p>Gross Tune: (DOWN)Q | W(UP)</p>
<p>Medium Tune: (DOWN)E | R(UP)</p>
<p>Fine Tune: (DOWN)T | Y(UP)</p>
</div>
<script type="text/javascript">
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // Audio Context
var oscillatorNode = audioCtx.createOscillator(); // Creates Oscillator Node
var gainNode = audioCtx.createGain(); // Creates Gain Node
var mute = true; // Muting Variable
var frequency = 500; // Sets Frequency to 500
var direction = ""; // Direction the User Tunes
var volume = 0.8; // Sets Volume At Default
var speed = 1; // Speed of Tune
var grossTune = 5; // Q/W Tuning
var mediumTune = 0.5; // E/R Tuning
var fineTune = 0.05; // T/Y Tuning
var keys = [
{ key: 81, direction: "down", tune: grossTune }, // Q Key\
{ key: 87, direction: "up", tune: grossTune }, // W Key > Fast Tuning
{ key: 65, direction: "down", tune: grossTune }, // A Key\
{ key: 90, direction: "up", tune: grossTune }, // Z Key > Fast Tuning (AZERTY Keyboards)
{ key: 69, direction: "down", tune: mediumTune }, // E Key\
{ key: 82, direction: "up", tune: mediumTune }, // R Key > Medium Tuning
{ key: 84, direction: "down", tune: fineTune }, // T Key\
{ key: 89, direction: "up", tune: fineTune } // Y Key > Slow Tuning
];
oscillatorNode.connect(gainNode); // Connects Oscillator Node to Gain Node
gainNode.connect(audioCtx.destination) // Connects Gain Node To Browser
oscillatorNode.start(); // Starts Node
oscillatorNode.frequency.value = frequency;
gainNode.gain.value = 0; // Makes Gain Value 0 at Default
(function manualLoop() { // Declares manualLoop Function
setTimeout(function() { // After 40 Milliseconds, do this \/
manualLoop();
if (direction == "up"){ // If a Key is Pressed and the Direction is Up, then
frequency += speed; // the Speed is added to the Frequency.
}
if (direction == "down"){ // If a Key is Pressed and the Direction is Down, then
frequency -= speed; // the Speed is subtracted from the Frequency.
}
oscillatorNode.frequency.value = frequency; // Actual Frequency to Frequency Variable.
document.getElementById('frequency').innerHTML = frequency.toFixed(2); // Shows Frequency on Web Page.
}, 40);
}());
document.addEventListener('keydown', function(event) { // Key Presses
if (event.keyCode == 32) { // Space Bar (Mute and Unmute)
if (mute) {
gainNode.gain.value = volume; // Sets Volume Variable to Actual Volume
mute = false; // Turns Mute to False, so if space bar is pressed again, it will be true, due to if statement
document.getElementById("playing").innerHTML = "True"; // ^
} else { // |
gainNode.gain.value = 0; // Sets Volume Variable to 0, Muting |
mute = true; // What this line said: --------------------+
document.getElementById("playing").innerHTML = "False";
}
}
for (var i = keys.length - 1; i >= 0; i--) {
if(event.keyCode == keys[i].key) { // Gets Key Code and Applies to "keys" index
direction = keys[i].direction; // Sends Tuning in Direction of Key Pressed
speed = keys[i].tune; // Sets Tuning Speed
}
}
});
document.addEventListener('keyup', function(event) {
direction = ""; // Sets Direction to Nothing Again
});
</script>
</body>
</html>AZERTY and QWERTY Friendly.
I added some buttons to try to get it to work for phones... the buttons seem to work okay on a desktop but not on a phone :(
`
<title>SOUND - by stevethebrave</title> <style text="text/css">
button{
height:100px;
width:100px;
}
body {
font-family:Verdana, Geneva, sans-serif;
font-size:medium;
text-align: center;
}
</style>
</head>
<body>
<div id="text">
<p/>
<h1>Frequency: <span id="frequency"></span></h1>
<h1>Playing: <span id="playing">False</span></h1>
<p> Gross </p>
<button onmousedown = "beginAction(grossTune)" onmouseup = "endAction()" >Q</button>
<button onmousedown = "beginAction(-grossTune)" onmouseup = "endAction()">W</button>
<p> Medium </p>
<button onmousedown = "beginAction(mediumTune)" onmouseup = "endAction()">E</button>
<button onmousedown = "beginAction(-mediumTune)" onmouseup = "endAction()">R</button>
<p> Fine </p>
<button onmousedown = "beginAction(fineTune)" onmouseup = "endAction()">T</button>
<button onmousedown = "beginAction(-fineTune)" onmouseup = "endAction()">Y</button>
</p>
<button onmousedown = "togglePlayback()" >Play/Pause</button>
</div>
<script type="text/javascript">
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // Audio Context
var oscillatorNode = audioCtx.createOscillator(); // Creates Oscillator Node
var gainNode = audioCtx.createGain(); // Creates Gain Node
var mute = true; // Muting Variable
var frequency = 300; // Sets Frequency to 500
var direction = ""; // Direction the User Tunes
var volume = 0.8; // Sets Volume At Default
var speed = 1; // Speed of Tune
var grossTune = 5; // Q/W Tuning
var mediumTune = 0.5; // E/R Tuning
var fineTune = 0.05; // T/Y Tuning
var df;
var keys = [
{ key: 81, direction: "down", tune: grossTune }, // Q Key\
{ key: 87, direction: "up", tune: grossTune }, // W Key > Fast Tuning
{ key: 65, direction: "down", tune: grossTune }, // A Key\
{ key: 90, direction: "up", tune: grossTune }, // Z Key > Fast Tuning (AZERTY Keyboards)
{ key: 69, direction: "down", tune: mediumTune }, // E Key\
{ key: 82, direction: "up", tune: mediumTune }, // R Key > Medium Tuning
{ key: 84, direction: "down", tune: fineTune }, // T Key\
{ key: 89, direction: "up", tune: fineTune } // Y Key > Slow Tuning
];
oscillatorNode.connect(gainNode); // Connects Oscillator Node to Gain Node
gainNode.connect(audioCtx.destination) // Connects Gain Node To Browser
oscillatorNode.start(); // Starts Node
oscillatorNode.frequency.value = frequency;
gainNode.gain.value = 0; // Makes Gain Value 0 at Default
function dFreq(amount){
frequency += amount;
}
function beginAction(amount){
df = amount;
dFreq(amount);
action_timeout = setInterval("dFreq(df)",100);
}
function endAction(){
if (typeof(action_timeout) != "undefined") clearTimeout(action_timeout);
}
function togglePlayback(){
if (mute) {
gainNode.gain.value = volume; // Sets Volume Variable to Actual Volume
mute = false; // Turns Mute to False, so if space bar is pressed again, it will be true, due to if statement
document.getElementById("playing").innerHTML = "True"; // ^
} else { // |
gainNode.gain.value = 0; // Sets Volume Variable to 0, Muting |
mute = true; // What this line said: --------------------+
document.getElementById("playing").innerHTML = "False";
}
}
(function manualLoop() { // Declares manualLoop Function
setTimeout(function() { // After 40 Milliseconds, do this \/
manualLoop();
if (direction == "up"){ // If a Key is Pressed and the Direction is Up, then
frequency += speed; // the Speed is added to the Frequency.
}
if (direction == "down"){ // If a Key is Pressed and the Direction is Down, then
frequency -= speed; // the Speed is subtracted from the Frequency.
}
oscillatorNode.frequency.value = frequency; // Actual Frequency to Frequency Variable.
document.getElementById('frequency').innerHTML = frequency.toFixed(2); // Shows Frequency on Web Page.
}, 40);
}());
document.addEventListener('keydown', function(event) { // Key Presses
if (event.keyCode == 32) { // Space Bar (Mute and Unmute)
togglePlayback();
}
for (var i = keys.length - 1; i >= 0; i--) {
if(event.keyCode == keys[i].key) { // Gets Key Code and Applies to "keys" index
direction = keys[i].direction; // Sends Tuning in Direction of Key Pressed
speed = keys[i].tune; // Sets Tuning Speed
}
}
if(document.getElementById("b1").mousedown()){
changeFreq(grossTune);
}
});
document.addEventListener('keyup', function(event) {
direction = ""; // Sets Direction to Nothing Again
});
</script>
</body>
Original code changes: https://gist.github.com/darxx/b7e691a7f32041ee8be6d7a12e32f500
Splitted code to functions to make clear what they do.
keyCode - The problem with using keyCode is that non-English keyboards can produce different outputs and even keyboards with different layouts can produce inconsistent results.
And hope it works on mobile. If not.
Tell me more what phone are You using. @nateshields
hey man! just saw your video about this on your channel. Awesome! I'm planning to try it. I'll use your code, if I end up making any changes I'll post it on my repo and leave a comment here.
Btw, that problem you had with the keycode can be solved using mousetrapjs https://craig.is/killing/mice , if you don't mind to add an external library to your code. it's really lightweight though
thanx!
For some reason, no sound is playing for me on any of these scripts?
Google Chrome 79.0.3945.130 gives the following error:
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
Added the start button to account for the "If you create your AudioContext on page load, you’ll have to call resume()" issue from
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, user-scalable=no">
<head><title>SOUND</title></head>
<body>
<style>
button{
height:100px;
width:100px;
}
body {
font-family:Verdana, Geneva, sans-serif;
font-size:medium;
text-align: center;
}
</style>
<div id="controls">
<p>
<button class="start">Start</button>
</p>
<h1>Frequency: <span id="frequency"></span></h1>
<p> Gross
<div>
<button value="q">Q</button>
<button value="w">W</button>
</div>
</p>
<p> Medium
<div>
<button value="e">E</button>
<button value="r">R</button>
</div>
</p>
<p> Fine
<div>
<button value="t">T</button>
<button value="y">Y</button>
</div>
</p>
<p>
<button value="">Play/Pause</button>
</p>
</div>
<script type="text/javascript">
// One-liner to resume playback when user interacted with the page.
document.querySelector('button.start').addEventListener('click', function() {
audioCtx.resume().then(() => {
console.log('Playback resumed successfully');
});
});
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(),
oscillatorNode = audioCtx.createOscillator(),
gainNode = audioCtx.createGain();
var options = {
mute: true,
frequency: 500,
direction: '',
volume: 0.8,
speed: 1,
grossTune: 5,
mediumTune: 0.5,
fineTune: 0.05
};
var keys = [
{
key: 'q',
direction: 'down',
tune: options.grossTune
},
{
key: 'w',
direction: 'up',
tune: options.grossTune
},
{
key: 'e',
direction: 'down',
tune: options.mediumTune
},
{
key: 'r',
direction: 'up',
tune: options.mediumTune
},
{
key: 't',
direction: 'down',
tune: options.fineTune
},
{
key: 'y',
direction: 'up',
tune: options.fineTune
}
];
var frequencyElement = document.getElementById('frequency');
oscillatorNode.connect(gainNode);
gainNode.connect(audioCtx.destination);
oscillatorNode.start();
oscillatorNode.frequency.value = options.frequency;
gainNode.gain.value = 0;
function setDirectionFrequency() {
if (options.direction === 'up'){
options.frequency += options.speed;
}
if (options.direction === 'down'){
options.frequency -= options.speed;
}
oscillatorNode.frequency.value = options.frequency;
frequencyElement.innerHTML = options.frequency.toFixed(2);
}
function setNotes(event) {
if (event.key === '') { // space bar
if (options.mute) {
gainNode.gain.value = options.volume;
options.mute = false;
} else {
gainNode.gain.value = 0;
options.mute = true;
}
}
for (var i = keys.length - 1; i >= 0; i--) {
if(event.key === keys[i].key) {
options.direction = keys[i].direction;
options.speed = keys[i].tune;
}
}
}
function resetDirection() {
options.direction = '';
}
function keyDown(event) {
if (event.target.localName === 'button') {
setNotes({key: event.target.value});
}
}
setInterval(setDirectionFrequency, 40);
var element = document.querySelector('#controls');
element.addEventListener('touchstart', keyDown);
element.addEventListener('touchend', resetDirection);
element.addEventListener('mousedown', keyDown);
element.addEventListener('mouseup', resetDirection);
document.addEventListener('keydown', setNotes);
document.addEventListener('keyup', resetDirection);
</script>
</body>
</html>
Suggestion: Use a repo with Github pages instead of Gist so that people could see the online version and try it very easily. Also much easier to contribute with PR.
Added the start button to account for the "If you create your AudioContext on page load, you’ll have to call resume()" issue from https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, user-scalable=no"> <head><title>SOUND</title></head> <body> <style> button{ height:100px; width:100px; } body { font-family:Verdana, Geneva, sans-serif; font-size:medium; text-align: center; } </style> <div id="controls"> <p> <button class="start">Start</button> </p> <h1>Frequency: <span id="frequency"></span></h1> <p> Gross <div> <button value="q">Q</button> <button value="w">W</button> </div> </p> <p> Medium <div> <button value="e">E</button> <button value="r">R</button> </div> </p> <p> Fine <div> <button value="t">T</button> <button value="y">Y</button> </div> </p> <p> <button value="">Play/Pause</button> </p> </div> <script type="text/javascript"> // One-liner to resume playback when user interacted with the page. document.querySelector('button.start').addEventListener('click', function() { audioCtx.resume().then(() => { console.log('Playback resumed successfully'); }); }); var audioCtx = new (window.AudioContext || window.webkitAudioContext)(), oscillatorNode = audioCtx.createOscillator(), gainNode = audioCtx.createGain(); var options = { mute: true, frequency: 500, direction: '', volume: 0.8, speed: 1, grossTune: 5, mediumTune: 0.5, fineTune: 0.05 }; var keys = [ { key: 'q', direction: 'down', tune: options.grossTune }, { key: 'w', direction: 'up', tune: options.grossTune }, { key: 'e', direction: 'down', tune: options.mediumTune }, { key: 'r', direction: 'up', tune: options.mediumTune }, { key: 't', direction: 'down', tune: options.fineTune }, { key: 'y', direction: 'up', tune: options.fineTune } ]; var frequencyElement = document.getElementById('frequency'); oscillatorNode.connect(gainNode); gainNode.connect(audioCtx.destination); oscillatorNode.start(); oscillatorNode.frequency.value = options.frequency; gainNode.gain.value = 0; function setDirectionFrequency() { if (options.direction === 'up'){ options.frequency += options.speed; } if (options.direction === 'down'){ options.frequency -= options.speed; } oscillatorNode.frequency.value = options.frequency; frequencyElement.innerHTML = options.frequency.toFixed(2); } function setNotes(event) { if (event.key === '') { // space bar if (options.mute) { gainNode.gain.value = options.volume; options.mute = false; } else { gainNode.gain.value = 0; options.mute = true; } } for (var i = keys.length - 1; i >= 0; i--) { if(event.key === keys[i].key) { options.direction = keys[i].direction; options.speed = keys[i].tune; } } } function resetDirection() { options.direction = ''; } function keyDown(event) { if (event.target.localName === 'button') { setNotes({key: event.target.value}); } } setInterval(setDirectionFrequency, 40); var element = document.querySelector('#controls'); element.addEventListener('touchstart', keyDown); element.addEventListener('touchend', resetDirection); element.addEventListener('mousedown', keyDown); element.addEventListener('mouseup', resetDirection); document.addEventListener('keydown', setNotes); document.addEventListener('keyup', resetDirection); </script> </body> </html>
this one works, and UI better
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I would add info on the keybindings at the bottom of the page contents so that you don't have to re-read the code every time you want to generate a sound:
, and also rework the
<span id="frequency"></span>into an<input type="number" id="frequency" min="0.00" step="0.01" />+ add listeners to it.Which I'll probably do because this sounds like fun. Just gotta figure out how to implement corresponding visuals and add multiple sound channels, etc.