init
This commit is contained in:
commit
133d98ebab
5 changed files with 9572 additions and 0 deletions
9395
NexusUI.js
Normal file
9395
NexusUI.js
Normal file
File diff suppressed because one or more lines are too long
26
Tone.min.js
vendored
Normal file
26
Tone.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
20
index.html
Normal file
20
index.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>✂️ 미술관 🎚️ 믹스 💿|🔊 museum 🎹 mix 🥣 ... 🪗 🪩~</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<script src="/Tone.min.js"></script>
|
||||
<script src="/NexusUI.js"></script>
|
||||
</head>
|
||||
<body class="bg-black-50" style="color:#00DCD8; min-height:100vh">
|
||||
<div id="mix" class="pa2">
|
||||
<div id="ambience-lobby" style="margin-top:10px;clear:both;"></div>
|
||||
<div id="ambience-exhibit-hall1" style="margin-top:10px;clear:both;"></div>
|
||||
</div>
|
||||
<script src="/script.js">
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
124
script.js
Normal file
124
script.js
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
/* global Tone Nexus */
|
||||
|
||||
function Sample(arg) {
|
||||
//ui
|
||||
this.div = document.getElementById(arg.ui);
|
||||
this.div.innerHTML += `
|
||||
<div style="float:left">
|
||||
<div nexus-ui="button" id="${arg.ui}-playbutton" style="width:80px;height:70px;margin-top:10px;"></div>
|
||||
<div class="label" style="width:80px;margin-top:10px;">${arg.label}</div>
|
||||
</div>
|
||||
<div style="float:left">
|
||||
<div nexus-ui="dial" id="${arg.ui}-volume" style="width:80px;height:70px;margin-top:10px;"></div>
|
||||
<div class="label" style="width:80px;margin-top:10px;">볼륨</div>
|
||||
<!--<div nexus-ui="number" id="${arg.ui}-volumenumber" style="width:60px;margin:10px;"></div>-->
|
||||
</div>
|
||||
<div style="float:left">
|
||||
<div nexus-ui="dial" id="${arg.ui}-reverb" style="width:80px;height:70px;margin-top:10px;"></div>
|
||||
<div class="label" style="width:80px;margin-top:10px;">리버브</div>
|
||||
<!--<div nexus-ui="number" id="${arg.ui}-reverbnumber" style="width:60px;margin:10px;"></div>-->
|
||||
</div>
|
||||
`;
|
||||
|
||||
//build the rack
|
||||
this.rack = new Nexus.Rack(arg.ui);
|
||||
//recollect components
|
||||
this.button = this.rack[arg.ui + '-playbutton'];
|
||||
this.volume = this.rack[arg.ui + '-volume'];
|
||||
// this.volumenumber = this.rack[arg.ui + '-volumenumber'];
|
||||
this.reverb = this.rack[arg.ui + '-reverb'];
|
||||
// this.reverbnumber = this.rack[arg.ui + '-reverbnumber'];
|
||||
|
||||
//presets
|
||||
this.button.mode = "toggle";
|
||||
this.button.state = false;
|
||||
this.volume.min = -20;
|
||||
this.volume.max = 0;
|
||||
this.volume.value = -20;
|
||||
this.volume.interaction = "vertical"; // this doesn't work. TBD.. sth. is wrong!
|
||||
// this.volumenumber.link(this.volume);
|
||||
this.reverb.min = 0;
|
||||
this.reverb.max = 1;
|
||||
this.reverb.value = 0;
|
||||
this.reverb.interaction = "vertical"; // this doesn't work. TBD.. sth. is wrong!
|
||||
// this.reverbnumber.link(this.reverb);
|
||||
|
||||
//colors
|
||||
this.rack.colorize("accent","#00DCD8");
|
||||
this.rack.colorize("fill","#2B5EA3");
|
||||
|
||||
// states
|
||||
if (arg.type == 'loop') {
|
||||
this.loop = true;
|
||||
this.autostart = true;
|
||||
} else if (arg.type == 'oneshot') {
|
||||
this.loop = false;
|
||||
this.autostart = false;
|
||||
}
|
||||
|
||||
// volume(gain) -> [Main output]
|
||||
this.vol = new Tone.Volume().toDestination();
|
||||
this.vol.mute = true;
|
||||
this.volume.on(
|
||||
"change",
|
||||
function (v) {
|
||||
this.vol.volume.value = v;
|
||||
if (v == -20) this.vol.mute = true;
|
||||
else this.vol.mute = false;
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
// reverb(fx) -> volume(gain)
|
||||
this.rev = new Tone.Reverb().connect(this.vol);
|
||||
this.rev.wet.value = 0;
|
||||
this.reverb.on(
|
||||
"change",
|
||||
function (v) {
|
||||
this.rev.wet.value = v;
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
// source -> reverb(fx)
|
||||
if (arg.autostart) this.button.turnOn();
|
||||
this.player = new Tone.Player({
|
||||
url: arg.url,
|
||||
loop: arg.loop,
|
||||
autostart: arg.autostart,
|
||||
fadeIn: 5,
|
||||
fadeOut: 5,
|
||||
}).connect(this.rev);
|
||||
this.button.on(
|
||||
"change",
|
||||
function (v) {
|
||||
if (v) this.player.start();
|
||||
else this.player.stop();
|
||||
}.bind(this)
|
||||
);
|
||||
if (arg.type == "oneshot") {
|
||||
this.player.onstop = () => this.button.turnOff()
|
||||
}
|
||||
}
|
||||
|
||||
//script
|
||||
|
||||
var samplers = [];
|
||||
|
||||
//index - 0
|
||||
samplers.push(new Sample({
|
||||
label: "1층 로비",
|
||||
ui: "ambience-lobby",
|
||||
type: 'loop',
|
||||
url: "https://cdn.glitch.com/d050ca58-b6d2-4626-bc1e-2bf21f831cec%2F1%20mercury%20per.mp3?v=1629789592780",
|
||||
}));
|
||||
|
||||
//index - 1
|
||||
samplers.push(new Sample({
|
||||
label: "1층 전시실",
|
||||
ui: "ambience-exhibit-hall1",
|
||||
type: 'oneshot',
|
||||
url: "https://cdn.glitch.com/d050ca58-b6d2-4626-bc1e-2bf21f831cec%2F4%20jupiter%20arp.mp3?v=1629789594247",
|
||||
}));
|
||||
|
||||
//live scripts
|
||||
samplers[0].volume.value = -10;
|
||||
samplers[1].volume.value = -10;
|
||||
7
style.css
Normal file
7
style.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.sampler {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.label {
|
||||
text-align: center;
|
||||
}
|
||||
Loading…
Reference in a new issue