🎶 Lecteur MP3 Multichioix 🎼

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🎶 Lecteur MP3 Multichoix 🎼</title>
<style>
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	background: linear-gradient(135deg, #0b1225, #66CC99);
	color: #ffffff;
	text-align: center;
	user-select: none;
}

h1 {
	margin-top: 40px;
	font-size: 34px;
	text-shadow: 0 0 10px #000;
}

select {
	margin-top: 5px;
	padding: 10px;
	font-size: 12px;
	border-radius: 5px;
}

audio {
	margin-top: 25px;
	width: 300px;
	height: 55px;
	overflow: visible;
}
</style>
</head>

<body>
	<h1>🎶 Lecteur MP3 Multichoix 🎼</h1>
	<a href="https://www.musicscreen.be/musique-libre-de-droit-Noel.html" target="_blank" style="color:white;">Musique Noël (libre de droits)</a><br><br>
	
	
	<audio id="audioPlayer" controls></audio><br>
	
	<button id="nextBtn">⏭️ Suivant</button>
	<br>
	
	<select id="musicSelect">
		<option value="https://www.musicscreen.be/mp3gallery/content/songs/MP3/Noel/All-is-fine.mp3">🎄 All Is Fine – MusicScreen</option>
		<option value="https://www.musicscreen.be/mp3gallery/content/songs/MP3/Noel/Silent-night-version2.mp3">❄️ Silent Night Version 2</option>
		<option value="https://cs1.mp3.pm/download/101723985/NFJEdnhlSFl4Q2xLTU1Ccm8xVG9hVlFzRTlJbTAwa2JBRG5uWUVENEU2K0EwMlNKRTNnMk56d296OERrU0R6TXNOb1NLTmZvbmVRbEhPc2xlbmI2ck9JZGl3REthUk5BVUV1a1lLZ2ExcVExTVFIanlDaUd6WEJacFZETEZaV3Q/Disney_-_It_s_A_Small_World_(mp3.pm).mp3">🌍 It’s a Small World – Disney</option>
		<option value="votre musique en.mp3">🎵 ...</option>
	</select>
<script type="text/javascript" language="javascript">
	// Récupération des éléments
	const audioPlayer = document.getElementById('audioPlayer');
	const musicSelect = document.getElementById('musicSelect');
	const nextBtn = document.getElementById('nextBtn');
	const pauseBtn = document.getElementById('pauseBtn');
	// Charger la musique sélectionnée
	function loadMusic(autoPlay = true) {
		audioPlayer.src = musicSelect.value;
		if (autoPlay) {
			audioPlayer.play();
		}
	}
	// Bouton pause
	/* activer le bouton option
	pauseBtn.addEventListener('click', () => {
		audioPlayer.pause();
	}); */
	// Bouton suivant
	nextBtn.addEventListener('click', () => {
		let index = musicSelect.selectedIndex;
		index = (index + 1) % musicSelect.options.length;
		musicSelect.selectedIndex = index;
		loadMusic(true); // lecture automatique
	});
	// Changement via le menu
	musicSelect.addEventListener('change', () => {
		loadMusic(true); // auto-play quand on change la musique
	});
</script>
<p style="margin: 5;">
<footer style="position:relative; margin:0 auto; width:50%; text-align:center; border-radius:20px; overflow:hidden; box-shadow:0 0 12px rgba(0,0,0,0.3); padding:10px 0; font-family:sans-serif; font-size:12px;"><p style="margin: 0;"><a href="https://feuille-heures-angelique.neocities.org/" style="text-decoration: none; color: inherit;">Calculatrice d’heures - Feuille d'heures Angélique (fr)</a></p></footer></p>
</body>
</html>