Audio
Lecteur
Html Css Js
Player
Animation
Css Custom
Design
Composant
Snippet
No Framework
Controls
Gradient
Collection de lecteurs audio HTML CSS JS pur : styles variés, contrôles personnalisés, visualisation et design moderne sans dépendances externes.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippets Audio HTML CSS JS 2026 05111015 | AngularForAll</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 30px 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
text-align: center;
color: white;
margin-bottom: 40px;
font-size: 2.5rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
font-weight: 300;
letter-spacing: 2px;
}
.audio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.audio-card {
background: white;
border-radius: 20px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.audio-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}
.audio-card h3 {
margin-bottom: 15px;
color: #333;
font-size: 1.3rem;
font-weight: 600;
text-align: center;
}
/* Style 1 : Lecteur par défaut */
.style-default audio {
width: 100%;
outline: none;
}
/* Style 2 : Lecteur minimaliste avec couleur personnalisée */
.style-minimal {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border: 2px solid #e0e0e0;
}
.style-minimal audio {
width: 100%;
filter: sepia(20%) saturate(70%) hue-rotate(180deg);
border-radius: 8px;
}
/* Style 3 : Lecteur moderne avec ombre et bordure */
.style-modern {
background: #1e1e2e;
color: white;
}
.style-modern h3 {
color: #cdd6f4;
}
.style-modern audio {
width: 100%;
border-radius: 10px;
background: #313244;
padding: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.style-modern audio::-webkit-media-controls-panel {
background-color: #313244;
}
.style-modern audio::-webkit-media-controls-play-button {
background-color: #cba6f7;
border-radius: 50%;
}
.style-modern audio::-webkit-media-controls-current-time-display,
.style-modern audio::-webkit-media-controls-time-remaining-display {
color: #cdd6f4;
}
/* Style 4 : Lecteur vintage rétro */
.style-vintage {
background: #f4e4c1;
border: 3px solid #8b7355;
position: relative;
overflow: hidden;
}
.style-vintage::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(139,115,85,0.1) 2px, rgba(139,115,85,0.1) 4px);
pointer-events: none;
}
.style-vintage h3 {
color: #5d4037;
font-family: 'Georgia', serif;
}
.style-vintage audio {
width: 100%;
filter: sepia(60%) contrast(90%);
position: relative;
z-index: 1;
}
/* Style 5 : Lecteur néon futuriste */
.style-neon {
background: #0a0a0a;
border: 2px solid #00ff88;
box-shadow: 0 0 15px rgba(0, 255, 136, 0.5), inset 0 0 15px rgba(0, 255, 136, 0.1);
}
.style-neon h3 {
color: #00ff88;
text-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
font-family: 'Courier New', monospace;
letter-spacing: 3px;
}
.style-neon audio {
width: 100%;
filter: hue-rotate(280deg) brightness(1.2);
}
/* Style 6 : Lecteur carte de visite */
.style-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 15px;
position: relative;
overflow: hidden;
}
.style-card::before {
content: '♫';
position: absolute;
font-size: 120px;
right: -20px;
top: -20px;
opacity: 0.1;
}
.style-card h3 {
color: white;
margin-bottom: 20px;
}
.style-card audio {
width: 100%;
opacity: 0.9;
mix-blend-mode: normal;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
padding: 8px;
}
/* Style 7 : Lecteur bois nature */
.style-wood {
background: #deb887;
background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(139,90,43,0.1) 10px, rgba(139,90,43,0.1) 20px);
border: 4px solid #8b5a2b;
border-radius: 10px;
}
.style-wood h3 {
color: #4a3728;
font-weight: bold;
}
.style-wood audio {
width: 100%;
filter: sepia(30%) brightness(0.9);
border: 2px solid #8b5a2b;
border-radius: 5px;
}
/* Style 8 : Lecteur glassmorphisme */
.style-glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 15px;
}
.style-glass h3 {
color: #333;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.style-glass audio {
width: 100%;
opacity: 0.8;
background: rgba(255, 255, 255, 0.4);
border-radius: 10px;
padding: 5px;
}
/* Pied de page */
.footer-note {
text-align: center;
color: white;
margin-top: 30px;
font-size: 0.9rem;
opacity: 0.8;
background: rgba(0,0,0,0.2);
padding: 15px;
border-radius: 10px;
backdrop-filter: blur(5px);
}
audio {
height: 40px;
transition: all 0.3s ease;
}
/* Personnalisation supplémentaire pour webkit */
audio::-webkit-media-controls-panel {
transition: all 0.3s ease;
}
/* Responsive */
@media (max-width: 768px) {
.audio-grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 1.8rem;
}
}
/* Effet de particules en arrière-plan */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
</style>
</head>
<body>
<div class="container">
<h1>🎵 Collection de lecteurs audio</h1>
<div class="audio-grid">
<!-- Style 1 : Par défaut -->
<div class="audio-card style-default">
<h3>📻 Style par défaut</h3>
<audio controls>
<source src="public/simple.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'élément audio.
</audio>
<p style="margin-top: 10px; font-size: 0.85rem; color: #666;">Lecteur navigateur standard</p>
</div>
<!-- Style 2 : Minimaliste avec filtre -->
<div class="audio-card style-minimal">
<h3>🎨 Style minimaliste</h3>
<audio controls>
<source src="public/simple.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'élément audio.
</audio>
<p style="margin-top: 10px; font-size: 0.85rem; color: #666;">Filtre de couleur appliqué</p>
</div>
<!-- Style 3 : Moderne sombre -->
<div class="audio-card style-modern">
<h3>🌙 Style moderne sombre</h3>
<audio controls>
<source src="public/simple.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'élément audio.
</audio>
<p style="margin-top: 10px; font-size: 0.85rem; color: #a6adc8;">Design sombre élégant</p>
</div>
<!-- Style 4 : Vintage -->
<div class="audio-card style-vintage">
<h3>📼 Style vintage rétro</h3>
<audio controls>
<source src="public/simple.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'élément audio.
</audio>
<p style="margin-top: 10px; font-size: 0.85rem; color: #5d4037;">Ambiance années 70</p>
</div>
<!-- Style 5 : Néon futuriste -->
<div class="audio-card style-neon">
<h3>💚 Style néon futuriste</h3>
<audio controls>
<source src="public/simple.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'élément audio.
</audio>
<p style="margin-top: 10px; font-size: 0.85rem; color: #00ff88;">Cyberpunk / Synthwave</p>
</div>
<!-- Style 6 : Carte de visite -->
<div class="audio-card style-card">
<h3>💳 Style carte moderne</h3>
<audio controls>
<source src="public/simple.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'élément audio.
</audio>
<p style="margin-top: 10px; font-size: 0.85rem; color: rgba(255,255,255,0.8);">Dégradé élégant</p>
</div>
<!-- Style 7 : Bois naturel -->
<div class="audio-card style-wood">
<h3>🪵 Style bois naturel</h3>
<audio controls>
<source src="public/simple.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'élément audio.
</audio>
<p style="margin-top: 10px; font-size: 0.85rem; color: #4a3728;">Texture bois chaleureuse</p>
</div>
<!-- Style 8 : Glassmorphisme -->
<div class="audio-card style-glass">
<h3>🔮 Style glassmorphisme</h3>
<audio controls>
<source src="public/simple.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'élément audio.
</audio>
<p style="margin-top: 10px; font-size: 0.85rem; color: #555;">Effet verre dépoli</p>
</div>
</div>
<!-- Section bonus avec contrôles personnalisés -->
<div style="background: white; border-radius: 20px; padding: 30px; margin-top: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
<h2 style="text-align: center; color: #333; margin-bottom: 20px;">🎛️ Lecteur personnalisé avec contrôles</h2>
<div style="text-align: center;">
<audio id="customAudio" controls style="width: 80%; max-width: 600px;">
<source src="public/simple.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'élément audio.
</audio>
<div style="margin-top: 15px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;">
<button onclick="document.getElementById('customAudio').play()" style="padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;">▶ Lecture</button>
<button onclick="document.getElementById('customAudio').pause()" style="padding: 10px 20px; background: #f44336; color: white; border: none; border-radius: 5px; cursor: pointer;">⏸️ Pause</button>
<button onclick="document.getElementById('customAudio').volume += 0.1" style="padding: 10px 20px; background: #2196F3; color: white; border: none; border-radius: 5px; cursor: pointer;">🔊 Volume +</button>
<button onclick="document.getElementById('customAudio').volume -= 0.1" style="padding: 10px 20px; background: #FF9800; color: white; border: none; border-radius: 5px; cursor: pointer;">🔉 Volume -</button>
<button onclick="document.getElementById('customAudio').currentTime = 0" style="padding: 10px 20px; background: #9C27B0; color: white; border: none; border-radius: 5px; cursor: pointer;">⏮️ Début</button>
</div>
</div>
</div>
<div class="footer-note">
<p>🎶 8 styles différents de lecteurs audio HTML5 • Chaque lecteur a un design unique • Cliquez sur lecture pour tester</p>
<p style="margin-top: 10px; font-size: 0.8rem;">Sources audio : SoundHelix (libres de droits) • Design responsive</p>
</div>
</div>
<script>
// Script pour s'assurer que tous les lecteurs audio fonctionnent
document.addEventListener('DOMContentLoaded', function() {
const audioElements = document.querySelectorAll('audio');
audioElements.forEach((audio, index) => {
// Gestion des erreurs
audio.addEventListener('error', function(e) {
console.log(`Erreur de chargement pour le lecteur ${index + 1}`);
const errorMessage = document.createElement('p');
errorMessage.style.color = 'red';
errorMessage.style.fontSize = '0.8rem';
errorMessage.textContent = '⚠️ Source audio non disponible';
audio.parentNode.appendChild(errorMessage);
});
// Log pour déboguer
audio.addEventListener('play', function() {
console.log(`Lecture du lecteur ${index + 1} démarrée`);
});
});
// Personnalisation du lecteur avec ID
const customAudio = document.getElementById('customAudio');
if (customAudio) {
customAudio.addEventListener('volumechange', function() {
console.log('Volume actuel:', Math.round(customAudio.volume * 100) + '%');
});
}
console.log('✅ Tous les lecteurs audio sont initialisés');
console.log('📋 Nombre total de lecteurs:', audioElements.length);
});
</script>
</body>
</html>
Télécharger le fichier source