HS-Miniplayer

Der HS-Miniplayer ist ein MP3-Player für die Homepage. Ab dem HTML5-Standard sind jetzt alle Browser in der Lage MP3-Dateien abzuspielen. Die im Browser eingebauten Player sind aber (etwas abhängig vom Browser) ziemlich klobig, vor allem wenn mehrere solche Player in Reihe angezeigt werden. Die Javascript-basierten Player die ich gefunden habe forderten zum Teil die Einbindung mehrer zusätzlicher Scripts.
Also habe ich eine einfache Lösung, mit nur einem Bedienknopf programmiert, die sehr leicht eingebaut werden kann. Der benötigte Javascript-Code und die Einstellungen werden einfach im Header der Webseite gespeichert.
Den Player können Sie hier im Einsatz sehen: CD-Seite

Hier ist der  Code des Players (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>
Viel Spaß beim Probieren!
>>  Homepage
 
Hjálmur Sighvatsson   -