Add button to stop playing

data/www/index.html

@@ -15,6 +15,7 @@
 
     <div class="w3-margin w3-center w3-card w3-padding-24">
         <button onclick="play()" class="w3-button w3-blue w3-xlarge w3-ripple">Jouer le son</button>
+        <button onclick="stop()" class="w3-button w3-blue w3-xlarge w3-ripple">Stop</button>
     </div>
 
     <div class="w3-margin w3-center w3-card w3-padding-24">

data/www/script.js

@@ -1,4 +1,5 @@
-const GLOBAL_TIMEOUT = 7000;
+const GLOBAL_TIMEOUT = 10000;
+let connectionOk = true;
 
 function play() {
     console.log("Play...");
@@ -6,6 +7,12 @@ function play() {
         .catch(handleError);
 }
 
+function stop() {
+    console.log("Stop...");
+    fetch("/stop", { signal: AbortSignal.timeout(GLOBAL_TIMEOUT) })
+        .catch(handleError);
+}
+
 function volume(modifier) {
     const body = new FormData();
     body.set("modifier", modifier);
@@ -35,7 +42,11 @@ function selectFile(name) {
 
 function handleStatus(data) {
     document.body.classList.remove("w3-disabled");
-    console.log("data", data);
+    if (!connectionOk) {
+        connectionOk = true;
+        location.reload();
+    }
+
     let dom = "";
     data.files.forEach(element => {
         if (element === data.selectedFile) {
@@ -54,6 +65,7 @@ function handleStatus(data) {
 function handleError() {
     console.log("Lost connection :'(");
     document.body.classList.add("w3-disabled");
+    connectionOk = false;
 }
 
 (() => {

src/main.cpp

@@ -74,6 +74,12 @@ void play()
   audio.connecttoFS(SD, path.c_str());
 }
 
+void onStop(AsyncWebServerRequest *request)
+{
+  audio.stopSong();
+  request->send(200);
+}
+
 void onPlay(AsyncWebServerRequest *request)
 {
   play();
@@ -237,6 +243,7 @@ void setup()
 
   // Server
   server.on("/play", HTTP_GET, onPlay);
+  server.on("/stop", HTTP_GET, onStop);
   server.on("/status", HTTP_GET, onStatus);
   server.on("/select-file", HTTP_POST, onSelectFile);
   server.on("/change-volume", HTTP_POST, onChangeVolume);