MP3 PHP AudioPlayer - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Direkt zum Seiteninhalt

MP3 PHP AudioPlayer

Scripte > Multimedia


Ein Online Flash Music Player.

Dieser Player benötigt kein Flash Plugin und 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
Downloads:
 
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; }
Feedbacks zu ""

Keine Kommentare gefunden.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 2 Online
            » 69 Heute
            » 1 Gestern
            » 69 Woche
            » 322 Monat
            » 44379 Jahr
            » 268585 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt