HS-Miniplayer - Ein Audioplayer mit HTML5 und Javascript

<!DOCTYPE HTML>
<html>
  <head>\n
  <title>Titel der Seite</title>\n
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta content="Autor" name="author">

  <!-- Einstellungen für den Playerknopf, WICHTIG! -->
  <style type="text/css">
    <!--
  .player
  {
  background-color: rgb(160,220,250);
  padding : 0px;
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
  font-color : blue;
  font-size : 8pt;
  font-weight : bold;
  margin : 1px;
  width : 22px;
  height : 22px;
  }
    -->
    </style>\n

  <!-- Javascript des Players -->
  <script type="text/javascript">
  var af='';
  var bt='';
  var afx='';
  var btx='';

function ende()
    {
    var btn = document.getElementById(bt);
    btn.value = '>';
    }

 function abspielen()
  	{
  	 var pl = document.getElementById(af);
  	 var btn = document.getElementById(bt);
  	 if (afx !== '')
  	   {
  	     if (afx !== af)
  	       {
  	       var plx = document.getElementById(afx);
  	       var btnx  = document.getElementById(btx);
  	       plx.pause();
  	       btnx.value = '>';
  	       }
  	   }

      if (pl.paused)
  	    {
  	     pl.currentTime = 0;
  	     pl.play();
  	     btn.value = '||';
  	     afx = af;
             btx = bt;
             pl.addEventListener('ended',function(){ende();});
             }
  	     else
  	     {
  	     pl.pause();
  	     btn.value = '>';
  	     }
  	 }
</script>

</head>\n
<body>

..... Seiteninhalte  ........

<!-- So sieht die Einbindung mit PHP und MySQL aus  -->
<!-- Für die Variable '$AId' (Player-ID) wird der Buchstabe 'A' und das Id des Datensatzes kombiniert  -->
<!-- Für die Variable '$Bt' (Button-ID) werden die Buchstaben 'Bt' und das Id des Datensatzes kombiniert  -->
<!-- Die Variablen '$MP3' (Url der Audiodatei) und '$Beschreibung' ist mit entsprechendem Inhalt aus der Datenbank bestückt  -->

    echo "\n<audio id='$AId' src='$MP3' preload='auto'></audio>
          \n<input class='player' id='$Bt' value='>'type='button' onclick=\"af= '$AId'; bt= '$Bt'; abspielen();\"> - $Beschreibung<br>\n";

<!-- Und so die Einbindung mit HTML -->

    <audio id="A1" src="musik1.mp3" preload="auto"></audio>\n
    <input class="player" id="Bt1" value=">"type="button" onclick="af= 'A1'; bt= 'Bt1'; abspielen();\"> - Beschreibung musik1.mp3 <br>\n

    <audio id="A2" src="musik2.mp3" preload="auto"></audio>\n
    <input class="player" id="Bt2" value=">"type="button" onclick="af= 'A2'; bt= 'Bt2'; abspielen();\"> - Beschreibung musik2.mp3 <br>\n
    
<!-- Und beliebig viele weitere Player, jeder mit um 1 höhere Bezeichnung (ID) -->

..... weiterer Seiteninhalte  ......

</body></html>