steventhebrave/make-sounds.html

ghost · 2017-12-04T05:58:03Z

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

nateshields · 2018-01-18T22:53:42Z

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>

`

darxx · 2019-02-01T08:50:45Z

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

ElusiveByte · 2019-06-01T08:22:32Z

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!

ITCMD · 2020-01-21T21:25:52Z

For some reason, no sound is playing for me on any of these scripts?

salamantos · 2020-01-29T19:22:29Z

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.

haveboard · 2020-01-30T22:12:28Z

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>

farooqkz · 2021-11-06T18:47:57Z

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.

zhanglongqi · 2022-03-09T12:22:48Z

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

steventhebrave/make-sounds.html

ghost commented Dec 4, 2017

nateshields commented Jan 18, 2018

darxx commented Feb 1, 2019

ElusiveByte commented Jun 1, 2019

ITCMD commented Jan 21, 2020

salamantos commented Jan 29, 2020

haveboard commented Jan 30, 2020

farooqkz commented Nov 6, 2021

zhanglongqi commented Mar 9, 2022

	<!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>