Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<!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 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:

<div>
    <ul>
        <li>Space - on/off</li>
        <li>Q - Frequency+++</li>
        <li>W - Frequency---</li>
        <li>E - Frequency++</li>
        <li>R - Frequency--</li>
        <li>T - Frequency+</li>
        <li>Y - Frequency-</li>
    </ul>
</div>

, 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.

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment