Skip to content

Instantly share code, notes, and snippets.

@brianmcaudill

brianmcaudill/tetris-song-js-8-bit.html

Last active August 4, 2024 16:05
Show Gist options
  • Save brianmcaudill/6e9cd15d7fe9d89d5a03271e9a7057a6 to your computer and use it in GitHub Desktop.
Save brianmcaudill/6e9cd15d7fe9d89d5a03271e9a7057a6 to your computer and use it in GitHub Desktop.
Download ZIP
tetris song in javascript
Raw
tetris-song-js-8-bit.html
<!DOCTYPE html>
<html>
<head>
<title>Tetris Theme with Web Audio API</title>
</head>
<body>
<!-- Button to trigger the song -->
<button onclick="playTetrisTheme()">Play Tetris Theme</button>
<script>
function playTetrisTheme() {
// Create an audio context
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
// Frequencies for the notes in Hz (C4 to B4)
var frequencies = {
'E4': 329.63,
'B4': 493.88,
'C5': 523.25,
'D5': 587.33,
'A4': 440.00,
'F5': 698.46,
'G5': 783.99,
'Ab4': 415.30
};
// Right hand notes with volume and duration for each note
var rightHandPattern = [
{note: 'E4', volume: 0.5, duration: 0.3}, {note: 'B4', volume: 0.5, duration: 0.3}, {note: 'C5', volume: 0.5, duration: 0.3}, {note: 'D5', volume: 0.5, duration: 0.3}, {note: 'C5', volume: 0.5, duration: 0.3}, {note: 'B4', volume: 0.5, duration: 0.3}, {note: 'A4', volume: 0.5, duration: 0.3},
{note: 'A4', volume: 0.5, duration: 0.3}, {note: 'C5', volume: 0.5, duration: 0.3}, {note: 'E4', volume: 0.5, duration: 0.3}, {note: 'D5', volume: 0.5, duration: 0.3}, {note: 'C5', volume: 0.5, duration: 0.3}, {note: 'B4', volume: 0.5, duration: 0.3},
{note: 'C5', volume: 0.5, duration: 0.3}, {note: 'D5', volume: 0.5, duration: 0.3}, {note: 'E4', volume: 0.5, duration: 0.3}, {note: 'C5', volume: 0.5, duration: 0.3}, {note: 'A4', volume: 0.5, duration: 0.3}, {note: 'A4', volume: 0.5, duration: 0.3},
{note: 'D5', volume: 0.5, duration: 0.3}, {note: 'F5', volume: 0.5, duration: 0.3}, {note: 'A4', volume: 0.5, duration: 0.3}, {note: 'G5', volume: 0.5, duration: 0.3}, {note: 'F5', volume: 0.5, duration: 0.3}, {note: 'E4', volume: 0.5, duration: 0.3},
{note: 'C5', volume: 0.5, duration: 0.3}, {note: 'E4', volume: 0.5, duration: 0.3}, {note: 'D5', volume: 0.5, duration: 0.3}, {note: 'C5', volume: 0.5, duration: 0.3}, {note: 'B4', volume: 0.5, duration: 0.3},
{note: 'B4', volume: 0.5, duration: 0.3}, {note: 'C5', volume: 0.5, duration: 0.3}, {note: 'D5', volume: 0.5, duration: 0.3}, {note: 'E4', volume: 0.5, duration: 0.3}, {note: 'C5', volume: 0.5, duration: 0.3}, {note: 'A4', volume: 0.5, duration: 0.3}, {note: 'A4', volume: 0.5, duration: 0.3}
];
// Left hand notes with volume and duration for each note
var leftHandPattern = [
{note: 'E4', volume: 0.3, duration: 0.6}, {note: 'A4', volume: 0.3, duration: 0.6}, {note: 'Ab4', volume: 0.3, duration: 0.6}, {note: 'E4', volume: 0.3, duration: 0.6}, {note: 'A4', volume: 0.3, duration: 0.6},
{note: 'D5', volume: 0.3, duration: 0.6}, {note: 'C5', volume: 0.3, duration: 0.6}, {note: 'E4', volume: 0.3, duration: 0.6}, {note: 'A4', volume: 0.3, duration: 0.6},
{note: 'E4', volume: 0.3, duration: 0.6}, {note: 'A4', volume: 0.3, duration: 0.6}, {note: 'Ab4', volume: 0.3, duration: 0.6}, {note: 'E4', volume: 0.3, duration: 0.6}, {note: 'A4', volume: 0.3, duration: 0.6},
{note: 'D5', volume: 0.3, duration: 0.6}, {note: 'C5', volume: 0.3, duration: 0.6}, {note: 'E4', volume: 0.3, duration: 0.6}, {note: 'A4', volume: 0.3, duration: 0.6},
{note: 'A4', volume: 0.3, duration: 0.6}, {note: 'Ab4', volume: 0.3, duration: 0.6}, {note: 'A4', volume: 0.3, duration: 0.6}, {note: 'Ab4', volume: 0.3, duration: 0.6},
{note: 'A4', volume: 0.3, duration: 0.6}, {note: 'Ab4', volume: 0.3, duration: 0.6}, {note: 'A4', volume: 0.3, duration: 0.6}, {note: 'Ab4', volume: 0.3, duration: 0.6},
{note: 'E4', volume: 0.3, duration: 0.6}, {note: 'A4', volume: 0.3, duration: 0.6}, {note: 'Ab4', volume: 0.3, duration: 0.6}, {note: 'E4', volume: 0.3, duration: 0.6}, {note: 'A4', volume: 0.3, duration: 0.6},
{note: 'D5', volume: 0.3, duration: 0.6}, {note: 'C5', volume: 0.3, duration: 0.6}, {note: 'E4', volume: 0.3, duration: 0.6}, {note: 'A4', volume: 0.3, duration: 0.6},
{note: 'E4', volume: 0.3, duration: 0.6}, {note: 'A4', volume: 0.3, duration: 0.6}, {note: 'Ab4', volume: 0.3, duration: 0.6}, {note: 'E4', volume: 0.3, duration: 0.6}, {note: 'A4', volume: 0.3, duration: 0.6},
{note: 'D5', volume: 0.3, duration: 0.6}, {note: 'C5', volume: 0.3, duration: 0.6}, {note: 'E4', volume: 0.3, duration: 0.6}, {note: 'A4', volume: 0.3, duration: 0.6}
];
// Function to play a tone
function playTone(frequency, volume, startTime, duration) {
var oscillator = audioContext.createOscillator();
var gainNode = audioContext.createGain();
oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
oscillator.type = 'square'; // Square wave for 8-bit sound
gainNode.gain.setValueAtTime(volume, audioContext.currentTime);
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.start(startTime);
oscillator.stop(startTime + duration);
}
// Function to play the pattern
function playPattern(pattern, startTimeOffset = 0) {
var startTime = audioContext.currentTime + startTimeOffset;
pattern.forEach((noteData, index) => {
var frequency = frequencies[noteData.note];
var volume = noteData.volume;
var duration = noteData.duration;
playTone(frequency, volume, startTime + index * duration, duration);
});
}
// Play the right and left hand patterns in sync
function playTetris() {
playPattern(rightHandPattern);
playPattern(leftHandPattern);
}
// Start playing the Tetris theme and loop every 30 seconds
playTetris();
setInterval(playTetris, 30000);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment