test
This commit is contained in:
parent
f0399d32e7
commit
ab9057fc03
1 changed files with 85 additions and 65 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
|
@ -13,11 +14,12 @@
|
|||
</style>
|
||||
<script src="/js/p5-v1.1.9.min.js"></script>
|
||||
<script src="/js/socket-v2.3.0.io.slim.js"></script>
|
||||
<script src="/js/p5-v0.3.11.sound.min.js"></script>
|
||||
<script src="/js/Tone-14.8.36.min.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="bg"></div>
|
||||
<div class="content">
|
||||
|
|
@ -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("«흐름을 향하여 걷는»은 온라인 공간에 소리의 행렬을 만드는 사운드 퍼레이드입니다. 누구나 참여할 수 있는 이 퍼레이드는 여러분이 보내주시는 소리가 모여 만들어집니다.<br>소리가 들리지 않는다면, 볼륨을 확인해주시고, 스마트폰 환경에서는 진동해제해주세요. <br><br> «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.<br>If there is no sound, check the volume and turn off the vibration in the smartphone environment.");
|
||||
intro = createDiv(
|
||||
"«흐름을 향하여 걷는»은 온라인 공간에 소리의 행렬을 만드는 사운드 퍼레이드입니다. 누구나 참여할 수 있는 이 퍼레이드는 여러분이 보내주시는 소리가 모여 만들어집니다.<br>소리가 들리지 않는다면, 볼륨을 확인해주시고, 스마트폰 환경에서는 진동해제해주세요. <br><br> «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.<br>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,16 +144,24 @@
|
|||
"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();
|
||||
|
|
@ -194,11 +211,11 @@
|
|||
ref: object,
|
||||
img: im,
|
||||
sound: snd,
|
||||
panvol: pv,
|
||||
width: width
|
||||
};
|
||||
arr.push(bundle);
|
||||
});
|
||||
});
|
||||
|
||||
//첨에는 hide
|
||||
img.hide();
|
||||
|
|
@ -227,23 +244,24 @@
|
|||
|
||||
//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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -253,6 +271,7 @@
|
|||
img.remove();
|
||||
snd.stop();
|
||||
delete snd;
|
||||
delete pv;
|
||||
arr.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -268,4 +287,5 @@
|
|||
// }
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue