doohoyi/sound-parade
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

test

Browse source
This commit is contained in:
Dooho Yi 2022-01-19 00:55:52 +09:00
parent f0399d32e7
commit ab9057fc03
1 changed files with 85 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

150
src/pages/parade.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
@ -13,11 +14,12 @@
</style> </style>
<script src="/js/p5-v1.1.9.min.js"></script> <script src="/js/p5-v1.1.9.min.js"></script>
<script src="/js/socket-v2.3.0.io.slim.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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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" /> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap" rel="stylesheet" />
</head> </head>
<body> <body>
<div class="bg"></div> <div class="bg"></div>
<div class="content"> <div class="content">
@ -35,16 +37,18 @@
var arr = []; var arr = [];
var looper; var looper;
var score; var score;
let logo; var logo;
var silence; var silence;
var clap; var clap;
function preload() { //promisify -> new Tone.Player
silence = loadSound("./audio/_silence.wav"); function AudioImport(url) {
clap = loadSound("./audio/clap01.mp3"); return new Promise((resolve, reject) => {
var audio = new Tone.Player(url, () => resolve(audio));
});
} }
function setup() { async function setup() {
noCanvas(); noCanvas();
if (windowWidth > 1500 && windowWidth > windowHeight) { if (windowWidth > 1500 && windowWidth > windowHeight) {
fr = 30; fr = 30;
@ -52,6 +56,9 @@
fr = 20; fr = 20;
} }
frameRate(fr); frameRate(fr);
//
silence = (await AudioImport("./audio/_silence.wav")).toDestination();
clap = (await AudioImport("./audio/clap01.mp3")).toDestination();
} }
// //
@ -75,8 +82,8 @@
var d = createDiv("흐름을&nbsp; 향하여&nbsp; 걷는 &nbsp;&nbsp;Walking towards the Flow"); var d = createDiv("흐름을&nbsp; 향하여&nbsp; 걷는 &nbsp;&nbsp;Walking towards the Flow");
d.class("title"); d.class("title");
b.mouseClicked(function() { b.mouseClicked(function() {
silence.play(); silence.start();
clap.play(); clap.start();
myroom = parseInt(this.value()); myroom = parseInt(this.value());
socket.emit("room", myroom, function(res) { socket.emit("room", myroom, function(res) {
@ -99,7 +106,9 @@
selectAll(".roomsel").forEach(item => { selectAll(".roomsel").forEach(item => {
item.remove(); item.remove();
// 1 second popup '.intro' div // 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. intro.class("notice intro"); //-> fadeout & disapear by css animation style.
}); });
}, 1000); }, 1000);
@ -135,69 +144,77 @@
"src": "https://p.dianaband.info/public/sound-parade/" + resp.list[post] + "/pixels.png", "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", "audio": "https://p.dianaband.info/public/sound-parade/" + resp.list[post] + "/audio.mp3",
"alt": "알트", "alt": "알트",
"size": { "base": 40, "random": 20 }, "size": {
"y": { "base": 20, "random": 10 }, "base": 40,
"random": 20
},
"y": {
"base": 20,
"random": 10
},
"showtime": 20000 "showtime": 20000
}; };
console.log(object); console.log(object);
var img = createImg(object.src, object.alt, "", function(im) { var img = createImg(object.src, object.alt, "", async function(im) {
var sound = loadSound(object.audio, function(snd) { //로딩이 끝나면, start!
//로딩이 끝나면, play! var pv = new Tone.PanVol(0, -99).toDestination();
snd.loop(); var snd = (await AudioImport(object.audio));
snd.connect(pv).start();
snd.loop = true;
//로딩이 끝나면, show! //로딩이 끝나면, show!
im.show(); im.show();
//그림의 크기와 초기 위치 ==> 가로 보기인 경우 //그림의 크기와 초기 위치 ==> 가로 보기인 경우
var width = 0; var width = 0;
if (windowWidth > windowHeight) { if (windowWidth > windowHeight) {
width = (windowHeight * (object.size.base * 1.4 + object.size.random * Math.random())) / 100; // 좀더 크게 + 40% (ratio) width = (windowHeight * (object.size.base * 1.4 + object.size.random * Math.random())) / 100; // 좀더 크게 + 40% (ratio)
im.size(width, AUTO); im.size(width, AUTO);
im.position( im.position(
windowWidth * (1 + fading_factor), windowWidth * (1 + fading_factor),
(windowHeight * (object.y.base + object.y.random * Math.random()) * 0.5) / 100 // 좀더 위로 위로 - 50% (ratio) (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) width = (windowHeight * (object.size.base + object.size.random * Math.random())) / 100; // json에서 정한 크기 그대로. (ratio)
im.size(width, AUTO); im.size(width, AUTO);
im.position( im.position(
windowWidth * (1 + fading_factor), windowWidth * (1 + fading_factor),
(windowHeight * (object.y.base + object.y.random * Math.random())) / 100 // json에서 정한 위치 그대로. (ratio) (windowHeight * (object.y.base + object.y.random * Math.random())) / 100 // json에서 정한 위치 그대로. (ratio)
); );
} }
//추가 정보들 //추가 정보들
im.attribute("data-type", object.type); im.attribute("data-type", object.type);
im.attribute("data-showtime", object.showtime / 1000); //milli-sec. -> seconds. im.attribute("data-showtime", object.showtime / 1000); //milli-sec. -> seconds.
//'아이콘' 들은 애니메이션을 시켜줘야 함... //'아이콘' 들은 애니메이션을 시켜줘야 함...
if (object.type == "icon") { if (object.type == "icon") {
// //
im.class("rotate"); im.class("rotate");
im.style("animation-duration", object.rotate + "s"); im.style("animation-duration", object.rotate + "s");
var orgs = im.style("transform-origin").split(" "); var orgs = im.style("transform-origin").split(" ");
var str = parseFloat(orgs[0]) + object.pivot.x + "px"; var str = parseFloat(orgs[0]) + object.pivot.x + "px";
str = str + " " + parseFloat(orgs[1]) + object.pivot.y + "px"; str = str + " " + parseFloat(orgs[1]) + object.pivot.y + "px";
im.style("transform-origin", str); im.style("transform-origin", str);
// //
} }
//로딩이 다 되면, rendering array에 추가. //로딩이 다 되면, rendering array에 추가.
var bundle = { var bundle = {
ref: object, ref: object,
img: im, img: im,
sound: snd, sound: snd,
width: width panvol: pv,
}; width: width
arr.push(bundle); };
}); arr.push(bundle);
}); });
//첨에는 hide //첨에는 hide
@ -227,32 +244,34 @@
//panning //panning
var snd = bundle.sound; var snd = bundle.sound;
var pv = bundle.panvol;
if (x >= -bundle.width && x < windowWidth) { if (x >= -bundle.width && x < windowWidth) {
pan = ((x + bundle.width) / (windowWidth + bundle.width)) * 2 - 1; pan = ((x + bundle.width) / (windowWidth + bundle.width)) * 2 - 1;
snd.pan(pan); pv.pan.value = pan;
snd.setVolume(1); pv.volume.value = 0;//(dB)
} else { } else {
var range; var range;
var knob; var knob;
if (x >= windowWidth) { if (x >= windowWidth) {
range = windowWidth * fading_factor range = windowWidth * fading_factor
knob = x - windowWidth; knob = x - windowWidth;
snd.pan(1); pv.pan.value = 1;
snd.setVolume(1 - knob / range); pv.volume.value = (1 - (knob / range)) * 99;
} else if (x < -bundle.width) { } else if (x < -bundle.width) {
range = windowWidth * fading_factor range = windowWidth * fading_factor
knob = (x + bundle.width) * -1; knob = (x + bundle.width) * -1;
snd.pan(-1); pv.pan.value = -1;
snd.setVolume(1 - knob / range); pv.volume.value = (1 - (knob / range)) * 99;
} }
} }
//remove with sound fade-out //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) { if (x < exit_x) {
img.remove(); img.remove();
snd.stop(); snd.stop();
delete snd; delete snd;
delete pv;
arr.splice(i, 1); arr.splice(i, 1);
} }
} }
@ -268,4 +287,5 @@
// } // }
</script> </script>
</body> </body>
</html> </html>