themanyone · April 12, 2025 06:13
diff --git a/music.html b/music.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Player</title>
    <style>
        #music-popover {
            border: 1px solid #ccc;
            padding: 10px;
            width: 300px;
            background-color: #f9f9f9;
            display: none; /* Initially hidden */
        }
        audio {
            width: 100%;
        }
    </style>
 </head>
 <body>

 <div id="music-popover"></div>

 <script>
    // Function to fetch music files and create audio controls
    async function loadMusicFiles() {
        const musicPopover = document.getElementById('music-popover');

        // Fetch the directory listing (assuming it's accessible)
        const response = await fetch('/music/');
        const text = await response.text();

        // Create a temporary DOM element to parse the HTML
        const parser = new DOMParser();
        const doc = parser.parseFromString(text, 'text/html');

        // Find all audio files (assuming they have common audio file extensions)
        const audioFiles = Array.from(doc.querySelectorAll('a')).filter(link => {
            const href = link.getAttribute('href');
            return href && (href.endsWith('.mp3') || href.endsWith('.wav') || href.endsWith('.ogg'));
        });

        // Group audio files by their base name (without extension)
        const groupedFiles = {};

        audioFiles.forEach(file => {
            const href = file.getAttribute('href');
            const baseName = href.split('.').slice(0, -1).join('.'); // Get base name without extension
            if (!groupedFiles[baseName]) {
                groupedFiles[baseName] = [];
            }
            groupedFiles[baseName].push(href);
        });

        // Create audio controls for each group
        for (const baseName in groupedFiles) {
            const audioControl = document.createElement('audio');
            audioControl.className = 'music';
            audioControl.controls = true;

            // Create source elements for each file in the group
            groupedFiles[baseName].forEach(file => {
                const source = document.createElement('source');
                source.src = '/music/' + file;
                source.type = getAudioType(file);
                audioControl.appendChild(source);
            });

            // Append the audio control to the popover
            musicPopover.appendChild(audioControl);
        }

        // Show the music popover
        musicPopover.style.display = 'block';
    }

    // Function to determine the audio type based on file extension
    function getAudioType(file) {
        if (file.endsWith('.mp3')) {
            return 'audio/mpeg';
        } else if (file.endsWith('.ogg')) {
            return 'audio/ogg';
        } else if (file.endsWith('.wav')) {
            return 'audio/wav';
        }
        return '';
    }

    // Load music files when the page loads
    window.onload = loadMusicFiles;
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Music Player</title>
	<style>
	#music-popover {
	border: 1px solid #ccc;
	padding: 10px;
	width: 300px;
	background-color: #f9f9f9;
	display: none; /* Initially hidden */
	}
	audio {
	width: 100%;
	}
	</style>
	</head>
	<body>

	<div id="music-popover"></div>

	<script>
	// Function to fetch music files and create audio controls
	async function loadMusicFiles() {
	const musicPopover = document.getElementById('music-popover');

	// Fetch the directory listing (assuming it's accessible)
	const response = await fetch('/music/');
	const text = await response.text();

	// Create a temporary DOM element to parse the HTML
	const parser = new DOMParser();
	const doc = parser.parseFromString(text, 'text/html');

	// Find all audio files (assuming they have common audio file extensions)
	const audioFiles = Array.from(doc.querySelectorAll('a')).filter(link => {
	const href = link.getAttribute('href');
	return href && (href.endsWith('.mp3') \|\| href.endsWith('.wav') \|\| href.endsWith('.ogg'));
	});

	// Group audio files by their base name (without extension)
	const groupedFiles = {};

	audioFiles.forEach(file => {
	const href = file.getAttribute('href');
	const baseName = href.split('.').slice(0, -1).join('.'); // Get base name without extension
	if (!groupedFiles[baseName]) {
	groupedFiles[baseName] = [];
	}
	groupedFiles[baseName].push(href);
	});

	// Create audio controls for each group
	for (const baseName in groupedFiles) {
	const audioControl = document.createElement('audio');
	audioControl.className = 'music';
	audioControl.controls = true;

	// Create source elements for each file in the group
	groupedFiles[baseName].forEach(file => {
	const source = document.createElement('source');
	source.src = '/music/' + file;
	source.type = getAudioType(file);
	audioControl.appendChild(source);
	});

	// Append the audio control to the popover
	musicPopover.appendChild(audioControl);
	}

	// Show the music popover
	musicPopover.style.display = 'block';
	}

	// Function to determine the audio type based on file extension
	function getAudioType(file) {
	if (file.endsWith('.mp3')) {
	return 'audio/mpeg';
	} else if (file.endsWith('.ogg')) {
	return 'audio/ogg';
	} else if (file.endsWith('.wav')) {
	return 'audio/wav';
	}
	return '';
	}

	// Load music files when the page loads
	window.onload = loadMusicFiles;
	</script>

	</body>
	</html>