Update templates/index.html

templates/index.html

@@ -11,7 +11,7 @@
         <div class="content">
             <h2>Set: {{ set_name }} ({{ index + 1 }}/{{ total }})</h2>
             <p id="card-text"><strong>English:</strong> {{ english }}</p>
-            <audio controls>
+            <audio controls id="audioPlayer">
                 <source src="{{ audio_url }}" type="audio/mp3">
                 Your browser does not support the audio element.
             </audio>
@@ -22,22 +22,8 @@
             <button id="nextBtn">Next</button>
         </div>
     </div>
-    <script>
-        // Flashcardのズームを調整
-        function adjustFlashcardScale() {
-            const flashcard = document.getElementById('flashcard');
-            const windowWidth = window.innerWidth;
-            const flashcardWidth = flashcard.offsetWidth;
-
-            // スケールを計算して適用
-            const scale = windowWidth / flashcardWidth-0.2;
-            flashcard.style.transform = `scale(${scale})`;
-        }
-
-        // ページロード時とリサイズ時にスケールを適用
-        window.addEventListener('load', adjustFlashcardScale);
-        window.addEventListener('resize', adjustFlashcardScale);
 
+    <script>
         const flipBtn = document.getElementById('flipBtn');
         let showingEnglish = true;
         const englishText = "<strong>English:</strong> {{ english }}";
@@ -55,41 +41,27 @@
         });
 
         document.getElementById('prevBtn').addEventListener('click', function() {
-            let newIndex = {{ index }} - 1;
-            if (newIndex < 0) {
-                newIndex = {{ total }} - 1;
-            }
-            navigate('{{ url_for("index") }}?set={{ set_name }}&index=' + newIndex);
+            updateAudio('{{ set_name }}', {{ index }} - 1);
         });
 
         document.getElementById('nextBtn').addEventListener('click', function() {
-            let newIndex = {{ index }} + 1;
-            if (newIndex >= {{ total }}) {
-                newIndex = 0;
-            }
-            navigate('{{ url_for("index") }}?set={{ set_name }}&index=' + newIndex);
+            updateAudio('{{ set_name }}', {{ index }} + 1);
         });
 
-        function navigate(url) {
-            const flashcard = document.getElementById('flashcard');
-            animateFadeOut(flashcard, function() {
-                window.location.href = url;
-            });
-        }
-
-        function animateFadeOut(element, callback) {
-            let opacity = 1;
-            function fade() {
-                opacity -= 0.1;
-                if (opacity <= 0) {
-                    element.style.opacity = 0;
-                    callback();
-                } else {
-                    element.style.opacity = opacity;
-                    requestAnimationFrame(fade);
-                }
+        function updateAudio(setName, newIndex) {
+            if (newIndex < 0) {
+                newIndex = {{ total }} - 1;
+            } else if (newIndex >= {{ total }}) {
+                newIndex = 0;
             }
-            fade();
+
+            fetch(`/whereAudio?set=${setName}&index=${newIndex}`)
+                .then(response => response.json())
+                .then(data => {
+                    const audioPlayer = document.getElementById('audioPlayer');
+                    audioPlayer.src = data.audio_url;
+                    audioPlayer.play();
+                });
         }
     </script>
 </body>