detangle loader, add configuration MIDI.soundfontUrl to set the base-path to your soundfonts
This commit is contained in:
parent
f723a45652
commit
d0cf6085d7
|
@ -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 ++) {
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -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>
|
|
@ -1,11 +1,11 @@
|
|||
/*
|
||||
|
||||
-------------------------------------
|
||||
MIDI.Player : 0.3
|
||||
-------------------------------------
|
||||
https://github.com/mudcube/MIDI.js
|
||||
-------------------------------------
|
||||
requires jasmid
|
||||
|
||||
#jasmid
|
||||
-------------------------------------
|
||||
*/
|
||||
|
||||
if (typeof (MIDI) === "undefined") var MIDI = {};
|
||||
|
|
|
@ -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 += " ";
|
||||
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];
|
||||
|
|
|
@ -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 = {};
|
||||
|
|
|
@ -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 = [];
|
||||
|
|
|
@ -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 = {};
|
||||
|
|
|
@ -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();
|
||||
|
|
Loading…
Reference in a new issue