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.

<noscript> Kein JavaScript!

CSS - Tastenkombinationen darstellen

PHP - Datei nach dem herunterladen autom. löschen

JavaScript - Radiobutton mit Auswahl-Hinweis

MySQL - Datensätze auswählen