:: Buchempfehlung ::

ChaosRacer · #1 05.11.2019, 16:09:30

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>

ChaosRacer · #2 06.11.2019, 08:35:42

Ich habe weiter etwas herumprobiert und bin nun soweit gekommen, daß ich getrennt voneinander das Bild sowie auch den Titel wechseln kann. Aber ich bekomme die 2 Links nicht in einem vereint, sodaß beides zur gleichen Zeit passiert.

PHP-Code:


			
/* 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";

    $aufruf .= '<a href="?bild='.$i.'">';
    
        $aufruf .= "</a>\n";

}

PHP-Code:


			
<div id="player">
   
<img src="<?php echo $bild; ?>" />
<audio id="innerplayer" src="<?php echo $titel; ?>"  controls ></audio>

<ul>
<?php echo $aufruf; ?>
</ul>
</div>

Im Web habe ich dann verschiedene onClick-Versuche gemacht, welche aber leider auch nicht den gewünschten Erfolg brachten (vermutlich auch deswegen, weil ich die Scripte nicht richtig eingesetzt habe).

Wäre dafür onClick überhaupt der richtige Ansatz und wie müßte daß dann richtig implementiert werden?
Oder kann ich die oben genannte Variante zu einem komplette Link irgendwie miteinander verknüpfen?

:: Buchempfehlung ::

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!