@@ -35,16 +37,18 @@
var arr = [];
var looper;
var score;
- let logo;
+ var logo;
var silence;
var clap;
- function preload() {
- silence = loadSound("./audio/_silence.wav");
- clap = loadSound("./audio/clap01.mp3");
+ //promisify -> new Tone.Player
+ function AudioImport(url) {
+ return new Promise((resolve, reject) => {
+ var audio = new Tone.Player(url, () => resolve(audio));
+ });
}
- function setup() {
+ async function setup() {
noCanvas();
if (windowWidth > 1500 && windowWidth > windowHeight) {
fr = 30;
@@ -52,6 +56,9 @@
fr = 20;
}
frameRate(fr);
+ //
+ silence = (await AudioImport("./audio/_silence.wav")).toDestination();
+ clap = (await AudioImport("./audio/clap01.mp3")).toDestination();
}
//
@@ -75,8 +82,8 @@
var d = createDiv("흐름을 향하여 걷는 Walking towards the Flow");
d.class("title");
b.mouseClicked(function() {
- silence.play();
- clap.play();
+ silence.start();
+ clap.start();
myroom = parseInt(this.value());
socket.emit("room", myroom, function(res) {
@@ -99,7 +106,9 @@
selectAll(".roomsel").forEach(item => {
item.remove();
// 1 second popup '.intro' div
- intro = createDiv("«흐름을 향하여 걷는»은 온라인 공간에 소리의 행렬을 만드는 사운드 퍼레이드입니다. 누구나 참여할 수 있는 이 퍼레이드는 여러분이 보내주시는 소리가 모여 만들어집니다.
소리가 들리지 않는다면, 볼륨을 확인해주시고, 스마트폰 환경에서는 진동해제해주세요.
«Walking Toward the Flow» is a sound parade that creates a procession of sounds in the online space. Anyone can participate. This parade is made by collecting the sounds you sent.
If there is no sound, check the volume and turn off the vibration in the smartphone environment.");
+ intro = createDiv(
+ "«흐름을 향하여 걷는»은 온라인 공간에 소리의 행렬을 만드는 사운드 퍼레이드입니다. 누구나 참여할 수 있는 이 퍼레이드는 여러분이 보내주시는 소리가 모여 만들어집니다.
소리가 들리지 않는다면, 볼륨을 확인해주시고, 스마트폰 환경에서는 진동해제해주세요.
«Walking Toward the Flow» is a sound parade that creates a procession of sounds in the online space. Anyone can participate. This parade is made by collecting the sounds you sent.
If there is no sound, check the volume and turn off the vibration in the smartphone environment."
+ );
intro.class("notice intro"); //-> fadeout & disapear by css animation style.
});
}, 1000);
@@ -135,69 +144,77 @@
"src": "https://p.dianaband.info/public/sound-parade/" + resp.list[post] + "/pixels.png",
"audio": "https://p.dianaband.info/public/sound-parade/" + resp.list[post] + "/audio.mp3",
"alt": "알트",
- "size": { "base": 40, "random": 20 },
- "y": { "base": 20, "random": 10 },
+ "size": {
+ "base": 40,
+ "random": 20
+ },
+ "y": {
+ "base": 20,
+ "random": 10
+ },
"showtime": 20000
};
console.log(object);
- var img = createImg(object.src, object.alt, "", function(im) {
- var sound = loadSound(object.audio, function(snd) {
- //로딩이 끝나면, play!
- snd.loop();
+ var img = createImg(object.src, object.alt, "", async function(im) {
+ //로딩이 끝나면, start!
+ var pv = new Tone.PanVol(0, -99).toDestination();
+ var snd = (await AudioImport(object.audio));
+ snd.connect(pv).start();
+ snd.loop = true;
- //로딩이 끝나면, show!
- im.show();
+ //로딩이 끝나면, show!
+ im.show();
- //그림의 크기와 초기 위치 ==> 가로 보기인 경우
- var width = 0;
- if (windowWidth > windowHeight) {
+ //그림의 크기와 초기 위치 ==> 가로 보기인 경우
+ var width = 0;
+ if (windowWidth > windowHeight) {
- width = (windowHeight * (object.size.base * 1.4 + object.size.random * Math.random())) / 100; // 좀더 크게 + 40% (ratio)
- im.size(width, AUTO);
+ width = (windowHeight * (object.size.base * 1.4 + object.size.random * Math.random())) / 100; // 좀더 크게 + 40% (ratio)
+ im.size(width, AUTO);
- im.position(
- windowWidth * (1 + fading_factor),
- (windowHeight * (object.y.base + object.y.random * Math.random()) * 0.5) / 100 // 좀더 위로 위로 - 50% (ratio)
- );
+ im.position(
+ windowWidth * (1 + fading_factor),
+ (windowHeight * (object.y.base + object.y.random * Math.random()) * 0.5) / 100 // 좀더 위로 위로 - 50% (ratio)
+ );
- //그림의 크기와 초기 위치 ==> 세로 보기인 경우
- } else {
+ //그림의 크기와 초기 위치 ==> 세로 보기인 경우
+ } else {
- width = (windowHeight * (object.size.base + object.size.random * Math.random())) / 100; // json에서 정한 크기 그대로. (ratio)
- im.size(width, AUTO);
+ width = (windowHeight * (object.size.base + object.size.random * Math.random())) / 100; // json에서 정한 크기 그대로. (ratio)
+ im.size(width, AUTO);
- im.position(
- windowWidth * (1 + fading_factor),
- (windowHeight * (object.y.base + object.y.random * Math.random())) / 100 // json에서 정한 위치 그대로. (ratio)
- );
- }
+ im.position(
+ windowWidth * (1 + fading_factor),
+ (windowHeight * (object.y.base + object.y.random * Math.random())) / 100 // json에서 정한 위치 그대로. (ratio)
+ );
+ }
- //추가 정보들
- im.attribute("data-type", object.type);
- im.attribute("data-showtime", object.showtime / 1000); //milli-sec. -> seconds.
+ //추가 정보들
+ im.attribute("data-type", object.type);
+ im.attribute("data-showtime", object.showtime / 1000); //milli-sec. -> seconds.
- //'아이콘' 들은 애니메이션을 시켜줘야 함...
- if (object.type == "icon") {
- //
- im.class("rotate");
- im.style("animation-duration", object.rotate + "s");
- var orgs = im.style("transform-origin").split(" ");
- var str = parseFloat(orgs[0]) + object.pivot.x + "px";
- str = str + " " + parseFloat(orgs[1]) + object.pivot.y + "px";
- im.style("transform-origin", str);
- //
- }
+ //'아이콘' 들은 애니메이션을 시켜줘야 함...
+ if (object.type == "icon") {
+ //
+ im.class("rotate");
+ im.style("animation-duration", object.rotate + "s");
+ var orgs = im.style("transform-origin").split(" ");
+ var str = parseFloat(orgs[0]) + object.pivot.x + "px";
+ str = str + " " + parseFloat(orgs[1]) + object.pivot.y + "px";
+ im.style("transform-origin", str);
+ //
+ }
- //로딩이 다 되면, rendering array에 추가.
- var bundle = {
- ref: object,
- img: im,
- sound: snd,
- width: width
- };
- arr.push(bundle);
- });
+ //로딩이 다 되면, rendering array에 추가.
+ var bundle = {
+ ref: object,
+ img: im,
+ sound: snd,
+ panvol: pv,
+ width: width
+ };
+ arr.push(bundle);
});
//첨에는 hide
@@ -227,32 +244,34 @@
//panning
var snd = bundle.sound;
+ var pv = bundle.panvol;
if (x >= -bundle.width && x < windowWidth) {
pan = ((x + bundle.width) / (windowWidth + bundle.width)) * 2 - 1;
- snd.pan(pan);
- snd.setVolume(1);
+ pv.pan.value = pan;
+ pv.volume.value = 0;//(dB)
} else {
var range;
var knob;
if (x >= windowWidth) {
range = windowWidth * fading_factor
knob = x - windowWidth;
- snd.pan(1);
- snd.setVolume(1 - knob / range);
+ pv.pan.value = 1;
+ pv.volume.value = (1 - (knob / range)) * 99;
} else if (x < -bundle.width) {
range = windowWidth * fading_factor
knob = (x + bundle.width) * -1;
- snd.pan(-1);
- snd.setVolume(1 - knob / range);
+ pv.pan.value = -1;
+ pv.volume.value = (1 - (knob / range)) * 99;
}
}
//remove with sound fade-out
- var exit_x = -bundle.width - windowWidth*fading_factor;
+ var exit_x = -bundle.width - windowWidth * fading_factor;
if (x < exit_x) {
img.remove();
snd.stop();
delete snd;
+ delete pv;
arr.splice(i, 1);
}
}
@@ -268,4 +287,5 @@
// }
+