🎶 Lecteur MP3 Multiple 🎼

Musique (libre de droits), cliquer ici 💿

<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Lecteur MP3 Multichoix 🎼</title>
<meta name="description" content="Écoutez une sélection de musiques gratuites avec notre lecteur MP3 multichoix simple et intuitif." />
<meta name="keywords" content="lecteur mp3, musique multiple, feuille d'heures angelique, musique libre" />
<meta name="author" content="sync" />
<meta name="generator" content="Feuille d'heures Angélique" />
<meta name="robots" content="index, follow, max-image-preview:large" />
<style>
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	background: linear-gradient(135deg, #5785a7, #9bc5c3);
	color: #1a2d37;
	text-align: center;
}

select {
	margin-top: 15px;
	padding: 10px 15px;
	font-size: 14px;
	border-radius: 20px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: rgba(255, 255, 255, 0.8);
	color: #1a2d37;
	outline: none;
	cursor: pointer;
}

audio {
	margin-top: 25px;
	width: 300px;
	height: 55px;
	overflow: visible;
}

button {
	margin: 10px 5px;
	padding: 10px 20px;
	font-size: 14px;
	border-radius: 20px;
	border: none;
	background: #1a2d37;
	color: #ffffff;
	cursor: pointer;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: background 0.2s, transform 0.1s;
}

button:hover {background: #2c4554;}
button:active {transform: scale(0.98);}
</style>
</head>

<body>
	<h1>🎶 Lecteur MP3 Multiple 🎼</h1>
	<a href="https://www.musicscreen.be/musique-libre-de-droit-Noel.html" target="_blank" style="color:#1a2d37; font-weight: bold;">Musique Noël (libre de droits)</a><br><br>
	<audio id="audioPlayer" controls></audio><br>
	<button id="nextBtn">⏭️ Suivant</button><button id="pauseBtn">⏸️ Pause</button><br>
	<select id="musicSelect">
		<option value="https://www.musicscreen.be/mp3gallery/content/songs/MP3/Ethnique/Bonbon.mp3">🍬 bonbon</option>
		<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://www.musicscreen.be/mp3gallery/content/songs/MP3/Orchestrales/Tendresse.ogg">🌍 symphonie</option>
		<option value="votre musique en.mp3">🎵 ...</option>
	</select>
<script>
	// RÉCUPÉRATION DES ÉLÉMENTS
	const audioPlayer = document.getElementById('audioPlayer');
	const musicSelect = document.getElementById('musicSelect');

// SUPPRIMER nextBtn *, pauseBtn * SI VOUS NE VOULEZ PAS LES GARDER !
	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 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>
<br>
<div style="margin: 1.25em;">
	<footer style="position:relative; margin:0 auto; width:320px; text-align:center; border-radius:20px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.15); padding:10px 0; font-family:sans-serif; font-size:12px; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(0, 0, 0, 0.05);"><a href="https://feuille-heures-angelique.neocities.org/" style="text-decoration: none; color: inherit; font-weight: bold;">🎶 Lecteur MP3 🎼 - Feuille d'heures Angélique</a></footer>
	</div>
</body>
</html>