Filters
function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
}
function createTracks(trackCount) {
const mixerContainer = document.getElementById('mixerContainer');
mixerContainer.innerHTML = ''; // Clear previous tracks
const mixer = document.createElement('div');
mixer.classList.add('mixer');
const playButton = document.createElement('button');
playButton.textContent = 'Play';
playButton.addEventListener('click', handlePlayButtonClick);
const pauseButton = document.createElement('button');
pauseButton.textContent = 'Pause';
pauseButton.addEventListener('click', handlePauseButtonClick);
const stopButton = document.createElement('button');
stopButton.textContent = 'Stop';
stopButton.addEventListener('click', handleStopButtonClick);
for (let i = 0; i < trackCount; i++) {
const fader = document.createElement('div');
fader.classList.add('fader');
const handle = document.createElement('div');
handle.classList.add('handle');
handle.addEventListener('mousedown', handleMouseDown);
handle.addEventListener('mousemove', handleMouseMove);
handle.addEventListener('mouseup', handleMouseUp);
handle.style.top = '20%';
const uploadSquare = document.createElement('div');
uploadSquare.classList.add('upload-square');
uploadSquare.addEventListener('click', handleUploadSquareClick);
const uploadButton = document.createElement('input');
uploadButton.type = 'file';
uploadButton.classList.add('upload-button');
uploadButton.addEventListener('change', handleFileUpload);
const trackName = document.createElement('div');
trackName.classList.add('track-name');
trackName.textContent = `P${i + 1}`;
const muteButton = document.createElement('button');
muteButton.classList.add('mute-button');
muteButton.innerHTML = 'M';
muteButton.addEventListener('click', handleMuteButtonClick);
if (i === trackCount - 1) {
trackName.textContent = 'Click'; // Set the name of second-to-last track as "Click"
} else {
trackName.textContent = `P${i + 1}`; // Use the default naming convention for other tracks
}
uploadSquare.appendChild(uploadButton);
fader.appendChild(handle);
fader.appendChild(uploadSquare);
fader.appendChild(trackName);
fader.appendChild(muteButton);
mixer.appendChild(fader);
}
const masterFader = document.createElement('div');
masterFader.classList.add('master-fader');
const masterHandle = document.createElement('div');
masterHandle.classList.add('handle');
masterHandle.addEventListener('mousedown', handleMouseDown);
masterHandle.addEventListener('mousemove', handleMouseMove);
masterHandle.addEventListener('mouseup', handleMouseUp);
masterHandle.style.top = '20%';
masterFader.appendChild(masterHandle);
mixer.appendChild(masterFader);
mixer.appendChild(playButton);
mixer.appendChild(pauseButton);
mixer.appendChild(stopButton);
mixerContainer.appendChild(mixer);
}
function handleMuteButtonClick(event) {
const muteButton = event.target;
const fader = muteButton.parentNode;
const audioElement = fader.querySelector('.upload-square.uploaded audio');
audioElement.muted = !audioElement.muted; // Toggle the muted state of the audio element
muteButton.classList.toggle('muted'); // Toggle the 'muted' class to change button appearance
}
function handleUploadSquareClick(event) {
const uploadSquare = event.target;
const uploadButton = uploadSquare.querySelector('.upload-button');
uploadButton.click();
}
function handleFileUpload(event) {
const uploadButton = event.target;
const uploadSquare = uploadButton.parentNode;
if (uploadButton.files.length > 0) {
const file = uploadButton.files[0];
const audioElement = document.createElement('audio');
audioElement.src = URL.createObjectURL(file);
audioElement.addEventListener('ended', handleAudioEnded);
uploadSquare.classList.add('uploaded');
uploadSquare.appendChild(audioElement);
// Set initial volume based on fader handle position
const fader = uploadSquare.closest('.fader');
const handle = fader.querySelector('.handle');
const faderHeight = fader.offsetHeight;
const handlePositionPercentage = parseInt(handle.style.top) / (faderHeight - handle.offsetHeight);
audioElement.realVolume = 1 - handlePositionPercentage;
audioElement.volume = audioElement.realVolume * MASTER_VOLUME;
} else {
uploadSquare.classList.remove('uploaded');
}
}
function handleAudioEnded(event) {
const audioElement = event.target;
const uploadSquare = audioElement.parentNode;
uploadSquare.classList.remove('uploaded');
audioElement.remove();
}
let isDragging = false;
let initialY = 0;
let currentY = 0;
let handle = null;
document.addEventListener('mousedown', handleMouseDown);
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
function handleMouseDown(event) {
if (event.target.classList.contains('handle')) {
isDragging = true;
handle = event.target;
initialY = event.clientY;
currentY = parseInt(window.getComputedStyle(handle).getPropertyValue('top'));
event.stopPropagation();
}
}
var MASTER_VOLUME = 1.0;
function handleMouseMove(event) {
if (!isDragging || !handle) return;
if (!handle.parentNode.classList.contains('master-fader')) {
const fader = handle.closest('.fader');
const audioElement = fader.querySelector('.upload-square.uploaded audio');
audioElement.realVolume = audioElement.volume;
}
const deltaY = event.clientY - initialY;
const newTop = currentY + deltaY;
const faderHeight = handle.parentNode.offsetHeight;
const maxTop = faderHeight - handle.offsetHeight;
if (handle.parentNode.classList.contains('master-fader')) {
MASTER_VOLUME = 1 - newTop / maxTop;
const audioElements = document.querySelectorAll('.upload-square.uploaded audio');
audioElements.forEach((audioElement) => {
audioElement.volume = clamp(audioElement.realVolume * MASTER_VOLUME, 0, 1);
});
} else {
const volume = newTop / maxTop;
const audioElement = handle.parentNode.querySelector('audio');
audioElement.realVolume = 1 - volume;
audioElement.volume = clamp(audioElement.realVolume * MASTER_VOLUME, 0, 1);
}
handle.style.top = `${Math.min(Math.max(newTop, 0), maxTop)}px`;
event.stopPropagation();
}
function handleMouseUp(event) {
isDragging = false;
handle = null;
event.stopPropagation();
}
const createTracksButton = document.getElementById('createTracksButton');
createTracksButton.addEventListener('click', function () {
const trackCountInput = document.getElementById('trackCount');
const trackCount = parseInt(trackCountInput.value);
createTracks(trackCount);
});
// Event listener for the play button to control all tracks
function handlePlayButtonClick() {
const audioElements = document.querySelectorAll('.upload-square.uploaded audio');
audioElements.forEach((audioElement) => audioElement.play());
}
// Event listener for the pause button to control all tracks
function handlePauseButtonClick() {
const audioElements = document.querySelectorAll('.upload-square.uploaded audio');
audioElements.forEach((audioElement) => audioElement.pause());
}
// Event listener for the stop button to control all tracks
function handleStopButtonClick() {
const audioElements = document.querySelectorAll('.upload-square.uploaded audio');
audioElements.forEach((audioElement) => {
audioElement.pause();
audioElement.currentTime = 0;
});
}
const timeline = document.getElementById('timeline');
timeline.addEventListener('click', handleTimelineClick);
function handleTimelineClick(event) {
const timelineRect = timeline.getBoundingClientRect();
const timelineWidth = timeline.offsetWidth;
const clickX = event.clientX - timelineRect.left;
const clickPercentage = (clickX / timelineWidth) * 100;
const audioElements = document.querySelectorAll('.upload-square.uploaded audio');
audioElements.forEach((audioElement) => {
audioElement.currentTime = (clickPercentage / 100) * audioElement.duration;
});
}
function updateProgress() {
const audioElements = document.querySelectorAll('.upload-square.uploaded audio');
audioElements.forEach((audioElement) => {
const progress = (audioElement.currentTime / audioElement.duration) * 100;
const progressBar = document.querySelector('.progress-bar');
progressBar.style.width = `${progress}%`;
});
}
setInterval(updateProgress, 100);
Filters
0