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);
Shopping cart0
There are no products in the cart!
Continue shopping