Skip to content
Snippets Groups Projects
Commit 350a8ebe authored by LAKHAL MAYSSA p2308653's avatar LAKHAL MAYSSA p2308653
Browse files
parents 9fa6c8d2 7e0b57da
No related branches found
No related tags found
No related merge requests found
......@@ -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>
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();
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment