diff --git a/frontend/index.html b/frontend/index.html index 9447f1e5337335ff7ab14f66eb5d34c1946ef4b1..e207b6666ac05e12d6b1b8741c0f193688b3f582 100644 --- a/frontend/index.html +++ b/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> diff --git a/frontend/script2.js b/frontend/script2.js new file mode 100644 index 0000000000000000000000000000000000000000..71f6f30ff3b32bd16c4035f9a57689648f15493f --- /dev/null +++ b/frontend/script2.js @@ -0,0 +1,90 @@ +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();