Commit 152158b9 authored by Karan Goel's avatar Karan Goel
Browse files

music sounds good

parent 67e4d335
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Whitney Music Box in HTML5</title> <title>Custom Music Box</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- midi.js package --> <!-- midi.js package -->
<script src="./js/Color/SpaceW3.js" type="text/javascript"></script> <script src="./js/Color/SpaceW3.js" type="text/javascript"></script>
...@@ -27,11 +27,11 @@ ...@@ -27,11 +27,11 @@
#wave { #wave {
width: 100%; width: 100%;
height: 600px; height: 200px;
margin-bottom: 30px; margin-bottom: 30px;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-300px); transform: translateY(-100px);
} }
</style> </style>
</head> </head>
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
<script type="text/javascript"> <script type="text/javascript">
var nbrPoints = 48; var nbrPoints = 76;
var cycleLength = 60 * 3; // 60*n minutes var cycleLength = 60 * 3; // 60*n minutes
var startTime = (new Date()).getTime(); var startTime = (new Date()).getTime();
var PI = 3.1415927; var PI = 3.1415927;
...@@ -49,8 +49,6 @@ var PI2 = PI * 2; ...@@ -49,8 +49,6 @@ var PI2 = PI * 2;
var tines = []; var tines = [];
var lastSound = []; var lastSound = [];
var instrument = 0;
var data = []; var data = [];
var waveform = new Waveform({ var waveform = new Waveform({
...@@ -65,16 +63,24 @@ gradient.addColorStop(1.0, "#ff1b00"); ...@@ -65,16 +63,24 @@ gradient.addColorStop(1.0, "#ff1b00");
waveform.innerColor = gradient; waveform.innerColor = gradient;
var instrument = 4;
RefreshFrame = function () { RefreshFrame = function () {
var speed = (2 * PI * nbrPoints) / cycleLength; var speed = (PI2 * nbrPoints) / cycleLength;
var ms = (new Date()).getTime(); var ms = (new Date()).getTime();
var timer = (ms - startTime) * .001 * speed; var timer = (ms - startTime) * .001 * speed;
for (var i = 0; i < nbrPoints; ++i) { for (var i = 0; i < nbrPoints; ++i) {
var r = (i + 1) / nbrPoints; var r = (i + 1) / nbrPoints;
var a = timer * r; var a = timer * r;
if (Math.floor(a / PI2) !== Math.floor(tines[i] / PI2)) { if (Math.floor(a / PI2) !== Math.floor(tines[i] / PI2)) {
MIDI.noteOn(instrument, i + 21, 100, 0); delay = i / 4;
MIDI.noteOn(instrument, i + 21 + 36, 100, 0); velocity = 127;
note = MIDI.pianoKeyOffset + i;
MIDI.noteOn(instrument, note, velocity, delay);
MIDI.noteOn(0, note, velocity, delay);
lastSound[i] = ms; lastSound[i] = ms;
data.push(Math.cos(i/25) - 0.2 + r*0.3); data.push(Math.cos(i/25) - 0.2 + r*0.3);
...@@ -89,17 +95,20 @@ RefreshFrame = function () { ...@@ -89,17 +95,20 @@ RefreshFrame = function () {
window.onload = function () { window.onload = function () {
MIDI.loadPlugin({ MIDI.loadPlugin({
soundfontUrl: "./soundfont/", soundfontUrl: "./soundfont/",
instruments: [ "acoustic_grand_piano", "synth_drum", "pad_2_warm"], instruments: [
"acoustic_grand_piano",
"synth_drum",
"pad_2_warm",
"sitar",
"bright_acoustic_piano"
],
callback: function() { callback: function() {
MIDI.programChange(0, 0); MIDI.programChange(0, 0);
MIDI.programChange(1, 118); MIDI.programChange(1, 118);
MIDI.programChange(2, 89); MIDI.programChange(2, 89);
// for (var i = 0; i < nbrPoints; ++i) { MIDI.programChange(3, 104);
// if (i % 7 === 0) MIDI.noteOn(0, i + 21, 100, 0); MIDI.programChange(4, 1);
// lastSound[i] = 0;
// tines[i] = 0;
// }
// startTime = (new Date()).getTime();
setInterval(RefreshFrame, 200); setInterval(RefreshFrame, 200);
} }
}); });
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment