🎶 lecteur player MP3 🎼

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🎶 lecteur player MP3 🎼</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
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);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: #ffffff;
	overflow: hidden;
	text-align: center;
	user-select: none;
}
h1 {
	margin-top: 80px;
	font-size: 38px;
	text-shadow: 0 0 10px #000;
}
audio {
	margin-top: 25px;
	width: 300px;
	height: 55px;
	overflow: visible;
}
</style>
</head>

<body>
<h1>🎶 lecteur player MP3 🎼</h1>
	<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 type="text/javascript" language="javascript">
	// Accéder à l'élément audio
	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>
<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>