Ian Applegate

It even made me a folder structure illustration.

                  

/your-project-folder
│
├── public
│   ├── index.html
│   ├── styles.css
│   ├── script.js
│   └── audio
│       ├── track1.mp3
│       ├── track2.mp3
│       └── default-track.mp3
│
└── server.js

Example Code - Music Player

Prompts

Code

                  
const audio = document.getElementById('audio');
const trackItems = document.querySelectorAll('.track-item');
const shuffleBtn = document.getElementById('shuffleBtn');
const repeatBtn = document.getElementById('repeatBtn');
const playPauseBtn = document.getElementById('playPauseBtn');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const progressBar = document.getElementById('progressBar');
const playIcon = document.getElementById('playIcon');
const pauseIcon = document.getElementById('pauseIcon');
const loopBtn = document.getElementById('loopBtn');

let currentTrackIndex = 0;
let isShuffling = false;
let isRepeating = false;
let isLooping = false;

let wakeLock = null;
let audioContext;

// Function to request audio playback for mobile devices
function requestAudioPlayback() {
    audio.play().catch(error => {
        console.error("Playback failed:", error);
    });
}

// Function to ensure AudioContext is active
function ensureAudioContextActive() {
    if (audioContext && audioContext.state === 'suspended') {
        audioContext.resume().catch(error => console.error("AudioContext resume failed:", error));
    }
}

// Function to play audio with AudioContext check and Wake Lock
async function playAudio() {
    ensureAudioContextActive();  // Ensure AudioContext is active
    await audio.play().catch(error => console.error("Playback failed:", error));
    playIcon.classList.add('hidden');    // Hide play icon
    pauseIcon.classList.remove('hidden'); // Show pause icon
    requestWakeLock();
}

// Function to play the selected track
function playTrack(track) {
    trackItems.forEach(item => item.classList.remove('active'));
    audio.src = 'audio/' + track;
    requestAudioPlayback();
    const currentTrackItem = Array.from(trackItems).find(item => item.textContent === track.replace('.mp3', ''));
    if (currentTrackItem) currentTrackItem.classList.add('active');
    currentTrackIndex = Array.from(trackItems).indexOf(currentTrackItem);
}

// Play/Pause toggle functionality with wake lock and AudioContext
playPauseBtn.addEventListener('click', () => {
    if (audio.paused) {
        playAudio();
    } else {
        audio.pause();
        playIcon.classList.remove('hidden');
        pauseIcon.classList.add('hidden');
        releaseWakeLock();
    }
});

// Move to the previous track
prevBtn.addEventListener('click', () => {
    playPreviousTrack();
});

// Move to the next track
nextBtn.addEventListener('click', () => {
    playNextTrack();
});

// Function to play the previous track
function playPreviousTrack() {
    currentTrackIndex = (currentTrackIndex - 1 + trackItems.length) % trackItems.length;
    playTrack(trackItems[currentTrackIndex].textContent + '.mp3');
}

// Function to play the next track
function playNextTrack() {
    currentTrackIndex = (currentTrackIndex + 1) % trackItems.length;
    playTrack(trackItems[currentTrackIndex].textContent + '.mp3');
}

// Update progress bar as the track plays
audio.addEventListener('timeupdate', () => {
    progressBar.value = (audio.currentTime / audio.duration) * 100 || 0;
});

// Seek to a position in the track
progressBar.addEventListener('input', () => {
    audio.currentTime = (progressBar.value / 100) * audio.duration;
});

// Repeat and shuffle functionality
repeatBtn.addEventListener('click', () => {
    isRepeating = !isRepeating;
    repeatBtn.classList.toggle('active', isRepeating);
});

shuffleBtn.addEventListener('click', () => {
    isShuffling = !isShuffling;
    shuffleBtn.classList.toggle('active', isShuffling);
});

// Loop functionality
loopBtn.addEventListener('click', () => {
    isLooping = !isLooping;
    audio.loop = isLooping;
    loopBtn.classList.toggle('active', isLooping);
    loopBtn.textContent = isLooping ? 'Disable Loop' : 'Enable Loop';
});

// Automatically play the next track after the current one ends
audio.addEventListener('ended', () => {
    if (isRepeating) {
        audio.currentTime = 0;
        playAudio();
    } else {
        playNextTrack();
    }
});

// Initialize AudioContext and Wake Lock
function initializeAudioContext() {
    if (!audioContext) {
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
        const source = audioContext.createMediaElementSource(audio);
        source.connect(audioContext.destination);
    }
}

// Request wake lock to keep playback alive during screen lock
async function requestWakeLock() {
    if ('wakeLock' in navigator) {
        try {
            wakeLock = await navigator.wakeLock.request('screen');
            wakeLock.addEventListener('release', () => console.log('Wake Lock released'));
            console.log('Wake Lock is active');
        } catch (err) {
            console.error(`Wake Lock request failed: ${err.name}, ${err.message}`);
        }
    }
}

// Release the wake lock
function releaseWakeLock() {
    if (wakeLock !== null) {
        wakeLock.release().then(() => {
            wakeLock = null;
        });
    }
}

// Event listener for visibility change
document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') {
        ensureAudioContextActive();  // Reactivate AudioContext if necessary
    } else if (wakeLock !== null && document.visibilityState === 'hidden') {
        releaseWakeLock();
    }
});

// Set up AudioContext on page load
window.addEventListener('load', () => {
    initializeAudioContext();
});

// Release wake lock on page unload
window.addEventListener('unload', () => {
    releaseWakeLock();
});