chore: Update playground

Korilakkuma · Oct 29, 2023 · 50b990e · 50b990e
1 parent 7b6d904
commit 50b990e
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 7 deletions.
diff --git a/playground/assets/app.css b/playground/assets/app.css
@@ -244,6 +244,11 @@ textarea {
   margin: 4px 0 0;
 }
 
+canvas {
+  width: 1200px;
+  height: 150px;
+}
+
 canvas,
 svg {
   background-color: #000;

diff --git a/playground/assets/examples/audio/index.js b/playground/assets/examples/audio/index.js
@@ -22,10 +22,21 @@ X('audio').setup({
   }
 });
 
+const styles = {
+  font  : {
+    size: '48px'
+  },
+  width : 4,
+  top   : 64,
+  bottom: 64,
+  left  : 124
+};
+
 X('audio')
   .module('analyser')
   .domain('timeoverview', 0)
   .setup(document.querySelector('canvas'))
+  .param({ styles })
   .drag((event, startTime, endTime, mode, direction) => {
     X('audio').param({ currentTime: endTime });
   })

diff --git a/playground/assets/examples/media/index.js b/playground/assets/examples/media/index.js
@@ -21,11 +21,21 @@ X('media').setup({
   }
 });
 
+const styles = {
+  font  : {
+    size: '48px'
+  },
+  width : 4,
+  top   : 64,
+  bottom: 64,
+  left  : 124
+};
+
 X('media')
   .module('analyser')
   .domain('time', 0)
   .setup(document.querySelector('canvas'))
-  .param({ interval: -1 })
+  .param({ interval: -1, styles })
   .activate();
 
 document.getElementById('button-start').onclick = () => {

diff --git a/playground/assets/examples/mixer/index.js b/playground/assets/examples/mixer/index.js
@@ -24,11 +24,21 @@ X('audio').setup({
   }
 });
 
+const styles = {
+  font  : {
+    size: '48px'
+  },
+  width : 4,
+  top   : 64,
+  bottom: 64,
+  left  : 124
+};
+
 X('mixer')
   .module('analyser')
   .domain('time', 0)
   .setup(document.querySelector('canvas'))
-  .param({ interval: -1 })
+  .param({ interval: -1, styles })
   .activate();
 
 document.getElementById('button-start').onclick = () => {

diff --git a/playground/assets/examples/noise/index.js b/playground/assets/examples/noise/index.js
@@ -1,10 +1,20 @@
 X('noise').setup();
 
+const styles = {
+  font  : {
+    size: '48px'
+  },
+  width : 4,
+  top   : 64,
+  bottom: 64,
+  left  : 124
+};
+
 X('noise')
   .module('analyser')
   .domain('time', 0)
   .setup(document.querySelector('canvas'))
-  .param({ interval: -1 })
+  .param({ interval: -1, styles })
   .activate();
 
 document.getElementById('button-start').onclick = () => {

diff --git a/playground/assets/examples/oneshot/index.js b/playground/assets/examples/oneshot/index.js
@@ -90,11 +90,21 @@ for (let i = 0; i < 88; i++) {
 }
 
 const successCallback = () => {
+  const styles = {
+    font  : {
+      size: '48px'
+    },
+    width : 4,
+    top   : 64,
+    bottom: 64,
+    left  : 124
+  };
+
   X('oneshot')
     .module('analyser')
     .domain('time', 0)
     .setup(document.querySelector('canvas'))
-    .param({ interval: -1 })
+    .param({ interval: -1, styles })
     .activate();
 
   document.getElementById('button-start').onclick = () => {

diff --git a/playground/assets/examples/oscillator/index.js b/playground/assets/examples/oscillator/index.js
@@ -1,10 +1,20 @@
 X('oscillator').setup([true, true, false, false]);
 
+const styles = {
+  font  : {
+    size: '48px'
+  },
+  width : 4,
+  top   : 64,
+  bottom: 64,
+  left  : 124
+};
+
 X('oscillator')
   .module('analyser')
   .domain('time', 0)
   .setup(document.querySelector('canvas'))
-  .param({ interval: -1 })
+  .param({ interval: -1, styles })
   .activate();
 
 document.getElementById('button-start').onclick = () => {

diff --git a/playground/assets/examples/processor/index.js b/playground/assets/examples/processor/index.js
@@ -1,12 +1,22 @@
 const result = document.getElementById('result-text');
 
+const styles = {
+  font  : {
+    size: '48px'
+  },
+  width : 4,
+  top   : 64,
+  bottom: 64,
+  left  : 124
+};
+
 X('processor').setup('custom-oscillator');
 
 X('processor')
   .module('analyser')
   .domain('time', 0)
   .setup(document.querySelector('canvas'))
-  .param({ interval: -1 })
+  .param({ interval: -1, styles })
   .activate();
 
 X('processor')

diff --git a/playground/assets/examples/recorder/index.js b/playground/assets/examples/recorder/index.js
@@ -1,5 +1,15 @@
 const result = document.getElementById('result-text');
 
+const styles = {
+  font  : {
+    size: '48px'
+  },
+  width : 4,
+  top   : 64,
+  bottom: 64,
+  left  : 124
+};
+
 X('stream').setup({
   audio: true,
   video: false
@@ -9,6 +19,7 @@ X('stream')
   .module('analyser')
   .domain('time', 0)
   .setup(document.querySelector('canvas'))
+  .param({ interval: -1, styles })
   .activate();
 
 X('stream')

diff --git a/playground/assets/examples/stream/index.js b/playground/assets/examples/stream/index.js
@@ -1,5 +1,15 @@
 const result = document.getElementById('result-text');
 
+const styles = {
+  font  : {
+    size: '48px'
+  },
+  width : 4,
+  top   : 64,
+  bottom: 64,
+  left  : 124
+};
+
 X('stream').setup({
   audio: true,
   video: false
@@ -9,6 +19,7 @@ X('stream')
   .module('analyser')
   .domain('time', 0)
   .setup(document.querySelector('canvas'))
+  .param({ styles })
   .activate();
 
 X('stream')

diff --git a/playground/index.html b/playground/index.html
@@ -136,7 +136,7 @@ <h1>XSound Playground</h1>
           <button id="button-set-parameters">Set</button>
         </div>
         <div>
-          <canvas width="1200" height="150"></canvas>
+          <canvas width="4800" height="600"></canvas>
           <svg width="1200" height="150"></svg>
         </div>
       </fieldset>