JavaScript - Audiodateien per Button-Klick abspielen
Das PHP-Script liest Audiodateien aus einem Verzeichnis aus, hier im Beispiel sind es mp3-Dateien.
Bei einem Klick auf einem Button öffnet sich per JavaScript ein Modal-Fenster mit der ausgewählten Audiodatei,
diese wird dann autom. abgespielt.
<style>
figure {
display: None;
position: Absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #F5F5F5;
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
border: Solid 1px #BCBCBC;
box-shadow: 0px 0px 4px 2px #C9C9C9;
margin: 0;
padding: 10px;
}
figure > figcaption {
text-align: Center;
}
audio {
outline: none;
}
button.audio-btn,
span.close-btn {
background-color: #D7D7D7;
border: Solid 1px #BCBCBC;
padding: 3px;
display: Inline-Block;
margin: 5px;
cursor: Pointer;
transition: background-color 0.3s;
}
button.audio-btn:hover,
span.close-btn:hover {
background-color: #C1C1C1;
}
</style>
</head>
<body>
<?php
$files = glob('*.mp3');
foreach ($files as $file) {
$name = basename($file, '.mp3');
echo '<button value="' . $file . '" class="audio-btn">' . $name . '</button>';
}
?>
<figure id="figure">
<audio id="audio" controls></audio>
<figcaption id="figcaption"></figcaption>
<span class="close-btn">Schließen</span>
</figure>
<script>
const figure = document.querySelector('#figure');
const figureAudio = document.querySelector('#audio');
const figureFigcaption = document.querySelector('#figcaption');
document.body.addEventListener('click', event => {
if (event.target.classList.contains('close-btn')) {
figure.style.display = 'none';
figureAudio.pause();
}
else {
if (event.target.className == "audio-btn") {
const src = event.target.value,
name = event.target.textContent;
figureAudio.src = src;
figureAudio.play();
figureFigcaption.textContent = name;
figure.style.display = 'inline-block';
}
}
});
</script>
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<area> Areal (Verweis-sensitive Grafik)
CSS - Hintergrundbild absolut positionieren
PHP - Alle Formulardaten ausgeben
JavaScript - Sicherheitsabfrage bevor die Formulardaten zurücksetzt werden