🐛 FIX: ios

yoanbernabeu · Sep 22, 2024 · ba2369f · ba2369f
1 parent dba5fe2
commit ba2369f
Showing 1 changed file with 46 additions and 9 deletions.
diff --git a/app/index.html b/app/index.html
@@ -51,7 +51,7 @@
         .options input[type="checkbox"] {
             margin-right: 10px;
         }
-        #startButton, #addTimeButton, #endButton {
+        #startButton, #addTimeButton, #endButton, #playAudioButton {
             background-color: #0f3460;
             color: #eaeaea;
             border: none;
@@ -60,13 +60,23 @@
             margin-top: 20px;
             cursor: pointer;
             width: 100%;
+            transition: all 0.3s ease;
         }
-        #startButton:hover, #addTimeButton:hover, #endButton:hover {
+        #startButton:hover, #addTimeButton:hover, #endButton:hover, #playAudioButton:hover {
             background-color: #16213e;
         }
-        #addTimeButton, #endButton {
+        #addTimeButton, #endButton, #playAudioButton {
             display: none;
         }
+        #playAudioButton {
+            background-color: transparent;
+            border: 2px solid #e94560;
+            color: #e94560;
+        }
+        #playAudioButton:hover {
+            background-color: #e94560;
+            color: #eaeaea;
+        }
         #timerDisplay {
             font-size: 3em;
             margin-top: 30px;
@@ -103,6 +113,14 @@
             width: 100%;
             height: 50px;
         }
+        #playAudioButton {
+            background-color: transparent;
+            border: 2px solid #e94560;
+            color: #e94560;
+            margin-top: 10px;
+            cursor: pointer;
+            display: none;
+        }
     </style>
 </head>
 <body>
@@ -120,6 +138,7 @@ <h1>Le Cristal des Rêves - Minuteur</h1>
         <button id="endButton">Mettre fin à la partie</button>
         <div id="timerDisplay">45:00</div>
         <button id="addTimeButton">+1 Minute (Fragment Retrouvé)</button>
+        <button id="playAudioButton">Jouer la musique</button>
     </div>
 
     <div id="audioPlayer" style="display: none;">
@@ -145,6 +164,7 @@ <h1>Le Cristal des Rêves - Minuteur</h1>
         const endButton = document.getElementById('endButton');
         const audioPlayer = document.getElementById('audioPlayer');
         const songTitle = document.getElementById('songTitle');
+        const playAudioButton = document.getElementById('playAudioButton');
 
         const songTitles = [
             "Début de l'aventure",
@@ -158,14 +178,18 @@ <h1>Le Cristal des Rêves - Minuteur</h1>
         addTimeButton.addEventListener('click', addOneMinute);
         endButton.addEventListener('click', endGame);
 
-        // Créer les objets Howl pour chaque son
+        // Créer les objets Howl pour chaque son avec des options spécifiques pour iOS
         const audioFiles = ['song01.mp3', 'song02.mp3', 'song03.mp3', 'song04.mp3', 'song05.mp3'];
         audioFiles.forEach((file, index) => {
             sounds[index] = new Howl({
                 src: [file],
                 loop: true,
                 volume: 0,
                 preload: true,
+                html5: true,
+                onloaderror: function(id, error) {
+                    console.error('Erreur de chargement du son:', error);
+                }
             });
         });
 
@@ -206,7 +230,9 @@ <h1>Le Cristal des Rêves - Minuteur</h1>
             displayTime(remainingTime);
 
             calculateSongSegments();
-            playAllSongs();
+
+            playAudioButton.style.display = 'block';
+            playAudioButton.addEventListener('click', playAllSongs);
 
             initWaveSurfer();
             audioPlayer.style.display = 'flex';
@@ -275,17 +301,25 @@ <h1>Le Cristal des Rêves - Minuteur</h1>
         }
 
         function playAllSongs() {
-            sounds.forEach(sound => sound.play());
+            playAudioButton.style.display = 'none';
+            sounds.forEach(sound => {
+                sound.play();
+                sound.fade(0, 0, 1); // Commencer avec un volume de 0
+            });
             adjustVolumes();
+            initWaveSurfer();
+            audioPlayer.style.display = 'flex';
         }
 
         function adjustVolumes() {
             sounds.forEach((sound, index) => {
                 if (index === currentSongIndex) {
                     sound.fade(sound.volume(), 1, 2000);
                     songTitle.textContent = songTitles[index];
-                    wavesurfer.load(audioFiles[index]);
-                    wavesurfer.play();
+                    if (wavesurfer) {
+                        wavesurfer.load(audioFiles[index]);
+                        wavesurfer.play();
+                    }
                 } else {
                     sound.fade(sound.volume(), 0, 2000);
                 }
@@ -294,8 +328,11 @@ <h1>Le Cristal des Rêves - Minuteur</h1>
 
         function stopAudio() {
             sounds.forEach(sound => sound.stop());
-            wavesurfer.stop();
+            if (wavesurfer) {
+                wavesurfer.stop();
+            }
             audioPlayer.style.display = 'none';
+            playAudioButton.style.display = 'none';
         }
 
         function endGame() {