Compare commits
No commits in common. "9b692fa6af8e9e004e4cac52b7b5758a4069cd63" and "fe67e5495c129be2273b5a29f39077e6df062d78" have entirely different histories.
9b692fa6af
...
fe67e5495c
@ -48,7 +48,6 @@
|
|||||||
<div id="midi-btn" class="ugly-button translate">MIDI In/Out</div>
|
<div id="midi-btn" class="ugly-button translate">MIDI In/Out</div>
|
||||||
<div id="record-btn" class="ugly-button translate">Record MP3</div>
|
<div id="record-btn" class="ugly-button translate">Record MP3</div>
|
||||||
<div id="synth-btn" class="ugly-button translate">Synth</div>
|
<div id="synth-btn" class="ugly-button translate">Synth</div>
|
||||||
<div id="sound-btn" class="ugly-button sound-btn">Sound Select</div>
|
|
||||||
<div id="status"></div>
|
<div id="status"></div>
|
||||||
<div id="volume"></div>
|
<div id="volume"></div>
|
||||||
<div id="volume-label">volume</div>
|
<div id="volume-label">volume</div>
|
||||||
|
18
screen.css
18
screen.css
@ -1,6 +1,7 @@
|
|||||||
|
* { image-rendering: pixelated; }
|
||||||
* { margin: 0; }
|
* { margin: 0; }
|
||||||
* { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
|
* { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
|
||||||
html, body { width: 100%; height: 100%; overflow: hidden; font: 20pt verdana, "DejaVu Sans", sans-serif; color: white; text-shadow: #444 1px 1px; }
|
html, body { width: 100%; height: 100%; overflow: hidden; font: 20pt verdana; color: white; text-shadow: #444 1px 1px; }
|
||||||
body { position: absolute; }
|
body { position: absolute; }
|
||||||
body {
|
body {
|
||||||
background: #242464; /* Old browsers */
|
background: #242464; /* Old browsers */
|
||||||
@ -110,8 +111,7 @@ table { border: 0; padding: 0; margin: 0; }
|
|||||||
.ugly-button.stuck { background: rgba(204, 187, 170, 0.35); }
|
.ugly-button.stuck { background: rgba(204, 187, 170, 0.35); }
|
||||||
#new-room-btn { position: absolute; left: 300px; top: 4px; }
|
#new-room-btn { position: absolute; left: 300px; top: 4px; }
|
||||||
#play-alone-btn { position: absolute; left: 420px; top: 4px; }
|
#play-alone-btn { position: absolute; left: 420px; top: 4px; }
|
||||||
#sound-btn { position: absolute; left: 540px; top: 4px; }
|
#room-settings-btn { position: absolute; left: 540px; top: 4px; display: none; }
|
||||||
#room-settings-btn { position: absolute; left: 660px; top: 4px; display: none; }
|
|
||||||
#midi-btn { position: absolute; left: 300px; top: 32px; }
|
#midi-btn { position: absolute; left: 300px; top: 32px; }
|
||||||
#record-btn { position: absolute; left: 420px; top: 32px; }
|
#record-btn { position: absolute; left: 420px; top: 32px; }
|
||||||
#synth-btn { position: absolute; left: 540px; top: 32px; }
|
#synth-btn { position: absolute; left: 540px; top: 32px; }
|
||||||
@ -156,18 +156,6 @@ table { border: 0; padding: 0; margin: 0; }
|
|||||||
.notification .connection.enabled:after { content: "ON"; font-size: 10px; color: #4a4; float: right; }
|
.notification .connection.enabled:after { content: "ON"; font-size: 10px; color: #4a4; float: right; }
|
||||||
.notification ul { list-style-type: upper-roman; }
|
.notification ul { list-style-type: upper-roman; }
|
||||||
|
|
||||||
.notification .pack {
|
|
||||||
padding: 0px;
|
|
||||||
margin: 2px;
|
|
||||||
background: #fdd;
|
|
||||||
border: 1px solid #f84;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.notification .pack.enabled { background: #dfd; cursor: not-allowed; }
|
|
||||||
.notification .pack:after { content: ""; font-size: 10px; color: #a44; float: right; }
|
|
||||||
.notification .pack.enabled:after { content: "Selected"; font-size: 10px; color: #4a4; float: right; }
|
|
||||||
|
|
||||||
|
|
||||||
#modal { width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: none; }
|
#modal { width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: none; }
|
||||||
#modal .bg { width: 100%; height: 100%; background: #48a; opacity: 0.5; position: absolute; left: 0; top: 0; }
|
#modal .bg { width: 100%; height: 100%; background: #48a; opacity: 0.5; position: absolute; left: 0; top: 0; }
|
||||||
|
178
script.js
178
script.js
@ -28,7 +28,7 @@ $(function() {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
var gSoundPath = "mp3/";
|
var gSoundPath = "mp3/";
|
||||||
var gSoundExt = ".wav.mp3";
|
var gSoundExt = ".wav.mp3";
|
||||||
|
|
||||||
@ -68,7 +68,7 @@ $(function() {
|
|||||||
gSoundPath = "https://dl.dropboxusercontent.com/u/70730519/Klaver/";
|
gSoundPath = "https://dl.dropboxusercontent.com/u/70730519/Klaver/";
|
||||||
gSoundExt = ".wav";
|
gSoundExt = ".wav";
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1002,143 +1002,6 @@ Rect.prototype.contains = function(x, y) {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Soundpack Stuff by electrashave ♥
|
|
||||||
|
|
||||||
////////////////////////////////////////////////////////////////
|
|
||||||
|
|
||||||
function SoundSelector(piano) {
|
|
||||||
this.initialized = false;
|
|
||||||
this.keys = piano.keys;
|
|
||||||
this.loading = {};
|
|
||||||
this.notification;
|
|
||||||
this.packs = [];
|
|
||||||
this.piano = piano;
|
|
||||||
this.soundSelection = localStorage.soundSelection || "MPP Classic";
|
|
||||||
this.addPack({name: "MPP Classic", keys: Object.keys(this.piano.keys), ext: ".wav.mp3", url: "/mp3/"});
|
|
||||||
}
|
|
||||||
|
|
||||||
SoundSelector.prototype.addPack = function(pack, load) {
|
|
||||||
var self = this;
|
|
||||||
self.loading[pack.url || pack] = true;
|
|
||||||
function add(obj) {
|
|
||||||
var added = false;
|
|
||||||
for (var i = 0; self.packs.length > i; i++) {
|
|
||||||
if (obj.name == self.packs[i].name) {
|
|
||||||
added = true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (added) return console.warn("Sounds already added!!"); //no adding soundpacks twice D:<
|
|
||||||
|
|
||||||
if (obj.url.substr(obj.url.length-1) != "/") obj.url = obj.url + "/";
|
|
||||||
var html = document.createElement("li");
|
|
||||||
html.classList = "pack";
|
|
||||||
html.innerText = obj.name + " (" + obj.keys.length + " keys)";
|
|
||||||
html.onclick = function() {
|
|
||||||
self.loadPack(obj.name);
|
|
||||||
self.notification.close();
|
|
||||||
};
|
|
||||||
obj.html = html;
|
|
||||||
self.packs.push(obj);
|
|
||||||
self.packs.sort(function(a, b) {
|
|
||||||
if(a.name < b.name) return -1;
|
|
||||||
if(a.name > b.name) return 1;
|
|
||||||
return 0;
|
|
||||||
});
|
|
||||||
if (load) self.loadPack(obj.name);
|
|
||||||
delete self.loading[obj.url];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof pack == "string") {
|
|
||||||
$.getJSON(pack + "/info.json").done(function(json) {
|
|
||||||
json.url = pack;
|
|
||||||
add(json);
|
|
||||||
});
|
|
||||||
} else add(pack); //validate packs??
|
|
||||||
};
|
|
||||||
|
|
||||||
SoundSelector.prototype.addPacks = function(packs) {
|
|
||||||
for (var i = 0; packs.length > i; i++) this.addPack(packs[i]);
|
|
||||||
};
|
|
||||||
|
|
||||||
SoundSelector.prototype.init = function() {
|
|
||||||
var self = this;
|
|
||||||
if (self.initialized) return console.warn("Sound selector already initialized!");
|
|
||||||
|
|
||||||
if (!!Object.keys(self.loading).length) return setTimeout(function() {
|
|
||||||
self.init();
|
|
||||||
}, 250);
|
|
||||||
|
|
||||||
$("#sound-btn").on("click", function() {
|
|
||||||
if (document.getElementById("Notification-Sound-Selector") != null) return self.notification.close();
|
|
||||||
var html = document.createElement("ul");
|
|
||||||
$(html).append("<h1>Current Sound: " + self.soundSelection + "</h1>");
|
|
||||||
|
|
||||||
for (var i = 0; self.packs.length > i; i++) {
|
|
||||||
var pack = self.packs[i];
|
|
||||||
if (pack.name == self.soundSelection) pack.html.classList = "pack enabled";
|
|
||||||
else pack.html.classList = "pack";
|
|
||||||
html.appendChild(pack.html);
|
|
||||||
}
|
|
||||||
self.notification = new Notification({title: "Sound Selector:", html: html, id: "Sound-Selector", duration: -1, target: "#sound-btn"});
|
|
||||||
});
|
|
||||||
self.initialized = true;
|
|
||||||
self.loadPack(self.soundSelection, true);
|
|
||||||
};
|
|
||||||
|
|
||||||
SoundSelector.prototype.loadPack = function(pack, f) {
|
|
||||||
for (var i = 0; this.packs.length > i; i++) {
|
|
||||||
var p = this.packs[i];
|
|
||||||
if (p.name == pack) {
|
|
||||||
pack = p;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (typeof pack == "string") {
|
|
||||||
console.warn("Sound pack does not exist! Loading default pack...");
|
|
||||||
return this.loadPack("MPP Classic");
|
|
||||||
}
|
|
||||||
|
|
||||||
if (pack.name == this.soundSelection && !f) return;
|
|
||||||
if (pack.keys.length != Object.keys(this.piano.keys).length) {
|
|
||||||
this.piano.keys = {};
|
|
||||||
for (var i = 0; pack.keys.length > i; i++) this.piano.keys[pack.keys[i]] = this.keys[pack.keys[i]];
|
|
||||||
this.piano.renderer.resize();
|
|
||||||
}
|
|
||||||
|
|
||||||
var self = this;
|
|
||||||
for (var i in this.piano.keys) {
|
|
||||||
if (!this.piano.keys.hasOwnProperty(i)) continue;
|
|
||||||
(function() {
|
|
||||||
var key = self.piano.keys[i];
|
|
||||||
key.loaded = false;
|
|
||||||
self.piano.audio.load(key.note, pack.url + key.note + pack.ext, function() {
|
|
||||||
key.loaded = true;
|
|
||||||
key.timeLoaded = Date.now();
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
}
|
|
||||||
localStorage.soundSelection = pack.name;
|
|
||||||
this.soundSelection = pack.name;
|
|
||||||
};
|
|
||||||
|
|
||||||
SoundSelector.prototype.removePack = function(name) {
|
|
||||||
var found = false;
|
|
||||||
for (var i = 0; this.packs.length > i; i++) {
|
|
||||||
var pack = this.packs[i];
|
|
||||||
if (pack.name == name) {
|
|
||||||
this.packs.splice(i, 1);
|
|
||||||
if (pack.name == this.soundSelection) this.loadPack(this.packs[0].name); //add mpp default if none?
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!found) console.warn("Sound pack not found!");
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1209,7 +1072,7 @@ Rect.prototype.contains = function(x, y) {
|
|||||||
window.AudioContext = window.AudioContext || window.webkitAudioContext || undefined;
|
window.AudioContext = window.AudioContext || window.webkitAudioContext || undefined;
|
||||||
var audio_engine = AudioEngineWeb;
|
var audio_engine = AudioEngineWeb;
|
||||||
|
|
||||||
this.audio = new audio_engine().init(/*function() {
|
this.audio = new audio_engine().init(function() {
|
||||||
for(var i in piano.keys) {
|
for(var i in piano.keys) {
|
||||||
if(!piano.keys.hasOwnProperty(i)) continue;
|
if(!piano.keys.hasOwnProperty(i)) continue;
|
||||||
(function() {
|
(function() {
|
||||||
@ -1222,7 +1085,7 @@ Rect.prototype.contains = function(x, y) {
|
|||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
}
|
}
|
||||||
}*/);
|
});
|
||||||
this.audio.lramp = 0.2;
|
this.audio.lramp = 0.2;
|
||||||
this.audio.sstop = 0.21;
|
this.audio.sstop = 0.21;
|
||||||
this.audio.lramps = 0.16;
|
this.audio.lramps = 0.16;
|
||||||
@ -1258,37 +1121,6 @@ Rect.prototype.contains = function(x, y) {
|
|||||||
|
|
||||||
var gPiano = new Piano(document.getElementById("piano"));
|
var gPiano = new Piano(document.getElementById("piano"));
|
||||||
|
|
||||||
var gSoundSelector = new SoundSelector(gPiano);
|
|
||||||
gSoundSelector.addPacks([
|
|
||||||
/* "/sounds/Emotional_2.0/",
|
|
||||||
"/sounds/Harp/",
|
|
||||||
"/sounds/Music_Box/",
|
|
||||||
"/sounds/Vintage_Upright/",
|
|
||||||
"/sounds/Steinway_Grand/",
|
|
||||||
"/sounds/Emotional/",
|
|
||||||
"/sounds/Untitled/"*/
|
|
||||||
"https://ledlamp.github.io/piano-sounds/Emotional/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/Emotional_2.0/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/GreatAndSoftPiano/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/HardAndToughPiano/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/HardPiano/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/Harp/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/Harpsicord/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/LoudAndProudPiano/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/MLG/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/Music_Box/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/NewPiano/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/Orchestra/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/Piano2/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/PianoSounds/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/Rhodes_MK1/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/SoftPiano/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/Steinway_Grand/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/Untitled/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/Vintage_Upright/",
|
|
||||||
"https://ledlamp.github.io/piano-sounds/Vintage_Upright_Soft/"
|
|
||||||
]);
|
|
||||||
gSoundSelector.init();
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1355,7 +1187,7 @@ Rect.prototype.contains = function(x, y) {
|
|||||||
////////////////////////////////////////////////////////////////
|
////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
var channel_id = decodeURIComponent(window.location.hash.substr(1)) || "lobby";
|
var channel_id = decodeURIComponent(window.location.hash.substr(1)) || "lobby";
|
||||||
var gClient = new Client("wss://mppws.cf");
|
var gClient = new Client("wss://ts.terrium.net:8443");
|
||||||
gClient.setChannel(channel_id);
|
gClient.setChannel(channel_id);
|
||||||
gClient.start();
|
gClient.start();
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user