MP3 PHP AudioPlayer - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

MP3 PHP AudioPlayer

Scripte > Multimedia

MP3 Audio-Player mit beliebiger Playlist

Dieser Player spielt alle MP3 Dateien ab die in dem Verzeichnis "files" liegen und beendet beim Wechsel auf eine andere Audio-Datei das laufende Musikstück das dann wieder manuell gestartet werden muss. In der Datei "style.css" kann die Anpassung an die Homepage vorgenommen werden. Im HTML-Code werden die abzuspielenden MP3-Dateien und die Titel-Liste verwaltet.
Hier sind 2 Varianten zur Einbindung erläutert. Sollte dieser Player auf mehreren Seiten eingesetzt werden, empfiehlt sich die Variante per
<?php include "...."; ?> , um Änderungen nur in einer Datei durchführen zu müssen.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>...../head>, Startcode innerhalb des BODY-Tag <body onload="..."> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.
Eine demo.php ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.php". Die ausführende Datei muss die Dateiendung .php aufweisen.
Download Button
x runter geladen
 
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj129_0/style.css" />
Code für den <BODY> Tag
onload="Lautstaerke()"

Wer nicht mit Website X5 arbeitet:
<body onload="Lautstaerke()">
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj1229_0/player.php"; ?>

alternative Einbindung:
<?php
// hier die .mp3 Dateien
$url = array (
"wsX5Obj/Obj1229_0/files/demo-techno.mp3",
"wsX5Obj/Obj1229_0/files/demo-ewigkeit.mp3",
"wsX5Obj/Obj1229_0/files/demo-the_wait.mp3",
"wsX5Obj/Obj1229_0/files/demo-waydown.mp3",
"wsX5Obj/Obj1229_0/files/demo-holydays_in_agony.mp3",
"wsX5Obj/Obj1229_0/files/demo-kalaschnikow.mp3" //letzte Zeile ohne schließendes Komma!
);
// hier die angezeigten Titel
$name = array (
"(1) Unbek. Interpret - Techno",
"(2) Unbek. Interpret - Ewigkeit",
"(3) Unbek. Interpret - The Wait",
"(4) Unbek. Interpret - Waydown",
"(5) Unbek. Interpret - Holydays An Agony",
"(6) Unbek. Interpret - Kalaschnikaow"  //letzte Zeile ohne schließendes Komma!
);
// ab hier nicht mehr ändern
$aufruf ="";
$direktLink ="";
function isIOS($user_agent=NULL) {
if(!isset($user_agent)) {
$user_agent = isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : '';
}
return (strpos($user_agent, 'iPhone') !== FALSE || strpos($user_agent, 'iPad') !== FALSE || strpos($user_agent, 'iPod') !== FALSE );
}
if (isset($_REQUEST['titel']))  {
$_REQUEST['titel'] = htmlentities($_REQUEST['titel']);
if (!is_numeric($_REQUEST['titel']) || $_REQUEST['titel'] > count($url) ) {$titel = $url[0];}
$autoplay="autoplay";
$neuer_titel=true;
for ($i = 1; $i <= count($url); $i++) {
if ($_REQUEST["titel"] == $i) {$titel = $url[$i-1];}
}
} else {
$titel = $url[0];
$autoplay = "";
}
for ($i = 1; $i <= count($url); $i++) {
$aufruf .= '<li><a href="?titel='.$i.'#Obj129_Anker"> '.$name[$i-1];
if ($titel == $url[$i-1]) {
$aufruf .= "<span class='Obj129_star'> ✔︎</span>";
}
$aufruf .= "</a></li>\n";
$direktlink .= '<li><a style="color:#000" href="'.$url[$i-1].'"> '.$name[$i-1].'</a></li>';
}
?>

<?php
if(isIOS()) {
echo '
<style>
#Obj129_play { background: #e1e1e1 !important;border: 2px solid #aaa; }
li a { color:#000 !important; }
li { border-top: 1px solid #aaa !important }
audio { margin: 10px 0 5px 0;filter: invert(0); }
</style>
';
}
?>

<div id="Obj129_Anker">&nbsp;</div>
<div id="ie_fallback"></div>
<div id="Obj129_play">
<audio id="innerplayer" src="<?php echo $titel; ?>"  controls <?php echo $autoplay; ?> ></audio>
<ul>
<?php echo $aufruf; ?>
</ul>
</div>
<?php
$neuer_titel = 0;
if (isset($_REQUEST['titel']))  {$neuer_titel=$_REQUEST['titel'];}
?>

<script>
function Lautstaerke() {
document.getElementById("innerplayer").volume=0.7;
var neu = <?php echo $neuer_titel; ?>;
if ( neu !== 0 ) {
// document.getElementById('innerplayer').focus(); // führt zu Springen in iOS
}
}
</script>

<?php
if ($neuer_titel >= count($url)) {
$next = 1;
} elseif ($neuer_titel == 0) {
$next = 2;
} else {
$next = $neuer_titel +1;
}
echo '
<script>
document.getElementById("innerplayer").addEventListener("ended", function() {
window.location = "?titel='.$next.'";
return false;
});
</script>
';
?>
Code Datei "style.css"
#Obj129_play {
border: 6px solid #666;
border-radius: .5em;
max-width: 28em;
background: #0e0c0b;
margin:auto;
}
#Obj129_play audio { width: 99%; margin: 25px 0 0 0; border: 1px solid transparent;}
#Obj129_play audio:focus, #Obj129_play audio:hover { background:#bbb; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
audio { filter: invert(1); }
}
#Obj129_play ul { margin: 0; padding: 0 }
#Obj129_play li {
box-sizing:border-box;
-moz-box-sizing:border-box;
list-style-type:none;
/*padding:6px;*/
border-top: 2px solid #666;
/* width: 240px; */
}
#Obj129_play li a { padding: 6px; }
#Obj129_play li a:focus, #Obj129_play li a:hover { background: #ccc; color: #000; outline: 0 }
#Obj129_play li, #Obj129_play li a { color: white; text-decoration: none; font-size: .9rem; display: block; }
.Obj129_star { font-size: 1.3rem; line-height: .1rem; }

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt