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.

Schließen

<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

MySQL - Zeichenkette ersetzen mit REPLACE

Homepage-Umzug
Sollten Sie einmal mit Ihrer Homepage umziehen, dann teilen Sie es den Besuchern auch mit. Lassen Sie unter der alten Adresse einen Hinweis und einen Link auf die neue Seite zurück. Vorsicht ist bei automatischen Weiterleitungen geboten. Stellen Sie auf jeden Fall einen alternativen Link zur Verfügung, falls die automatische Weiterleitung nicht funktioniert.