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.

x runter geladen

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code für den <BODY> Tag

onload="Lautstaerke()"

Wer nicht mit Website X5 arbeitet:

Innerhalb des <BODY> Tag

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>
';

}

<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'];}

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>
';

Nach dem <BODY> Tag

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 «