Compare commits

..

No commits in common. "9b692fa6af8e9e004e4cac52b7b5758a4069cd63" and "fe67e5495c129be2273b5a29f39077e6df062d78" have entirely different histories.

3 changed files with 8 additions and 189 deletions

View File

@ -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>

View File

@ -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
View File

@ -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();