🎶 lecteur player MP3 🎼

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 🎼</title>
<meta name="description" content="Écoutez une sélection de musiques gratuites avec notre lecteur MP3 simple." />
<meta name="keywords" content="lecteur mp3 simple, feuille d'heures angelique, musique" />
<meta name="author" content="sync" />
<meta name="generator" content="Feuille d'heures Angélique" />
<meta property="og:url" content="https://feuille-heures-angelique.alwaysdata.net/plus/all/play_MP3_simple.html" />
<meta property="og:site_name" content="Feuille d'heures Angélique" />
<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;
}

h1 {
	margin-top: 40px;
	font-size: 34px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* audio */
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 player MP3 🎼</h1>
	<a href="https://www.musicscreen.be/musique-libre-de-droit-Noel.html" target="_blank" title="musicscreen">musique noel</a> 💿<br><br>
	<audio id="audioPlayer" controls="controls">
		<source src="https://www.musicscreen.be/mp3gallery/content/songs/MP3/Noel/All-is-fine.mp3" type="audio/mp3" />
		Votre navigateur ne prend pas en charge l'élément audio.
	</audio>
<br>
<script>
	// Supprimer le script pour ne pas afficher les boutons *
	// Accéder à l'élément audio, cree des boutons
	const audioPlayer = document.getElementById('audioPlayer');
	// Exemple de fonction pour contrôler play/pause avec un bouton personnalisé
	const playPauseButton = document.createElement('button');
	playPauseButton.textContent = 'Lecture ⏯️';
	document.body.appendChild(playPauseButton);
	playPauseButton.addEventListener('click', () => {
		if (audioPlayer.paused) {
			audioPlayer.play();
			playPauseButton.textContent = 'Pause ⏸️'; // Changer le texte du bouton en fonction de l'état
		} else {
			audioPlayer.pause();
			playPauseButton.textContent = 'Lecture ⏯️';
		}
	});
</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.alwaysdata.net/" style="text-decoration: none; color: inherit; font-weight: bold;">🎶 Lecteur MP3 🎼 - Feuille d'heures Angélique</a></footer>
</div>
</body>
</html>