Merge branch 'main' of https://forge.univ-lyon1.fr/p2308653/raspberry-pi

frontend/index.html

@@ -10,12 +10,12 @@
     <div class="container">
         <h1 class="loopStation">Loop Station</h1>
         <div id="tracks-container"></div>
-        <button id="add-track">Ajouter une piste</button>
+        <button id="add-track">Add Audio Track</button>
         <input type="file" id="file-input" accept="audio/*" style="display: none;" />
     </div>
 
     <script src="http://unpkg.com/tone"></script>
-    <script src="script.js"></script>
+    <script src="script2.js"></script>
 </body>
 
 </html>

frontend/script2.js

+function main(){
+    document.addEventListener("DOMContentLoaded", () => {
+        const tracksContainer = document.getElementById("tracks-container");
+        const addTrackButton = document.getElementById("add-track");
+        const fileInput = document.getElementById("file-input");
+
+        function createTrack(audioFile = null) {
+            const track = document.createElement("div");
+            track.classList.add("track");
+
+            const waveform = document.createElement("div");
+            waveform.classList.add("waveform");
+
+            const playhead = document.createElement("div");
+            playhead.classList.add("playhead");
+            waveform.appendChild(playhead);
+
+            const playButton = document.createElement("button");
+            playButton.textContent = "Play";
+
+            const muteButton = document.createElement("button");
+            muteButton.textContent = "Mute";
+
+            const player = new Tone.Player(audioFile).toDestination();
+            player.loop = true;
+
+            let animationFrame;
+            playButton.addEventListener("click", () => {
+                if (player.state === "started") {
+                    player.stop();
+                    playButton.textContent = "Play";
+                    cancelAnimationFrame(animationFrame);
+                } else {
+                    player.start();
+                    playButton.textContent = "Stop";
+                    const startTime = Tone.now();
+                    const duration = player.buffer.duration;
+
+                    function updatePlayhead() {
+                        const elapsedTime = Tone.now() - startTime;
+                        const progress = (elapsedTime % duration) / duration;
+                        playhead.style.transform = `translateX(${progress * 100}%)`;
+                        animationFrame = requestAnimationFrame(updatePlayhead);
+                    }
+                    updatePlayhead();
+                }
+            });
+
+            muteButton.addEventListener("click", () => {
+                player.mute = !player.mute;
+                muteButton.textContent = player.mute ? "Unmute" : "Mute";
+            });
+
+            track.appendChild(waveform);
+            track.appendChild(playButton);
+            track.appendChild(muteButton);
+
+            tracksContainer.appendChild(track);
+        }
+
+        addTrackButton.addEventListener("click", () => {
+            fileInput.click();
+        });
+
+        fileInput.addEventListener("change", (event) => {
+            const file = event.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const audioUrl = e.target.result;
+                    createTrack(audioUrl);
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+    });
+
+
+    const osc = new Tone.Oscillator().toDestination().start();
+    // a scheduleable signal which can be connected to control an AudioParam or another Signal
+    const signal = new Tone.Signal({
+        value: "C4",
+        units: "frequency"
+    }).connect(osc.frequency);
+    // the scheduled ramp controls the connected signal
+    signal.rampTo("C2", 4, "+0.5");
+    console.log(signal);
+
+}
+main();