240 lines
8.9 KiB
JavaScript
240 lines
8.9 KiB
JavaScript
/* global Tone Nexus */
|
|
|
|
function Sample(arg) {
|
|
//ui
|
|
this.div = document.getElementById(arg.ui);
|
|
this.div.innerHTML += `
|
|
<div style="">
|
|
<div nexus-ui="button" id="${arg.ui}-playbutton" style="width:40px;height:40px"></div>
|
|
<div class="label" style="width:80px;">${arg.label}</div>
|
|
</div>
|
|
<div style="display:none;">
|
|
<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="display:none;">
|
|
<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>`;
|
|
|
|
//label
|
|
this.label = arg.label;
|
|
|
|
//build the rack
|
|
this.rack = new Nexus.Rack(arg.ui);
|
|
this.rack.hide();
|
|
//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 = -40;
|
|
this.volume.max = 0;
|
|
this.volume.value = -40;
|
|
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");
|
|
this.rack.colorize("accent","#DCD800");
|
|
this.rack.colorize("fill","#333888");
|
|
|
|
// states
|
|
if (arg.type == 'loop') {
|
|
this.loop = true;
|
|
this.autostart = false;
|
|
} 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 == -40) 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 (this.autostart) this.button.turnOn();
|
|
this.player = new Tone.Player({
|
|
url: arg.url,
|
|
loop: this.loop,
|
|
autostart: this.autostart,
|
|
fadeIn: 3,
|
|
fadeOut: 3,
|
|
onstop: () => this.button.turnOff()
|
|
}).connect(this.rev);
|
|
this.player.buffer.onload = () => this.rack.show();
|
|
this.button.on(
|
|
"change",
|
|
function (v) {
|
|
if (v) this.player.start();
|
|
else this.player.stop();
|
|
}.bind(this)
|
|
);
|
|
|
|
// init
|
|
this.volume.value = -10;
|
|
}
|
|
|
|
//samples
|
|
var samplers = [];
|
|
samplers.push(new Sample({ui: "sample0", label: "전시실 1", type: "oneshot", url: "/audio/전시실01.mp3"}));
|
|
samplers.push(new Sample({ui: "sample1", label: "앞마당", type: "loop", url: "/audio/앞마당01.mp3"}));
|
|
samplers.push(new Sample({ui: "sample2", label: "지나가는", type: "oneshot", url: "/audio/복도01.mp3"}));
|
|
samplers.push(new Sample({ui: "sample3", label: "대형 엘리베이터", type: "oneshot", url: "/audio/철수01.mp3"}));
|
|
samplers.push(new Sample({ui: "sample4", label: "작별 인사", type: "oneshot", url: "/audio/작별인사.mp3"}));
|
|
samplers.push(new Sample({ui: "sample5", label: "철수", type: "oneshot", url: "/audio/철수02.mp3"}));
|
|
samplers.push(new Sample({ui: "sample6", label: "전시실 3", type: "oneshot", url: "/audio/전시실03.mp3"}));
|
|
samplers.push(new Sample({ui: "sample7", label: "전시실 4", type: "oneshot", url: "/audio/전시실04 발걸음.mp3"}));
|
|
samplers.push(new Sample({ui: "sample8", label: "진동", type: "oneshot", url: "/audio/진동.mp3"}));
|
|
samplers.push(new Sample({ui: "sample9", label: "셔터", type: "oneshot", url: "/audio/셔터.mp3"}));
|
|
samplers.push(new Sample({ui: "sample10", label: "전시안내 딩동댕", type: "oneshot", url: "/audio/로비전시안내딩동댕.mp3"}));
|
|
samplers.push(new Sample({ui: "sample11", label: "전시실 공기", type: "loop", url: "/audio/전시실앰비언트.mp3"}));
|
|
samplers.push(new Sample({ui: "sample12", label: "전시실 2", type: "oneshot", url: "/audio/전시실02.mp3"}));
|
|
samplers.push(new Sample({ui: "sample13", label: "시끌벅적", type: "loop", url: "/audio/카페시끄러움.mp3"}));
|
|
samplers.push(new Sample({ui: "sample14", label: "카페", type: "loop", url: "/audio/카페.mp3"}));
|
|
samplers.push(new Sample({ui: "sample15", label: "로비", type: "loop", url: "/audio/로비01.mp3"}));
|
|
samplers.push(new Sample({ui: "sample16", label: "계단", type: "oneshot", url: "/audio/계단01.mp3"}));
|
|
samplers.push(new Sample({ui: "sample17", label: "사다리", type: "oneshot", url: "/audio/사다리.mp3"}));
|
|
samplers.push(new Sample({ui: "sample18", label: "도슨트 기다리는 관객들", type: "oneshot", url: "/audio/도슨트기다리는관객들.mp3"}));
|
|
samplers.push(new Sample({ui: "sample19", label: "도슨트 기둥", type: "oneshot", url: "/audio/도슨트_기둥이야기.mp3"}));
|
|
samplers.push(new Sample({ui: "sample20", label: "도슨트 문", type: "oneshot", url: "/audio/도슨트_서울시립미술관문갯수.mp3"}));
|
|
samplers.push(new Sample({ui: "sample21", label: "까마귀", type: "oneshot", url: "/audio/까마귀.mp3"}));
|
|
samplers.push(new Sample({ui: "sample22", label: "슬라이드 문", type: "oneshot", url: "/audio/정문_자동슬라이드문소리.mp3"}));
|
|
|
|
//presets
|
|
samplers[8].player.fadeIn = 0;
|
|
samplers[8].player.fadeOut = 0;
|
|
samplers[9].player.fadeIn = 0;
|
|
samplers[9].player.fadeOut = 0;
|
|
|
|
var radiobutton = new Nexus.RadioButton('#radio',{
|
|
'size': [200,30],
|
|
'numberOfButtons': 4,
|
|
'active': -1
|
|
})
|
|
radiobutton.colorize("accent","#DCD800");
|
|
radiobutton.colorize("fill","#333888");
|
|
|
|
let highlight = "#880";
|
|
radiobutton.on(
|
|
"change",
|
|
function (v) {
|
|
//clear & stop
|
|
samplers.forEach((a) => {
|
|
a.rack.colorize("fill", "#333888");
|
|
a.button.turnOff();
|
|
a.volume.value = -10;
|
|
a.reverb.value = 0;
|
|
});
|
|
switch (v) {
|
|
case 0:
|
|
//scene #1 : 앞마당
|
|
document.getElementById('radio-label').textContent = '앞마당';
|
|
samplers[1].rack.colorize("fill", highlight);
|
|
samplers[4].rack.colorize("fill", highlight);
|
|
samplers[21].rack.colorize("fill", highlight); //까마귀
|
|
samplers[1].button.turnOn();
|
|
break;
|
|
case 1:
|
|
//scene #2 : 로비
|
|
document.getElementById('radio-label').textContent = '로비';
|
|
samplers[15].rack.colorize("fill", highlight);
|
|
samplers[16].rack.colorize("fill", highlight);
|
|
samplers[10].rack.colorize("fill", highlight);
|
|
samplers[22].rack.colorize("fill", highlight); //슬라이드문
|
|
samplers[18].rack.colorize("fill", highlight); //도슨트기다리는관객들
|
|
samplers[19].rack.colorize("fill", highlight); //도슨트_기둥
|
|
samplers[2].rack.colorize("fill", highlight);
|
|
samplers[3].rack.colorize("fill", highlight);
|
|
samplers[15].button.turnOn();
|
|
break;
|
|
case 2:
|
|
//scene #3 : 전시실
|
|
document.getElementById('radio-label').textContent = '전시실';
|
|
samplers[11].rack.colorize("fill", highlight);
|
|
samplers[7].rack.colorize("fill", highlight);
|
|
samplers[0].rack.colorize("fill", highlight);
|
|
samplers[12].rack.colorize("fill", highlight);
|
|
samplers[6].rack.colorize("fill", highlight);
|
|
samplers[20].rack.colorize("fill", highlight); //도슨트_문
|
|
samplers[9].rack.colorize("fill", highlight);
|
|
samplers[8].rack.colorize("fill", highlight);
|
|
samplers[5].rack.colorize("fill", highlight);
|
|
samplers[17].rack.colorize("fill", highlight);
|
|
samplers[11].button.turnOn();
|
|
break;
|
|
case 3:
|
|
//scene #4 : 카페
|
|
document.getElementById('radio-label').textContent = '카페';
|
|
samplers[14].rack.colorize("fill", highlight);
|
|
samplers[13].rack.colorize("fill", highlight);
|
|
samplers[10].rack.colorize("fill", highlight);
|
|
samplers[10].volume.value = 0;
|
|
samplers[10].reverb.value = 0.7;
|
|
samplers[14].button.turnOn();
|
|
break;
|
|
default:
|
|
;
|
|
}
|
|
}
|
|
);
|
|
|
|
Tone.loaded().then(() => {
|
|
//
|
|
radiobutton.select(0);
|
|
//
|
|
});
|
|
|
|
// TBD: randomized walker event generator.
|
|
|
|
// var looper;
|
|
// var timer;
|
|
// var task = () => {
|
|
// console.log("hi");
|
|
// };
|
|
// (looper = function(timeout) {
|
|
// timer = setTimeout(() => {
|
|
|
|
// //do sth.
|
|
// task();
|
|
|
|
// //random scheduling
|
|
// var timegap = 1000 + Math.random()*(3000);
|
|
// looper(timegap);
|
|
|
|
// }, timeout);
|
|
// })(1000);
|
|
|
|
// cancelTimeout(timer);
|