audio & file name upload & update

public/a1/index.js

@@ -20,24 +20,26 @@ $(document).ready(function() {
     SVGImport_size1('./imgs/arrow-circle-left.svg'),
     SVGImport_size1('./imgs/hand-point-right-regular.svg'),
     SVGImport_size1('./imgs/listen-icon.svg'),
-    SVGImport_size1('./imgs/iconmonstr-plus-4.svg'),
+    SVGImport_size1('./imgs/plus.svg'),
-    SVGImport_size1('./imgs/iconmonstr-minus-4.svg'),
+    SVGImport_size1('./imgs/minus.svg'),
+    SVGImport_size1('./imgs/faster.svg'),
+    SVGImport_size1('./imgs/slower.svg'),
     //clap
     AudioImport_p5("./audio/clap@2/" + ("0" + getRandomInt(1, 2)).slice(-2) + ".mp3"),
     //beach_sounds page 1 ==> 7
-    AudioImport("./audio/2011_2011.mp3"),
-    AudioImport("./audio/2011_벨.mp3"),
-    AudioImport("./audio/2011_숲.mp3"),
-    AudioImport("./audio/2011_바람.mp3"),
-    AudioImport("./audio/2011_헤비레인.mp3"),
-    AudioImport("./audio/고요6.mp3"),
-    AudioImport("./audio/고요7.mp3"),
-    //beach_sounds page 2 ==> 7
-    AudioImport("./audio/검은산_뚜루.mp3"),
     AudioImport("./audio/검은산_다급.mp3"),
+    AudioImport("./audio/검은산_뚜루.mp3"),
     AudioImport("./audio/검은산_부엉.mp3"),
     AudioImport("./audio/검은산_불안.mp3"),
     AudioImport("./audio/검은산_쏟아짐.mp3"),
+    AudioImport("./audio/고요6.mp3"),
+    AudioImport("./audio/고요7.mp3"),
+    //beach_sounds page 2 ==> 7
+    AudioImport("./audio/기정_과자봉지소리.mp3"),
+    AudioImport("./audio/기정_라디오.mp3"),
+    AudioImport("./audio/기정_물소리(붓).mp3"),
+    AudioImport("./audio/기정_악기.mp3"),
+    AudioImport("./audio/고요12.mp3"),
     AudioImport("./audio/고요13.mp3"),
     AudioImport("./audio/고요14.mp3"),
     //
@@ -50,68 +52,54 @@ $(document).ready(function() {
     var iconsound = imports[4];
     var plus = imports[5];
     var minus = imports[6];
+    var faster = imports[7];
+    var slower = imports[8];
     //clap
-    var clap = imports[7];
+    var clap = imports[9];
     //beach list
     //NOTE: beware! same key is not allowed!! every keys should have different name!!
     var beach_sounds = {
-      '2011_2011' : imports[8],
+      '검은산_다급': imports[10],
-      '2011_벨' : imports[9],
+      '검은산_뚜루': imports[11],
-      '2011_숲' : imports[10],
+      '검은산_부엉': imports[12],
-      '2011_바람' : imports[11],
+      '검은산_불안': imports[13],
-      '2011_헤비레인' : imports[12],
+      '검은산_쏟아짐': imports[14],
-      '고요6' : imports[13],
+      '고요6': imports[15],
-      '고요7' : imports[14],
+      '_소리의_퍼짐______소리의_움직임_1': imports[16],
-      '검은산_뚜루' : imports[15],
+      '기정_과자봉지소리': imports[17],
-      '검은산_다급' : imports[16],
+      '기정_라디오': imports[18],
-      '검은산_부엉' : imports[17],
+      '기정_물소리(붓)': imports[19],
-      '검은산_불안' : imports[18],
+      '기정_악기': imports[20],
-      '검은산_쏟아짐' : imports[19],
+      '고요12': imports[21],
-      '고요13' : imports[20],
+      '고요13': imports[22],
-      '고요14' : imports[21],
+      '_소리의_퍼짐______소리의_움직임_2': imports[23],
     };
     //NOTE: beware! same key is not allowed!! every keys should have different name!!
     var beach_players = {
-      '2011_2011': [],
-      '2011_벨': [],
-      '2011_숲': [],
-      '2011_바람': [],
-      '2011_헤비레인': [],
-      '고요6': [],
-      '고요7': [],
-      '검은산_뚜루': [],
       '검은산_다급': [],
+      '검은산_뚜루': [],
       '검은산_부엉': [],
       '검은산_불안': [],
       '검은산_쏟아짐': [],
+      '고요6': [],
+      '_소리의_퍼짐______소리의_움직임_1': [],
+      '기정_과자봉지소리': [],
+      '기정_라디오': [],
+      '기정_물소리(붓)': [],
+      '기정_악기': [],
+      '고요12': [],
       '고요13': [],
-      '고요14': [],
+      '_소리의_퍼짐______소리의_움직임_2': [],
-    };
-    //NOTE: beware! same key is not allowed!! every keys should have different name!!
-    var beach_playcounts = {
-      '2011_2011': 0,
-      '2011_벨': 0,
-      '2011_숲': 0,
-      '2011_바람': 0,
-      '2011_헤비레인': 0,
-      '고요6': 0,
-      '고요7': 0,
-      '검은산_뚜루': 0,
-      '검은산_다급': 0,
-      '검은산_부엉': 0,
-      '검은산_불안': 0,
-      '검은산_쏟아짐': 0,
-      '고요13': 0,
-      '고요14': 0,
     };
 
     //screen changer
-    var nscreen = 3;
+    var nscreen = 4;
     var screens = [];
     var screen_names = {};
     screen_names['start'] = 1;
     screen_names['check'] = 2;
-    screen_names['beach'] = 3;
+    screen_names['beach1'] = 3;
+    screen_names['beach2'] = 4;
     var curscreen;
     for (var idx = 0; idx < nscreen; idx++) {
       screens.push(new Layer());
@@ -198,7 +186,7 @@ $(document).ready(function() {
       strokeColor: '#FFE40A',
       dashArray: [vssw * 0.05, vssw * 0.05],
       onFrame: function(event) {
-        this.rotate(0.2);
+        // this.rotate(0.2);
       }
     });
     netstat.fillColor.alpha = 0;
@@ -334,9 +322,18 @@ $(document).ready(function() {
       }
     });
 
+    //global panning variable
+    //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
+    var pan_width_pool = [1000, 2000, 3000, 4000, 8000, 80000];
+    var pan_speed_pool = [0, 10, 30, 50, 80, 200, 400, 1200];
+    var cur_pan_width_idx = pan_width_pool.length - 1;
+    var cur_pan_speed_idx = 0;
+    var cur_pan_width = 0;
+    var cur_pan_speed = 0;
+
     //screen #3 - beach page #1
     changeScreen(3);
-    new Path.Rectangle([0, 0], vs).fillColor = '#333';
+    new Path.Rectangle([0, 0], vs).fillColor = '#555';
 
     //title - text
     new PointText({
@@ -348,56 +345,605 @@ $(document).ready(function() {
       fontSize: '3em'
     }).fitBounds(titlebox.bounds);
 
-    iconsound.addTo(project);
+    //
-    //iconsound.scale(vsw / 1.5);
+    for (var row = 0; row < 7; row++) {
-    iconsound.scale(vsw / 2.5);
+      for (var col = 0; col < 1; col++) {
-    iconsound.position = view.center;
+        var idx = row * 1 + col;
-    iconsound.fillColor = '#00acfe';
 
-    new Group({
+        //play/stop/playcount/faster/slower button (networked between groups)
+        var c = new Group({
           children: [
-        new Path.Circle({
+            //play button
-          center: view.center,
+            new Group({
-          radius: vssw * 3,
+              name: 'play_btn',
-          fillColor: '#fef1b5', // buttermilk
+              children: [
-          opacity: 0.6
+                new Path.Rectangle({
+                  point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5],
+                  radius: vssw * 0.4,
+                  size: [vssw * 1.5, vssw * 0.7],
+                  fillColor: new Color({
+                    hue: getRandom(20, 60),
+                    saturation: 1,
+                    brightness: 1
+                  }),
+                }),
+                plus.clone()
+              ],
+              onMouseDown: function(event) {
+                var par = this.parent;
+                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
+                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
+                  //pan_width: (+)
+                  if (cur_pan_width_idx < (pan_width_pool.length - 1)) {
+                    cur_pan_width_idx++;
+                  }
+                  cur_pan_width = pan_width_pool[cur_pan_width_idx];
+                  par._socket.emit('pan', {
+                    width: cur_pan_width,
+                    speed: cur_pan_speed
+                  });
+                  par.children.playcounter.content = '' + (cur_pan_width_idx + 1);
+                } else {
+                  par._players.push(par._player.start()._source); // start playbacks and collect their '_source's..
+                  par._playcount++;
+                  par.children.playcounter.content = '' + par._playcount;
+                  par.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
+                  //
+                  par._socket.emit('sound', {
+                    name: par._key,
+                    action: 'start',
+                    group: 'beach'
+                  });
+                }
+              }
+            }),
+            //playcounterbox
+            new Path.Rectangle({
+              name: 'playcounterbox',
+              point: [vssw * 2.3, row * vssw * 1.4 + vssw * 3.5],
+              size: [vssw * 0.6, vssw * 0.8],
+            }),
+            //playcounter
+            new PointText({
+              name: 'playcounter',
+              content: '' + 0,
+              fillColor: 'white',
+              fontSize: '2em',
+              fontWeight: 'bold'
+            }),
+            //stop button
+            new Group({
+              name: 'stop_btn',
+              children: [
+                new Path.Rectangle({
+                  point: [vssw * 2.9, row * vssw * 1.4 + vssw * 3.5],
+                  radius: vssw * 0.4,
+                  size: [vssw * 1.6, vssw * 0.7],
+                  fillColor: new Color({
+                    hue: getRandom(120, 180),
+                    saturation: 1,
+                    brightness: 1
+                  }),
+                }),
+                minus.clone()
+              ],
+              onMouseDown: function() {
+                var par = this.parent;
+                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
+                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
+                  //pan_width : (-)
+                  if (cur_pan_width_idx > 0) {
+                    cur_pan_width_idx--;
+                  }
+                  cur_pan_width = pan_width_pool[cur_pan_width_idx];
+                  par._socket.emit('pan', {
+                    width: cur_pan_width,
+                    speed: cur_pan_speed
+                  });
+                  par.children.playcounter.content = '' + (cur_pan_width_idx + 1);
+                } else {
+                  if (par._players.length > 0) {
+                    (par._players.shift()).stop();
+                    par._playcount--;
+                    par.children.playcounter.content = '' + par._playcount;
+                  }
+                  if (par._players.length == 0) {
+                    par.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
+                  }
+                  //
+                  par._socket.emit('sound', {
+                    name: par._key,
+                    action: 'stop',
+                    group: 'beach'
+                  });
+                }
+              }
+            }),
+            //faster button
+            new Group({
+              name: 'faster_btn',
+              children: [
+                new Path.Rectangle({
+                  point: [vssw * 5.0, row * vssw * 1.4 + vssw * 3.5],
+                  radius: vssw * 0.4,
+                  size: [vssw * 1.6, vssw * 0.7],
+                  strokeColor: new Color({
+                    hue: getRandom(20, 60),
+                    saturation: 1,
+                    brightness: 1
+                  }),
+                  strokeWidth: vssw * 0.03,
+                  fillColor: "#555"
+                }),
+                faster.clone()
+              ],
+              onMouseDown: function() {
+                var par = this.parent;
+                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
+                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
+                  //pan_speed: (+)
+                  if (cur_pan_speed_idx < (pan_speed_pool.length - 1)) {
+                    cur_pan_speed_idx++;
+                  }
+                  cur_pan_speed = pan_speed_pool[cur_pan_speed_idx];
+                  par._socket.emit('pan', {
+                    width: cur_pan_width,
+                    speed: cur_pan_speed
+                  });
+                  par.children.speedcounter.content = '' + cur_pan_speed_idx;
+                } else {
+                  if (par._players.length > 0) {
+                    par._players[par._players.length - 1].playbackRate.value += 0.2;
+                    par.children.speedcounter.content = Number.parseFloat(par._players[par._players.length - 1].playbackRate.value).toFixed(1);
+                  }
+                  //
+                  par._socket.emit('sound', {
+                    name: par._key,
+                    action: 'faster',
+                    group: 'beach'
+                  });
+                }
+              }
+            }),
+            //speedcounterbox
+            new Path.Rectangle({
+              name: 'speedcounterbox',
+              point: [vssw * 6.6, row * vssw * 1.4 + vssw * 3.5],
+              size: [vssw * 0.6, vssw * 0.8],
+            }),
+            //speedcounter
+            new PointText({
+              name: 'speedcounter',
+              content: '' + 0,
+              fillColor: 'white',
+              fontSize: '2em',
+              fontWeight: 'bold'
+            }),
+            //slower button
+            new Group({
+              name: 'slower_btn',
+              children: [
+                new Path.Rectangle({
+                  point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.5],
+                  radius: vssw * 0.4,
+                  size: [vssw * 1.6, vssw * 0.7],
+                  strokeColor: new Color({
+                    hue: getRandom(120, 180),
+                    saturation: 1,
+                    brightness: 1
+                  }),
+                  strokeWidth: vssw * 0.03,
+                  fillColor: "#555"
+                }),
+                slower.clone()
+              ],
+              onMouseDown: function() {
+                var par = this.parent;
+                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
+                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
+                  //pan_speed: (-)
+                  if (cur_pan_speed_idx > 0) {
+                    cur_pan_speed_idx--;
+                  }
+                  cur_pan_speed = pan_speed_pool[cur_pan_speed_idx];
+                  par._socket.emit('pan', {
+                    width: cur_pan_width,
+                    speed: cur_pan_speed
+                  });
+                  par.children.speedcounter.content = '' + cur_pan_speed_idx;
+                } else {
+                  if (par._players.length > 0) {
+                    var val = par._players[par._players.length - 1].playbackRate.value;
+                    if (val > 0.2) {
+                      par._players[par._players.length - 1].playbackRate.value = val - 0.2;
+                    }
+                    par.children.speedcounter.content = Number.parseFloat(par._players[par._players.length - 1].playbackRate.value).toFixed(1);
+                  }
+                  //
+                  par._socket.emit('sound', {
+                    name: par._key,
+                    action: 'slower',
+                    group: 'beach'
+                  });
+                }
+              }
             })
           ],
-      onClick: function() {
+          _socket: socket,
-        clap.play();
+          _key: Object.keys(beach_sounds)[idx],
-      }
+          _player: beach_sounds[Object.keys(beach_sounds)[idx]],
-    }).addChild(iconsound);
+          _players: beach_players[Object.keys(beach_players)[idx]],
-
+          _playcount: 0,
-    //play mode
+          _init: function() {
-    Object.keys(beach_sounds).forEach(function (key) {
+            this._player.loop = true;
-      //
+            this._player.retrigger = true;
-      beach_sounds[key].loop = true;
+            // set icons
-      beach_sounds[key].retrigger = true;
+            this.children.play_btn.children[1].fitBounds(this.children.play_btn.children[0].bounds);
-
+            this.children.play_btn.children[1].fillColor = "#555";
+            this.children.stop_btn.children[1].fitBounds(this.children.stop_btn.children[0].bounds);
+            this.children.stop_btn.children[1].fillColor = "#555";
+            this.children.faster_btn.children[1].fitBounds(this.children.faster_btn.children[0].bounds);
+            this.children.faster_btn.children[1].fillColor = "orange";
+            this.children.slower_btn.children[1].fitBounds(this.children.slower_btn.children[0].bounds);
+            this.children.slower_btn.children[1].fillColor = "lime";
+            // positioning numberboxes...
+            this.children.playcounter.fitBounds(this.children.playcounterbox.bounds);
+            this.children.speedcounter.fitBounds(this.children.speedcounterbox.bounds);
+            this.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
             //socket io event handling..
-      // var that = this;
+            var that = this;
-      socket.on('sound', function(msg) {
+            this._socket.on('sound', function(msg) {
-        if (msg.group == 'beach' && msg.name == key) {
+              if (msg.group == 'beach' && msg.name == that._key) {
                 if (msg.action == 'start') {
-            beach_players[key].push(beach_sounds[key].start()._source); // start playbacks and collect their '_source's..
+                  that._players.push(that._player.start()._source); // start playbacks and collect their '_source's..
-            beach_playcounts[key]++;
+                  that._playcount++;
+                  that.children.playcounter.content = '' + that._playcount;
+                  that.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
                 } else if (msg.action == 'stop') {
-            if (beach_players[key].length > 0) {
+                  if (that._players.length > 0) {
-              (beach_players[key].shift()).stop();
+                    (that._players.shift()).stop();
-              beach_playcounts[key]--;
+                    that._playcount--;
+                    that.children.playcounter.content = '' + that._playcount;
+                  }
+                  if (that._players.length == 0) {
+                    that.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
                   }
                 } else if (msg.action == 'faster') {
-            if (beach_players[key].length > 0) {
+                  if (that._players.length > 0) {
-              beach_players[key][beach_players[key].length - 1].playbackRate.value += 0.2;
+                    that._players[that._players.length - 1].playbackRate.value += 0.2;
+                    that.children.speedcounter.content = Number.parseFloat(that._players[that._players.length - 1].playbackRate.value).toFixed(1);
                   }
                 } else if (msg.action == 'slower') {
-            if (beach_players[key].length > 0) {
+                  if (that._players.length > 0) {
-              beach_players[key][beach_players[key].length - 1].playbackRate.value -= 0.2;
+                    var val = that._players[that._players.length - 1].playbackRate.value;
+                    if (val > 0.2) {
+                      that._players[that._players.length - 1].playbackRate.value -= 0.2;
+                    }
+                    that.children.speedcounter.content = Number.parseFloat(that._players[that._players.length - 1].playbackRate.value).toFixed(1);
                   }
                 }
               }
             });
+          }
         });
+        c._init();
+        //label
+        new PointText({
+          point: c.firstChild.bounds.topLeft + [0, -5],
+          content: Object.keys(beach_sounds)[idx],
+          fontSize: vssw * 0.55,
+          fontWeight: 'bold',
+          fillColor: 'white'
+        });
+      }
+    }
+
+    //screen #4 - beach page #2
+    changeScreen(4);
+    new Path.Rectangle([0, 0], vs).fillColor = '#555';
+
+    //title - text
+    new PointText({
+      point: [vssw * 2, vssw * 1],
+      content: '           믹스 #2           ',
+      fillColor: 'white',
+      fontFamily: 'AppleGothic, Sans-serif',
+      fontWeight: 'bold',
+      fontSize: '3em'
+    }).fitBounds(titlebox.bounds);
+
+    //
+    for (var row = 0; row < 7; row++) {
+      for (var col = 0; col < 1; col++) {
+        var idx = row * 1 + col + 7;
+
+        //play/stop/playcount/faster/slower button (networked between groups)
+        var c = new Group({
+          children: [
+            //play button
+            new Group({
+              name: 'play_btn',
+              children: [
+                new Path.Rectangle({
+                  point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5],
+                  radius: vssw * 0.4,
+                  size: [vssw * 1.5, vssw * 0.7],
+                  fillColor: new Color({
+                    hue: getRandom(20, 60),
+                    saturation: 1,
+                    brightness: 1
+                  }),
+                }),
+                plus.clone()
+              ],
+              onMouseDown: function(event) {
+                var par = this.parent;
+                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
+                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
+                  //pan_width: (+)
+                  if (cur_pan_width_idx < (pan_width_pool.length - 1)) {
+                    cur_pan_width_idx++;
+                  }
+                  cur_pan_width = pan_width_pool[cur_pan_width_idx];
+                  par._socket.emit('pan', {
+                    width: cur_pan_width,
+                    speed: cur_pan_speed
+                  });
+                  par.children.playcounter.content = '' + (cur_pan_width_idx + 1);
+                } else {
+                  par._players.push(par._player.start()._source); // start playbacks and collect their '_source's..
+                  par._playcount++;
+                  par.children.playcounter.content = '' + par._playcount;
+                  par.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
+                  //
+                  par._socket.emit('sound', {
+                    name: par._key,
+                    action: 'start',
+                    group: 'beach'
+                  });
+                }
+              }
+            }),
+            //playcounterbox
+            new Path.Rectangle({
+              name: 'playcounterbox',
+              point: [vssw * 2.3, row * vssw * 1.4 + vssw * 3.5],
+              size: [vssw * 0.6, vssw * 0.8],
+            }),
+            //playcounter
+            new PointText({
+              name: 'playcounter',
+              content: '' + 0,
+              fillColor: 'white',
+              fontSize: '2em',
+              fontWeight: 'bold'
+            }),
+            //stop button
+            new Group({
+              name: 'stop_btn',
+              children: [
+                new Path.Rectangle({
+                  point: [vssw * 2.9, row * vssw * 1.4 + vssw * 3.5],
+                  radius: vssw * 0.4,
+                  size: [vssw * 1.6, vssw * 0.7],
+                  fillColor: new Color({
+                    hue: getRandom(120, 180),
+                    saturation: 1,
+                    brightness: 1
+                  }),
+                }),
+                minus.clone()
+              ],
+              onMouseDown: function() {
+                var par = this.parent;
+                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
+                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
+                  //pan_width : (-)
+                  if (cur_pan_width_idx > 0) {
+                    cur_pan_width_idx--;
+                  }
+                  cur_pan_width = pan_width_pool[cur_pan_width_idx];
+                  par._socket.emit('pan', {
+                    width: cur_pan_width,
+                    speed: cur_pan_speed
+                  });
+                  par.children.playcounter.content = '' + (cur_pan_width_idx + 1);
+                } else {
+                  if (par._players.length > 0) {
+                    (par._players.shift()).stop();
+                    par._playcount--;
+                    par.children.playcounter.content = '' + par._playcount;
+                  }
+                  if (par._players.length == 0) {
+                    par.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
+                  }
+                  //
+                  par._socket.emit('sound', {
+                    name: par._key,
+                    action: 'stop',
+                    group: 'beach'
+                  });
+                }
+              }
+            }),
+            //faster button
+            new Group({
+              name: 'faster_btn',
+              children: [
+                new Path.Rectangle({
+                  point: [vssw * 5.0, row * vssw * 1.4 + vssw * 3.5],
+                  radius: vssw * 0.4,
+                  size: [vssw * 1.6, vssw * 0.7],
+                  strokeColor: new Color({
+                    hue: getRandom(20, 60),
+                    saturation: 1,
+                    brightness: 1
+                  }),
+                  strokeWidth: vssw * 0.03,
+                  fillColor: "#555"
+                }),
+                faster.clone()
+              ],
+              onMouseDown: function() {
+                var par = this.parent;
+                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
+                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
+                  //pan_speed: (+)
+                  if (cur_pan_speed_idx < (pan_speed_pool.length - 1)) {
+                    cur_pan_speed_idx++;
+                  }
+                  cur_pan_speed = pan_speed_pool[cur_pan_speed_idx];
+                  par._socket.emit('pan', {
+                    width: cur_pan_width,
+                    speed: cur_pan_speed
+                  });
+                  par.children.speedcounter.content = '' + cur_pan_speed_idx;
+                } else {
+                  if (par._players.length > 0) {
+                    par._players[par._players.length - 1].playbackRate.value += 0.2;
+                    par.children.speedcounter.content = Number.parseFloat(par._players[par._players.length - 1].playbackRate.value).toFixed(1);
+                  }
+                  //
+                  par._socket.emit('sound', {
+                    name: par._key,
+                    action: 'faster',
+                    group: 'beach'
+                  });
+                }
+              }
+            }),
+            //speedcounterbox
+            new Path.Rectangle({
+              name: 'speedcounterbox',
+              point: [vssw * 6.6, row * vssw * 1.4 + vssw * 3.5],
+              size: [vssw * 0.6, vssw * 0.8],
+            }),
+            //speedcounter
+            new PointText({
+              name: 'speedcounter',
+              content: '' + 0,
+              fillColor: 'white',
+              fontSize: '2em',
+              fontWeight: 'bold'
+            }),
+            //slower button
+            new Group({
+              name: 'slower_btn',
+              children: [
+                new Path.Rectangle({
+                  point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.5],
+                  radius: vssw * 0.4,
+                  size: [vssw * 1.6, vssw * 0.7],
+                  strokeColor: new Color({
+                    hue: getRandom(120, 180),
+                    saturation: 1,
+                    brightness: 1
+                  }),
+                  strokeWidth: vssw * 0.03,
+                  fillColor: "#555"
+                }),
+                slower.clone()
+              ],
+              onMouseDown: function() {
+                var par = this.parent;
+                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
+                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
+                  //pan_speed: (-)
+                  if (cur_pan_speed_idx > 0) {
+                    cur_pan_speed_idx--;
+                  }
+                  cur_pan_speed = pan_speed_pool[cur_pan_speed_idx];
+                  par._socket.emit('pan', {
+                    width: cur_pan_width,
+                    speed: cur_pan_speed
+                  });
+                  par.children.speedcounter.content = '' + cur_pan_speed_idx;
+                } else {
+                  if (par._players.length > 0) {
+                    var val = par._players[par._players.length - 1].playbackRate.value;
+                    if (val > 0.2) {
+                      par._players[par._players.length - 1].playbackRate.value = val - 0.2;
+                    }
+                    par.children.speedcounter.content = Number.parseFloat(par._players[par._players.length - 1].playbackRate.value).toFixed(1);
+                  }
+                  //
+                  par._socket.emit('sound', {
+                    name: par._key,
+                    action: 'slower',
+                    group: 'beach'
+                  });
+                }
+              }
+            })
+          ],
+          _socket: socket,
+          _key: Object.keys(beach_sounds)[idx],
+          _player: beach_sounds[Object.keys(beach_sounds)[idx]],
+          _players: beach_players[Object.keys(beach_players)[idx]],
+          _playcount: 0,
+          _init: function() {
+            this._player.loop = true;
+            this._player.retrigger = true;
+            // set icons
+            this.children.play_btn.children[1].fitBounds(this.children.play_btn.children[0].bounds);
+            this.children.play_btn.children[1].fillColor = "#555";
+            this.children.stop_btn.children[1].fitBounds(this.children.stop_btn.children[0].bounds);
+            this.children.stop_btn.children[1].fillColor = "#555";
+            this.children.faster_btn.children[1].fitBounds(this.children.faster_btn.children[0].bounds);
+            this.children.faster_btn.children[1].fillColor = "orange";
+            this.children.slower_btn.children[1].fitBounds(this.children.slower_btn.children[0].bounds);
+            this.children.slower_btn.children[1].fillColor = "lime";
+            // positioning numberboxes...
+            this.children.playcounter.fitBounds(this.children.playcounterbox.bounds);
+            this.children.speedcounter.fitBounds(this.children.speedcounterbox.bounds);
+            this.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
+            //socket io event handling..
+            var that = this;
+            this._socket.on('sound', function(msg) {
+              if (msg.group == 'beach' && msg.name == that._key) {
+                if (msg.action == 'start') {
+                  that._players.push(that._player.start()._source); // start playbacks and collect their '_source's..
+                  that._playcount++;
+                  that.children.playcounter.content = '' + that._playcount;
+                  that.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
+                } else if (msg.action == 'stop') {
+                  if (that._players.length > 0) {
+                    (that._players.shift()).stop();
+                    that._playcount--;
+                    that.children.playcounter.content = '' + that._playcount;
+                  }
+                  if (that._players.length == 0) {
+                    that.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
+                  }
+                } else if (msg.action == 'faster') {
+                  if (that._players.length > 0) {
+                    that._players[that._players.length - 1].playbackRate.value += 0.2;
+                    that.children.speedcounter.content = Number.parseFloat(that._players[that._players.length - 1].playbackRate.value).toFixed(1);
+                  }
+                } else if (msg.action == 'slower') {
+                  if (that._players.length > 0) {
+                    var val = that._players[that._players.length - 1].playbackRate.value;
+                    if (val > 0.2) {
+                      that._players[that._players.length - 1].playbackRate.value -= 0.2;
+                    }
+                    that.children.speedcounter.content = Number.parseFloat(that._players[that._players.length - 1].playbackRate.value).toFixed(1);
+                  }
+                }
+              }
+            });
+          }
+        });
+        c._init();
+        //label
+        new PointText({
+          point: c.firstChild.bounds.topLeft + [0, -5],
+          content: Object.keys(beach_sounds)[idx],
+          fontSize: vssw * 0.55,
+          fontWeight: 'bold',
+          fillColor: 'white'
+        });
+      }
+    }
 
     //home
     changeScreen(1);

public/a2/imgs/faster.svg

@@ -0,0 +1,2 @@
+<svg width="0.333333in" height="0.333333in" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M 28.00,52.00 C 30.22,59.49 33.02,60.56 40.00,63.00 39.80,57.93 39.43,54.47 42.65,50.04 52.61,36.31 73.31,45.21 69.00,63.00 68.04,56.83 68.89,51.37 62.82,47.15 55.53,42.07 44.66,45.62 41.85,54.00 40.42,58.29 41.51,61.01 43.00,65.00 39.52,64.06 33.25,61.19 30.02,61.75 25.97,62.45 23.97,66.26 27.32,69.30 29.96,71.70 35.54,72.69 39.00,73.00 39.00,73.00 38.00,76.00 38.00,76.00 43.91,80.13 46.79,83.18 54.00,80.00 54.00,80.00 53.00,76.00 53.00,76.00 53.00,76.00 39.00,75.00 39.00,75.00 49.46,72.04 60.04,79.57 70.90,69.67 83.39,58.28 75.64,36.13 55.00,37.04 45.82,37.44 46.35,41.62 36.00,40.00 36.00,40.00 36.00,38.00 36.00,38.00 47.01,34.86 54.44,28.50 59.00,18.00 44.79,15.13 36.93,28.30 28.00,35.00 31.50,30.74 35.66,25.79 40.00,22.39 44.82,18.61 48.94,19.20 50.00,13.00 39.85,13.50 32.71,17.98 26.53,26.00 26.53,26.00 21.19,34.59 21.19,34.59 18.83,37.36 13.61,38.79 11.95,44.00 10.07,49.86 16.28,56.87 28.00,52.00 Z M 22.00,41.00 C 22.00,41.00 21.00,45.00 21.00,45.00 21.00,45.00 19.00,41.00 19.00,41.00 19.00,41.00 22.00,41.00 22.00,41.00 Z M 78.00,51.00 C 78.00,51.00 78.00,64.00 78.00,64.00 81.95,62.97 84.94,61.72 87.13,57.98 90.26,52.66 87.23,47.63 78.00,51.00 Z M 68.00,63.00 C 68.00,63.00 68.00,64.00 68.00,64.00 68.00,64.00 67.00,63.00 67.00,63.00 67.00,63.00 68.00,63.00 68.00,63.00 Z M 44.00,65.00 C 44.00,65.00 44.00,66.00 44.00,66.00 44.00,66.00 43.00,65.00 43.00,65.00 43.00,65.00 44.00,65.00 44.00,65.00 Z M 67.00,65.00 C 67.00,65.00 67.00,66.00 67.00,66.00 67.00,66.00 66.00,65.00 66.00,65.00 66.00,65.00 67.00,65.00 67.00,65.00 Z"/>
+</svg>

public/a2/imgs/minus.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 91.8 92.6" xmlns="http://www.w3.org/2000/svg"><path fill="#1E1E1E" d="M46.3,3.6c-23.5,0-42.5,19-42.5,42.5c0,23.5,19,42.5,42.5,42.5c23.5,0,42.5-19,42.5-42.5  C88.9,22.7,69.8,3.6,46.3,3.6z M76.4,53.3H15.3c-2.1,0-3.9-1.8-3.9-3.9v-6.4c0-2.1,1.8-3.9,3.9-3.9h61.1c2.1,0,3.9,1.8,3.9,3.9v6.4  C80.3,51.5,78.6,53.3,76.4,53.3z"/></svg>

public/a2/imgs/plus.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 91.8 92.6" xmlns="http://www.w3.org/2000/svg"><path fill="#1E1E1E" d="M46.3,3.6c-23.5,0-42.5,19-42.5,42.5s19,42.5,42.5,42.5c23.5,0,42.5-19,42.5-42.5S69.8,3.6,46.3,3.6z M72.8,52.9H53v19.8c0,2-1.6,3.6-3.6,3.6h-6.2c-2,0-3.6-1.6-3.6-3.6V52.9H19.8c-2,0-3.6-1.6-3.6-3.6v-6.2c0-2,1.6-3.6,3.6-3.6h19.8 V19.7c0-2,1.6-3.6,3.6-3.6h6.2c2,0,3.6,1.6,3.6,3.6v19.8h19.8c2,0,3.6,1.6,3.6,3.6v6.2C76.4,51.2,74.8,52.9,72.8,52.9z"/></svg>

public/a2/imgs/slower.svg

@@ -0,0 +1,2 @@
+<svg width="8.46668mm" height="8.46668mm" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M 26.00,49.00 C 26.00,49.00 26.00,51.00 26.00,51.00 40.40,60.28 54.64,60.46 71.00,57.39 75.83,56.48 79.41,55.92 84.00,54.00 82.30,49.63 80.67,47.75 78.00,44.00 72.09,35.72 68.60,32.13 58.00,32.00 53.01,31.94 48.61,31.69 44.00,34.00 35.87,38.07 35.38,43.97 26.00,49.00 Z M 29.00,61.00 C 29.00,61.00 29.00,63.00 29.00,63.00 29.00,63.00 18.00,66.00 18.00,66.00 26.48,75.31 29.66,67.86 38.00,64.00 38.00,64.00 39.00,70.00 39.00,70.00 39.00,70.00 36.00,71.00 36.00,71.00 38.22,76.57 43.89,76.43 45.99,73.49 47.53,71.29 46.34,66.57 45.99,64.00 45.99,64.00 61.00,64.00 61.00,64.00 61.00,64.00 60.00,70.00 60.00,70.00 60.00,70.00 56.00,70.00 56.00,70.00 57.63,74.90 62.67,76.53 66.15,72.49 69.14,69.01 66.41,67.14 72.00,64.00 73.01,66.55 74.25,69.57 77.07,70.60 80.74,71.94 82.93,67.84 80.97,64.28 80.12,62.73 78.29,61.21 77.00,60.00 77.00,60.00 92.00,54.00 92.00,54.00 88.13,53.44 82.94,56.08 79.00,57.12 72.07,58.94 62.11,60.92 55.00,61.00 46.88,61.09 39.31,59.77 32.00,56.02 26.90,53.41 21.69,48.64 16.00,47.55 8.77,46.15 6.34,52.03 10.31,55.40 12.62,57.36 19.66,57.62 23.00,58.62 23.00,58.62 29.00,61.00 29.00,61.00 Z M 15.00,49.00 C 15.00,49.00 16.00,52.00 16.00,52.00 16.00,52.00 13.00,52.00 13.00,52.00  13.00,52.00 15.00,49.00 15.00,49.00 Z"/>
+</svg>

public/a2/index.js

@@ -27,19 +27,19 @@ $(document).ready(function() {
     //clap
     AudioImport_p5("./audio/clap@2/" + ("0" + getRandomInt(1, 2)).slice(-2) + ".mp3"),
     //beach_sounds page 1 ==> 7
-    AudioImport("./audio/2011_2011.mp3"),
+    AudioImport("./audio/김환_바닥에끄는소리.mp3"),
-    AudioImport("./audio/2011_벨.mp3"),
+    AudioImport("./audio/김환_바닥에끄는소리2.mp3"),
-    AudioImport("./audio/2011_숲.mp3"),
+    AudioImport("./audio/김환_삐-.mp3"),
-    AudioImport("./audio/2011_바람.mp3"),
+    AudioImport("./audio/김환_삑-삑-.mp3"),
-    AudioImport("./audio/2011_헤비레인.mp3"),
+    AudioImport("./audio/고요5.mp3"),
     AudioImport("./audio/고요6.mp3"),
     AudioImport("./audio/고요7.mp3"),
     //beach_sounds page 2 ==> 7
-    AudioImport("./audio/검은산_뚜루.mp3"),
+    AudioImport("./audio/도운_먹고마시는소리.mp3"),
-    AudioImport("./audio/검은산_다급.mp3"),
+    AudioImport("./audio/도운_선풍기.mp3"),
-    AudioImport("./audio/검은산_부엉.mp3"),
+    AudioImport("./audio/도운_선풍기소리.mp3"),
-    AudioImport("./audio/검은산_불안.mp3"),
+    AudioImport("./audio/도운_의자소리.mp3"),
-    AudioImport("./audio/검은산_쏟아짐.mp3"),
+    AudioImport("./audio/도운_주스마시는소리.mp3"),
     AudioImport("./audio/고요13.mp3"),
     AudioImport("./audio/고요14.mp3"),
     //
@@ -59,35 +59,35 @@ $(document).ready(function() {
     //beach list
     //NOTE: beware! same key is not allowed!! every keys should have different name!!
     var beach_sounds = {
-      '2011_2011': imports[10],
+      '김환_바닥에끄는소리': imports[10],
-      '2011_벨': imports[11],
+      '김환_바닥에끄는소리2': imports[11],
-      '2011_숲': imports[12],
+      '김환_삐-': imports[12],
-      '2011_바람': imports[13],
+      '김환_삑-삑-': imports[13],
-      '2011_헤비레인': imports[14],
+      '고요5': imports[14],
       '고요6': imports[15],
       '_소리의_퍼짐______소리의_움직임_1': imports[16],
-      '검은산_뚜루': imports[17],
+      '도운_먹고마시는소리': imports[17],
-      '검은산_다급': imports[18],
+      '도운_선풍기': imports[18],
-      '검은산_부엉': imports[19],
+      '도운_선풍기소리': imports[19],
-      '검은산_불안': imports[20],
+      '도운_의자소리': imports[20],
-      '검은산_쏟아짐': imports[21],
+      '도운_주스마시는소리': imports[21],
       '고요13': imports[22],
       '_소리의_퍼짐______소리의_움직임_2': imports[23],
     };
     //NOTE: beware! same key is not allowed!! every keys should have different name!!
     var beach_players = {
-      '2011_2011': [],
+      '김환_바닥에끄는소리': [],
-      '2011_벨': [],
+      '김환_바닥에끄는소리2': [],
-      '2011_숲': [],
+      '김환_삐-': [],
-      '2011_바람': [],
+      '김환_삑-삑-': [],
-      '2011_헤비레인': [],
+      '고요5': [],
       '고요6': [],
       '_소리의_퍼짐______소리의_움직임_1': [],
-      '검은산_뚜루': [],
+      '도운_먹고마시는소리': [],
-      '검은산_다급': [],
+      '도운_선풍기': [],
-      '검은산_부엉': [],
+      '도운_선풍기소리': [],
-      '검은산_불안': [],
+      '도운_의자소리': [],
-      '검은산_쏟아짐': [],
+      '도운_주스마시는소리': [],
       '고요13': [],
       '_소리의_퍼짐______소리의_움직임_2': [],
     };

public/a3/.tern-port

@@ -0,0 +1 @@
+42761