Imperial March

Developer
Marius Balaj
Size
3,190 Kb
Views
48,576
  1. Imperial March Previews
  2. Imperial March HTML Codes
  3. Imperial March CSS Codes
  4. Imperial March JS Codes

How do I make an imperial march?

Imperial March in HTML5 Audio API. What is a imperial march? How do you make a imperial march? This script and codes were developed by Marius Balaj on 07 July 2022, Thursday.

Imperial March Previews
IQ Test

Imperial March - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Imperial March</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap"> <img src="http://balajmarius.github.io/imperial-march/images/helmet.png" /> <button id="play">Press to play</button> <dl> <dt>Imperial March in HTML5 Audio API.</dt> </dl> </div> <script src="js/index.js"></script>
</body>
</html>

Imperial March - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:900);
html,
body,
h1,
dl { margin: 0; padding: 0;
}
/* =========== */
body { background: #f4f4f4; color: #000000; font-family: Roboto;
}
.wrap { text-align: center; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%);
}
.wrap img { margin: 30px 0; position: relative; right: -60px;
}
.wrap button { display: block; width: 200px; margin: 0 auto; font-family: Roboto; padding: 15px 0; font-size: 18px; border-radius: 5px; cursor: pointer; text-transform: uppercase; background: #000000; color: #ffffff; outline: 0; border: 0;
}
.wrap dl {	margin: 25px 0 5px; list-style-type: none; width: 100%; float: left; text-align: center;
}
.wrap dl dt {	font-size: 11px;	display: block;	width: 100%;	margin: 0 0 5px;	text-transform: uppercase;	color: #717171;	line-height: 1.6;
}
.wrap dl dd { display: inline-block; font-size: 32px; cursor: pointer; margin: 0;
}
.wrap dl dd.twitter {	margin: 0 3px;
}
.wrap dl dd i {	color: #dc4a38;	display: block;
}
.wrap dl dd i[class*="facebook"] {	color: #3c5a98;
}
.wrap dl dd i[class*="twitter"] {	color: #34cbff;
}

Imperial March - Script Codes JS Codes

'use strict';
var playBtn = document.getElementById('play'), play = false;
var IMPERIAL_MARCH = function() { var that = this, context = new window.AudioContext() || new window.webkitAudioContext(), oscillator, panner, volume, vol; //------------ this.frequencies = { 'c': 261, 'd': 294, 'e': 329, 'f': 349, 'g': 391, 'gS': 415, 'a': 440, 'aS': 455, 'b': 466, 'cH': 523, 'cSH': 554, 'dH': 587, 'dSH': 622, 'eH': 659, 'fH': 698, 'fSH': 740, 'gH': 784, 'gSH': 830, 'aH': 880, 'P': 0 // stands for pause }; //------------ this.notes = [ ['a', 500], ['a', 500], ['a', 500], ['f', 350], ['cH', 150], ['a', 500], ['f', 350], ['cH', 150], ['a', 650], ['P', 150], //delay 150 ['eH', 500], ['eH', 500], ['eH', 500], ['fH', 350], ['cH', 150], ['gS', 500], ['f', 350], ['cH', 150], ['a', 650], ['P', 150], //delay 150 ['aH', 500], ['a', 300], ['a', 150], ['aH', 400], ['gSH', 200], ['gH', 200], ['fSH', 125], ['fH', 125], ['fSH', 250], ['P', 250], //delay 250 ['aS', 250], ['dSH', 400], ['dH', 200], ['cSH', 200], ['cH', 125], ['b', 125], ['cH', 250], ['P', 250], //delay 250 ['f', 125], ['gS', 500], ['f', 375], ['a', 125], ['cH', 500], ['a', 375], ['cH', 125], ['eH', 650], ['aH', 500], ['a', 300], ['a', 150], ['aH', 400], ['gSH', 200], ['gH', 200], ['fSH', 125], ['fH', 125], ['fSH', 250], ['P', 250], //delay 250 ['aS', 250], ['dSH', 400], ['dH', 200], ['cSH', 200], ['cH', 125], ['b', 125], ['cH', 250], ['P', 250], //delay 250 ['f', 250], ['gS', 500], ['f', 375], ['cH', 125], ['a', 500], ['f', 375], ['cH', 125], ['a', 650] ]; //------------ this.play = function() { console.log('%c Imperial March started ', 'background:green;color:white;'); //change btn playBtn.innerText = 'Press to stop'; play = true; //current note var i = 0; function playnote() { console.log('current note: ' + that.notes[i][0]); var frequency = that.frequencies[that.notes[i][0]], duration = that.notes[i][1]; panner = context.createStereoPanner(); volume = context.createGain(); panner.connect(context.destination); volume.gain.value = .1; volume.connect(panner); oscillator = context.createOscillator(); oscillator.type = 'square'; //update frequency oscillator.frequency.value = frequency / 2; oscillator.connect(volume); //start sound oscillator.start(); //------------------ setTimeout(function() { //stop current oscillator.stop(); if (i === that.notes.length - 1) { play = false; playBtn.innerText = 'Press to play'; } //increment if (i < that.notes.length) { i++; } //play next if (play) playnote(); }, duration); } //start playnote(); }; //------------ this.stop = function() { console.log('%c Imperial March stopped ', 'background:red;color:white;'); oscillator.stop(0); playBtn.innerText = 'Press to play'; play = false; };
};
//-----------------
var imperialMarch = new IMPERIAL_MARCH();
playBtn.addEventListener('click', function() { if (!play) { imperialMarch.play(); } else { imperialMarch.stop(); }
});
Imperial March - Script Codes
Imperial March - Script Codes
Home Page Home
Developer Marius Balaj
Username mariusbalaj
Uploaded July 07, 2022
Rating 4
Size 3,190 Kb
Views 48,576
Do you need developer help for Imperial March?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Marius Balaj (mariusbalaj) Script Codes
Name
Flat Turntable Icon and Animation in Pure CSS
Social Buttons v2
Codepen CSS Illustration
Flat iPhone with Next Post Animation
JCalculator
Apple TV poster
Symphony of Math.PI
One element Vinyl
Social Buttons Slide
Folding Effect on Hover
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!