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 - Bilder-Farbrotation mit Gradient

PHP - Zufallszahl anzeigen

JavaScript - Cookies aktiv

MySQL - Bilder in einer Datenbank-Tabelle speichern und ausgeben

Werbetrommel
Rühren Sie die Werbetrommel. "Wer nicht wirbt der stirbt" Das gilt besonders im Internet. Machen Sie Ihre Seiten In Foren bekannt, aber Bitte dezent. Beantworten Sie alle Emails, die Sie zu Ihrer Homepage bekommen, der Besucher wird Ihre Seite in guter Erinnerung behalten. Machen Sie aktiv in verschiedenen Foren und Chatrooms mit.