script.js

let audio = new Audio();
let currentPlaying = '';

document.getElementById('toggle-play').addEventListener('click', function() {
    if (audio.paused) {
        audio.play();
        this.textContent = 'Pause';
    } else {
        audio.pause();
        this.textContent = 'Play';
    }
});

function playMusic(filename) {
    if (currentPlaying !== filename) {
        audio.src = `/music/${filename}`;
        currentPlaying = filename;
    }
    audio.play();
    document.getElementById('toggle-play').textContent = 'Pause';
}

function fetchMusicList(query = '') {
    document.getElementById('loading').style.display = 'block';
    fetch('/music-list')
        .then(response => response.json())
        .then(files => {
            const filteredFiles = files.filter(file => file.includes(query));
            const musicListEl = document.getElementById('music-list');
            musicListEl.innerHTML = '';
            filteredFiles.forEach(file => {
                const div = document.createElement('div');
                div.textContent = file;
                div.onclick = () => playMusic(file);
                musicListEl.appendChild(div);
            });
            document.getElementById('loading').style.display = 'none';
        });
}

// Search feature
document.getElementById('search').addEventListener('input', function() {
    fetchMusicList(this.value);
});

// Initial fetch
fetchMusicList();