PHP Forum - Bild und Audiodatei gleichzeitig wechseln

Hallo zusammen,

ich möchte ein PHP-Script aus dem Web an meine Bedürfnisse anpassen. Das Script ist ein einfacher HTML5 Audioplayer mit Playlist. Die Angaben zu den einzelnen Audiofiles erfolgen in einem Array und das gleiche möchte ich mit den Bildern machen, welche über dem Player abhängig vom gewählten Titel erscheinen sollen. Bei jedem Titelwechsel soll auch das dazugehörige Bild mit wechseln.

Da ich in php nicht so fit bin, habe ich natürlich Schwierigkeiten das Script bzw. die Arbeitsweise des Scriptes zu verstehen um ggf. selbst auf die Lösung zu kommen. Momentan probiere ich nur wahllos herum, was zu keinem Ergebnis führen kann.

Kann mir da jemand behildlich sein, wie ich das entsprechend erweitern muß?

PHP-Code:


		
			
<?php 



/* ################### hier die .mp3 Dateien  ##################################### */



    $url = array (

        "//url/audiodatei-1.mp3",

        "//url/audiodatei-2.mp3"    //letzte Zeile ohne schließendes Komma!

    );



    /* ################### und hier die angezeigten Titel  ######################### */

    $name = array (

        "audiodatei-1",

        "audiodatei-2"        //letzte Zeile ohne schließendes Komma!

    );



    /* ################### und hier die angezeigten Bilder  ######################### */

    $image = array (

        "//url/imagedatei-1.jpg",

        "//url/imagedatei-2.jpg"        //letzte Zeile ohne schließendes Komma!

    );







$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 );

}



/* das uebergebene Bild abfragen */

if (isset($_REQUEST['bild']))  {

    $_REQUEST['bild'] = htmlentities($_REQUEST['bild']);

    if (!is_numeric($_REQUEST['bild']) || $_REQUEST['bild'] > count($image) ) {$bild = $image[0];}

    $neues_bild=true; 

    for ($i = 1; $i <= count($image); $i++) {

        if ($_REQUEST["bild"] == $i) {$bild = $image[$i-1];} 

    }

} else {

    $bild = $image[0];

}



/* den uebergebenen Titel abfragen */

if (isset($_REQUEST['titel']))  {

    $_REQUEST['titel'] = htmlentities($_REQUEST['titel']);

    if (!is_numeric($_REQUEST['titel']) || $_REQUEST['titel'] > count($url) ) {$titel = $url[0];}

/*    $autoplay="autoplay"; */ /* kein Autoplay in iOS */

    $neuer_titel=true; 

    for ($i = 1; $i <= count($url); $i++) {

        if ($_REQUEST["titel"] == $i) {$titel = $url[$i-1];} 

    }

} else {

    $titel = $url[0];

    $autoplay = "";

}



/* die Linkliste generieren */

for ($i = 1; $i <= count($url) and count($image); $i++) {



    $aufruf .= '<li><a href="?titel='.$i.'"> '.$name[$i-1];

    if ($titel == $url[$i-1]) {

        $aufruf .= "<span class='star'> ✔︎</span>";

    }

    



    $aufruf .= "</a></li>\n";



    $direktlink .= '<li><a style="color:#000" href="'.$url[$i-1].'"> '.$name[$i-1].'</a></li>';

}



?>

<!DOCTYPE html>

<html>

<head>



<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />



<link rel="stylesheet" type="text/css" media="screen" href="audioplayer.css" />

<title>Audioplayer</title>



<?php

if(isIOS()) {

echo '

<style>

    #player {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>

';

}

?>







</head>

<body  onload="Lautstaerke()">



<div id="h2"></div>

<script>

if (top.location == self.location) {

    // Seite in einem Frame geladen

    document.getElementById('h2').innerHTML='<h1>Wie alles begann</h1>';

}    

</script>











<div id="ie_fallback"></div>

<div id="player">



<img src="<?php echo $bild; ?>" >

<audio id="innerplayer" src="<?php echo $titel; ?>"  controls <?php echo $autoplay; ?> ></audio>



<ul>

<?php echo $aufruf; ?>

</ul>

</div>





<?php

$neues_bild = 0;

if (isset($_REQUEST['bild']))  {$neues_bild=$_REQUEST['bild'];}



?>    



<?php

$neuer_titel = 0;

if (isset($_REQUEST['titel']))  {$neuer_titel=$_REQUEST['titel'];}



?>    



<script>



/* Damit Screen Reader Ausgaben nicht uebertoent werden: */

function Lautstaerke() {

    document.getElementById("innerplayer").volume=1.0;

    /* Fokus auf Player setzen nach Anwahl */

    var neu = <?php echo $neuer_titel; ?>;

    

    if ( neu !== 0 ) {

        //        document.getElementById('innerplayer').focus(); // führt zu Springen des Fokus in iOS

    }

}



</script>



<?php 

/* ###########  serielle Wiedergabe Bild ######### */



if ($neues_bild >= count($image)) {

    $next = 1;

} elseif ($neues_bild == 0) {

    $next = 2;

} else {

    $next = $neues_bild +1;

} 



echo '

<script>    

document.getElementById("innerplayer").addEventListener("ended", function() {

    window.location = "?bild='.$next.'";

    return false;

});

</script>

';



?>



<?php 

/* ###########  serielle Wiedergabe ######### */



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>

';



?>







</body>

</html>