deac/MIDI.js
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

detangle loader, add configuration MIDI.soundfontUrl to set the base-path to your soundfonts

Browse source
This commit is contained in:
Michael Deal 2013-01-11 18:05:42 -08:00
parent f723a45652
commit d0cf6085d7
9 changed files with 51 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
AudioTest.html
View file

@ -5,7 +5,6 @@
<script src="./js/MIDI/loadPlugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Player.js" type="text/javascript"></script>
<script src="./js/Widgets/Loader.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.script.js" type="text/javascript"></script>
<!-- base64 packages -->
@ -15,13 +14,11 @@
<body>
<script type="text/javascript">
var loader;
window.onload = function () {
loader = new widgets.Loader;
MIDI.loadPlugin({
soundfontUrl: "./soundfont/",
instruments: [ "acoustic_grand_piano", "synth_drum" ], // or multiple instruments
callback: function() {
loader.stop();
MIDI.programChange(0, 0);
MIDI.programChange(1, 118);
for (var n = 0; n < 100; n ++) {

6
MIDIPlayer.html
View file

@ -154,9 +154,6 @@ if (typeof(console) === "undefined") var console = { log: function() { } };
// Begin loading indication.
var player;
var loader = new widgets.Loader({
message: "loading: Soundfont..."
});
// Tchaikovsky via Disklavier World.
var songid = 0;
@ -205,6 +202,7 @@ Event.add(window, "load", function(event) {
colors.appendChild(d);
}
//
MIDI.loader = new widgets.Loader;
MIDI.loadPlugin(function () {
// this is the language we are running in
var title = document.getElementById("title");
@ -230,7 +228,7 @@ Event.add(window, "load", function(event) {
ColorSphereBackground();
MIDIPlayerPercentage(player);
//
loader.stop();
MIDI.loader.stop();
});
});

9
WhitneyMusicBox.html
View file

@ -66,7 +66,7 @@ RefreshFrame = function () {
var len = circleRadius * (1 + 1.0 / nbrPoints - r);
if (Math.floor(a / PI2) !== Math.floor(tines[i] / PI2)) {
MIDI.noteOn(0, i + 21, 100, 0);
MIDI.noteOn(1, i + 21 + 36, 100, 0);
MIDI.noteOn(0, i + 21 + 36, 100, 0);
lastSound[i] = ms;
}
var x = (cx + Math.cos(a) * len);
@ -85,10 +85,11 @@ RefreshFrame = function () {
};
window.onload = function () {
MIDI.loader = new widgets.Loader;
MIDI.loadPlugin({
instrument: "acoustic_grand_piano", // or multiple instruments
callback: function() {
loader.stop();
MIDI.loader.stop();
var canvas = document.getElementById('mycanvas');
canvas.style.width = gw + "px";
canvas.style.width = gw + "px";
@ -106,10 +107,6 @@ window.onload = function () {
});
};
var loader = new widgets.Loader({
message: "loading: Music Box..."
});
</script>
</body>
</html>

6
js/MIDI/Player.js
View file

@ -1,11 +1,11 @@
/*
-------------------------------------
MIDI.Player : 0.3
-------------------------------------
https://github.com/mudcube/MIDI.js
-------------------------------------
requires jasmid
#jasmid
-------------------------------------
*/
if (typeof (MIDI) === "undefined") var MIDI = {};

14
js/MIDI/Plugin.js
View file

@ -2,7 +2,7 @@
--------------------------------------------
MIDI.Plugin : 0.3 : 11/20/2012
--------------------------------------------
https://github.com/mudx/MIDI.js
https://github.com/mudcube/MIDI.js
--------------------------------------------
MIDI.WebAudioAPI
MIDI.Flash
@ -14,7 +14,7 @@
--------------------------------------------
setMute?
getInstruments?
-------------------------------------
*/
if (typeof (MIDI) === "undefined") var MIDI = {};
@ -49,8 +49,8 @@ if (window.AudioContext || window.webkitAudioContext) (function () {
ctx.decodeAudioData(buffer, function (buffer) {
var msg = url;
while (msg.length < 3) msg += "&nbsp;";
if (typeof (loader) !== "undefined") {
loader.message(synth.instrument + "<br>Processing: " + (index / 87 * 100 >> 0) + "%<br>" + msg);
if (typeof (MIDI.loader) !== "undefined") {
MIDI.loader.update(null, synth.instrument + "<br>Processing: " + (index / 87 * 100 >> 0) + "%<br>" + msg);
}
buffer.id = url;
bufferList[index] = buffer;
@ -330,7 +330,7 @@ if (window.Audio) (function () {
var instrumentId = synth.number;
notes[instrumentId+""+id] = soundManager.createSound({
id: id,
url: "./soundfont/"+instrument+"-mp3/" + id + ".mp3",
url: MIDI.soundfontUrl + instrument + "-mp3/" + id + ".mp3",
multiShot: true,
autoLoad: true,
onload: onload
@ -340,8 +340,8 @@ if (window.Audio) (function () {
var loaded = [];
var onload = function () {
loaded.push(this.sID);
if (typeof (loader) === "undefined") return;
loader.message("Processing: " + this.sID);
if (typeof (MIDI.loader) === "undefined") return;
MIDI.loader.update(null, "Processing: " + this.sID);
};
for (var i = 0; i < 88; i++) {
var id = noteReverse[i + 21];

6
js/MIDI/audioDetect.js
View file

@ -1,13 +1,13 @@
/*
-------------------------------------
MIDI.audioDetect : 0.3
-------------------------------------
https://github.com/mudx/MIDI.js
https://github.com/mudcube/MIDI.js
-------------------------------------
Probably, Maybe, No... Absolutely!
-------------------------------------
Test to see what types of <audio> MIME types are playable by the browser.
-------------------------------------
*/
if (typeof(MIDI) === "undefined") var MIDI = {};

43
js/MIDI/loadPlugin.js
View file

@ -2,7 +2,7 @@
-----------------------------------------------------------
MIDI.loadPlugin : 0.1 : 11/20/2012
-----------------------------------------------------------
https://github.com/mudx/MIDI.js
https://github.com/mudcube/MIDI.js
-----------------------------------------------------------
MIDI.loadPlugin({
instrument: "acoustic_grand_piano", // or 1 (default)
@ -26,6 +26,8 @@ MIDI.loadPlugin = function(conf) {
MIDI.Soundfont[data] = true;
return data;
});
///
MIDI.soundfontUrl = conf.soundfontUrl || MIDI.soundfontUrl || "./soundfont/";
/// Detect the best type of audio to use.
MIDI.audioDetect(function(types) {
var type = "";
@ -60,15 +62,13 @@ var connect = {};
connect.java = function(filetype, instruments, callback) {
// works well cross-browser, and fully featured, but has delay when Java machine starts.
if (typeof(loader) === "undefined") var loader;
if (loader) loader.message("Soundfont (500KB)<br>Java Interface...");
if (MIDI.loader) MIDI.loader.message("Java API...");
MIDI.Java.connect(callback);
};
connect.flash = function(filetype, instruments, callback) {
// fairly quick, but requires loading of individual MP3s (more http requests).
if (typeof(loader) === "undefined") var loader;
if (loader) loader.message("Soundfont (2MB)<br>Flash Interface...");
if (MIDI.loader) MIDI.loader.message("Flash API...");
DOMLoader.script.add({
src: "./inc/SoundManager2/script/soundmanager2.js",
verify: "SoundManager",
@ -79,21 +79,18 @@ connect.flash = function(filetype, instruments, callback) {
};
connect.audiotag = function(filetype, instruments, callback) {
if (MIDI.loader) MIDI.loader.message("HTML5 Audio API...");
// works ok, kinda like a drunken tuna fish, across the board.
if (typeof(loader) === "undefined") var loader;
var queue = createQueue({
items: instruments,
getNext: function(instrumentId) {
DOMLoader.sendRequest({
url: "./soundfont/" + instrumentId + "-" + filetype + ".js",
url: MIDI.soundfontUrl + instrumentId + "-" + filetype + ".js",
onprogress: getPercent,
onload: function (response) {
MIDI.Soundfont[instrumentId] = JSON.parse(response.responseText);
if (loader) loader.message("Downloading", 100);
if (MIDI.loader) MIDI.loader.update(null, "Downloading", 100);
queue.getNext();
},
onprogress: function (evt) {
var percent = Math.round(evt.loaded / evt.total * 100);
if (loader) loader.message("Downloading", percent);
}
});
},
@ -104,20 +101,18 @@ connect.audiotag = function(filetype, instruments, callback) {
};
connect.webaudio = function(filetype, instruments, callback) {
if (MIDI.loader) MIDI.loader.message("Web Audio API...");
// works awesome! safari and chrome support
var queue = createQueue({
items: instruments,
getNext: function(instrumentId) {
DOMLoader.sendRequest({
url: "./soundfont/" + instrumentId + "-" + filetype + ".js",
url: MIDI.soundfontUrl + instrumentId + "-" + filetype + ".js",
onprogress: getPercent,
onload: function(response) {
MIDI.Soundfont[instrumentId] = JSON.parse(response.responseText);
if (loader) loader.message("Downloading", 100);
if (MIDI.loader) MIDI.loader.update(null, "Downloading...", 100);
queue.getNext();
},
onprogress: function (evt) {
var percent = Math.round(evt.loaded / evt.total * 100);
if (loader) loader.message("Downloading", percent);
}
});
},
@ -136,6 +131,18 @@ var plugins = {
"#flash": true
};
var getPercent = function(event) {
if (!this.totalSize) {
if (this.getResponseHeader("Content-Length-Raw")) {
this.totalSize = parseInt(this.getResponseHeader("Content-Length-Raw"));
} else {
this.totalSize = event.total;
}
}
var percent = this.totalSize ? Math.round(event.loaded / this.totalSize * 100) : "";
if (MIDI.loader) MIDI.loader.update(null, "Downloading...", percent);
};
var createQueue = function(conf) {
var self = {};
self.queue = [];

4
js/MusicTheory/Synesthesia.js
View file

@ -1,5 +1,5 @@
/*
------------------------------------------------------------
MusicTheory.Synesthesia : 0.3
------------------------------------------------------------
Peacock: “Instruments to perform color-music: Two centuries of technological experimentation,” Leonardo, 21 (1988), 397-406.
@ -10,7 +10,7 @@
Jones: The art of light & color, New York: Van Nostrand Reinhold, 1972
------------------------------------------------------------
Reference: http://rhythmiclight.com/archives/ideas/colorscales.html
------------------------------------------------------------
*/
if (typeof(MusicTheory) === "undefined") var MusicTheory = {};

13
js/Widgets/Loader.js
View file

@ -120,18 +120,17 @@ widgets.Loader = function (configure) {
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
/// Public functions.
this.messageId;
this.messages = {};
this.message = function (message, onstart) {
if (!this.interval) return this.start(onstart, message);
if (this.messageId) return this.update(this.messageId, message);
return this.messageId = this.add({
return this.add({
message: message,
onstart: onstart
});
};
this.update = function(id, message, percent) {
if (!id) for (var id in this.messages);
var item = this.messages[id];
item.message = message;
if (typeof(percent) === "number") item.span.innerHTML = percent + "%";
@ -188,7 +187,6 @@ widgets.Loader = function (configure) {
this.span.appendChild(container);
this.span.style.display = "block";
this.update(item.seed, message);
this.center();
/// Escape event loop.
if (conf.onstart) {
window.setTimeout(conf.onstart, 50);
@ -224,7 +222,7 @@ widgets.Loader = function (configure) {
this.start = function (onstart, message) {
if (!(message || configure.message)) return;
return this.messageId = this.add({
return this.add({
message: message || configure.message,
onstart: onstart
});
@ -258,14 +256,13 @@ widgets.Loader = function (configure) {
canvas.style.top = (height / 2) + "px";
canvas.style.width = (size) + "px";
canvas.style.height = (size) + "px";
that.span.style.left = ((width + size) / 2 - that.span.offsetWidth / 2) + "px";
that.span.style.top = (height / 2 + size - 10) + "px";
};
var style = document.createElement("style");
style.innerHTML = '\
.loader { color: #fff; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100000; opacity: 0; display: none; }\
.loader span.message { font-family: monospace; font-size: 14px; opacity: 1; display: none; border-radius: 10px; padding: 0px; width: 300px; text-align: center; position: absolute; z-index: 10000; }\
.loader span.message { line-height: 1.5em; font-family: monospace; font-size: 14px; margin: auto; opacity: 1; display: none; border-radius: 10px; padding: 0px; width: 300px; text-align: center; position: absolute; z-index: 10000; left: 0; right: 0; }\
.loader span.message div { border-bottom: 1px solid #222; padding: 5px 10px; clear: both; text-align: left; opacity: 1; }\
.loader span.message div:last-child { border-bottom: none; }\
';
@ -277,7 +274,7 @@ widgets.Loader = function (configure) {
}, 1);
window.setTimeout(function() { // wait for opacity=0 before removing the element.
item.container.parentNode.removeChild(item.container);
}, 10);
}, 250);
};
var renderAnimation = function () {
var timestamp = (new Date()).getTime();