Skip to content

Instantly share code, notes, and snippets.

@darxx

darxx/make-sounds.html

Forked from steventhebrave/make-sounds.html
Last active January 28, 2020 21:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save darxx/b7e691a7f32041ee8be6d7a12e32f500 to your computer and use it in GitHub Desktop.
Save darxx/b7e691a7f32041ee8be6d7a12e32f500 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
make-sounds.html
<!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">
<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">
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>
@haveboard
Copy link

haveboard commented Jan 28, 2020 •
edited

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>

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