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.

<ruby> Ruby Anmerkung

CSS - Markierte Checkbox farbig hervorheben

PHP - Verzeichnisgröße auslesen 2

JavaScript - Audiodatei in JavaScript verstecken

MySQL - Einfügen oder aktualisieren mit 'ON DUPLICATE KEY UPDATE'

Bilder passend zum Inhalt
Wenn Sie Bilder in ihre Seite einbinden, so achten Sie darauf, dass die Bilder etwas mit dem Thema ihrer Homepage zu tun haben. Bilder, die vom Seitenthema abweichen, sollte man besser weglassen.