Update demo dependencies

lf2com · Mar 18, 2022 · 65632f9 · 65632f9
1 parent ded86f1
commit 65632f9
Show file tree

Hide file tree

Showing 12 changed files with 28 additions and 282,030 deletions.
diff --git a/demo/cd/index.html b/demo/cd/index.html
@@ -5,8 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
     <title>Knob.js Demo - CD</title>
     <link href="./style.scss" type="text/scss" rel="stylesheet" />
-    <script src="../utils/scriptLoader.js" module="scss/index"></script>
-    <script src="../utils/knob/index.js"></script>
+    <script
+      src="https://cdn.jsdelivr.net/gh/lf2com/browser-utils@latest/dist/scriptLoader.js"
+      event:load="ready"
+      module="
+        ~/scss;
+        ../utils/knob
+      "
+    ></script>
   </head>
   <body>
     <!-- CD -->

diff --git a/demo/cd/main.js b/demo/cd/main.js
@@ -18,7 +18,7 @@
   const domDuration = domControl.querySelector('.duration');
   const domDurationCurrent = domDuration.querySelector('.current');
   const domDurationTotal = domDuration.querySelector('.total');
-  const audio = document.getElementById('cd-audio');
+  const audio = new Audio('./thief.mp3');
 
   /**
    * Returns degree.
@@ -106,19 +106,21 @@
   domLicense.innerHTML = CD_LICENSE;
 
   // init audio
-  audio.addEventListener('canplay', () => {
+  audio.addEventListener('loadedmetadata', () => {
     const { duration } = audio;
 
-    domCd.min = 0;
-    domCd.max = sec2deg(audio.duration);
+    domCd.setAttribute('min', 0);
+    domCd.setAttribute('max', sec2deg(duration));
     setCurrent(0);
     setTotal(duration);
   }, { once: true });
 
   // stop
+  window.cd = domCd;
   domStop.addEventListener('click', () => {
     audio.pause();
-    audio.currentTime = 0;
+    setCurrent(0, 0);
+    domCd.degree = 0;
   });
 
   // pause

diff --git a/demo/knob/index.html b/demo/knob/index.html
@@ -5,8 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
     <title>Knob.js Demo - Knob</title>
     <link href="./style.scss" type="text/scss" rel="stylesheet" />
-    <script src="../utils/scriptLoader.js" module="scss/index"></script>
-    <script src="../utils/knob/index.js"></script>
+    <script
+      src="https://cdn.jsdelivr.net/gh/lf2com/browser-utils@latest/dist/scriptLoader.js"
+      module="
+        ~/scss;
+        ../utils/knob
+      "
+    ></script>
   </head>
   <body>
     <div id="degree" class="row">