Update index.html

index.html

@@ -7,6 +7,66 @@
     <script>
         eruda.init();
     </script>
+    <script>
+      //青いスクロールバーを追加
+        document.addEventListener("DOMContentLoaded", () => {
+          document.querySelectorAll("input[type='range']").forEach((slider) => {
+            const bubble = document.createElement("div");
+            bubble.style.position = "absolute";
+            bubble.style.background = "#333a";
+            bubble.style.color = "#fff";
+            bubble.style.padding = "4px 8px";
+            bubble.style.borderRadius = "4px";
+            bubble.style.fontSize = "12px";
+            bubble.style.pointerEvents = "none";
+            bubble.style.whiteSpace = "nowrap";
+            bubble.style.transform = "translate(-50%, -120%)";
+            bubble.style.transition = "opacity 0.1s";
+            bubble.style.opacity = "0";
+            bubble.style.zIndex = "1000";
+            document.body.appendChild(bubble);
+
+            let rect = null;
+        
+            slider.addEventListener("mouseenter", () => {
+              rect = slider.getBoundingClientRect();
+              bubble.style.opacity = "1";
+            });
+      
+            slider.addEventListener("mouseleave", () => {
+              bubble.style.opacity = "0";
+            });
+
+            slider.addEventListener("mousemove", (e) => {
+              if (!rect) rect = slider.getBoundingClientRect();
+              const min = parseFloat(slider.min || 0);
+              const max = parseFloat(slider.max || 100);
+              const step = parseFloat(slider.step || 1);
+              const relativeX = e.clientX - rect.left;
+              const percent = Math.min(Math.max(relativeX / rect.width, 0), 1);
+              let value = min + (max - min) * percent;
+              value = Math.round(value / step) * step;
+
+              // スライダーの値として表示
+              bubble.textContent = value;
+        
+              // ツールチップの位置調整
+              const pageX = e.pageX;
+              const pageY = window.scrollY + rect.top;
+              bubble.style.left = `${pageX}px`;
+              bubble.style.top = `${pageY}px`;
+            });
+        
+            window.addEventListener("scroll", () => {
+              rect = slider.getBoundingClientRect();
+            });
+        
+            window.addEventListener("resize", () => {
+              rect = slider.getBoundingClientRect();
+            });
+          });
+        });
+    </script>
     <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgbGFuZz0iamEiPjxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQxIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+IDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzNDc0ZWIiIC8+IDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM0YThlYiIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8IS0tIOWQhOS6uuWbvuWkjeS9nOWumuS7tuWkjeaWsOWIl+OBjOaWsOWIl+OBq+OBhOOBq+OBvuOBq+OCi+OCieWbvuWkjeOBjOOCjOOCieOCk+ODq+ODvOODrOODs+ODg+OCiwotLT4gPHBvbHlnb24gcG9pbnRzPSI1MCw1MCA1MCwxNTAgMTUwLDEwMCIgZmlsbD0idXJsKCNncmFkMSkiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgLz48L3N2Zz4=">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -1335,21 +1395,18 @@
                 }
             });
         
-        // startSyncCheck関数を修正
         function startSyncCheck() {
           if (isCheckingSync) return;
           isCheckingSync = true;
           if (syncCheckInterval) clearInterval(syncCheckInterval);
           syncCheckInterval = setInterval(checkSync, 1000);
         }
-        
-        // stopSyncCheck関数を修正
+
         function stopSyncCheck() {
           isCheckingSync = false;
           if (syncCheckInterval) clearInterval(syncCheckInterval);
         }
-        
-        // checkSync関数を修正（バックグラウンド時はチェックしない）
+
         function checkSync() {
           if (!isAudioCombined || !isPlaying || isBuffering || isInBackgroundTab) return;