Beiträge von Sempervivum

Sempervivum · 8. Januar 2017

Zitat

Jetzt müssen meine Menüs nur noch visible bleiben, bis ich die "Menü-Fläche" oder die auslösende area im Hauptbild verlasse...

Das verstehe ich nicht: Dass das Menü beim Verlassen der Area wieder unsichtbar wird, hast Du doch schon programmiert. Aber wenn das so ist, ist das Menü doch gar nicht bedienbar, weil es ja verschwindet, wenn man die Maus dorthin bewegt.
Oder möchtest Du, dass das Menü erscheint, wenn man mit der Maus die Area betritt und erst verschwindet, wenn man mit der Maus das Menü verlässt?

Du hast es jetzt zwar mit dem Wechsel des Bildes gelöst, aber man kann das Einfärben der Bereiche auch dynamisch mit Javascript machen:
http://www.netzgesta.de/mapper/

Das wäre zu empfehlen, wenn Du später noch weitere Areas hinzu fügen möchtest, dann musst Du nicht jedes Mal ein neues Bild anfertigen.

Hast Du auch bedacht, was auf Touch-Geräten passiert, die kein Mouseover haben?

Sempervivum · 8. Januar 2017

So, mit dem Einfügen des Bildes und der Tags im Kopf bin ich fertig. Du kannst es ja noch nach deinen Vorstellungen stylen.

PHP

<?php        error_reporting(E_ALL);
    ini_set('display_errors', '1');

    /* ####################################################################################
    Ein einfacher Audio-Player auf HTML5 Basis.
    Browser: IE 9+, Chrome (auch iOS), Safari (auch iOS), Firefox ab V. 21, neue Opera
    http://webdesign.weisshart.de 2014
    Lizenz: CC BY-NC-SA 3.0 DE
    ##################################################################################### */
    /* ################### hier die .mp3 Dateien (Streams gehen als https nicht) ######## */

	$url = array();
    $image = array();
	$title = array();
	$artist = array();
	$album = array();
	$composer = array();
	$genre = array();
	$year = array();
	$comment = array();
 
    // include getID3() library (can be in a different directory if full path is specified)
    require_once 'getID3-1.9.12/getid3/getid3.php';
    // Initialize getID3 engine
    $getID3 = new getID3;
    // $files = glob("audio/*.mp3");
	$files = glob("S-Test_mp3/*.mp3");
    foreach ($files as $filename) {
        $url[] = $filename;
        // Analyze file and store returned data in $ThisFileInfo
        $ThisFileInfo = $getID3->analyze($filename);
        //var_dump($ThisFileInfo);
        if(isset($ThisFileInfo['comments']['picture'][0])){
            $image[] =  'data:'.$ThisFileInfo['comments']['picture'][0]['image_mime'].';charset=utf-8;base64,'.base64_encode($ThisFileInfo['comments']['picture'][0]['data']);
        } else {
            $image[] = '';  
        }
        if(isset($ThisFileInfo['tags']['id3v2']['title'][0])) $title[] = $ThisFileInfo['tags']['id3v2']['title'][0]; else $title[] = '';
        if(isset($ThisFileInfo['tags']['id3v2']['artist'][0])) $artist[] = $ThisFileInfo['tags']['id3v2']['artist'][0]; else $artist[] = '';
        if(isset($ThisFileInfo['tags']['id3v2']['album'][0])) $album[] = $ThisFileInfo['tags']['id3v2']['album'][0]; else $album[] = '';
        if(isset($ThisFileInfo['tags']['id3v2']['composer'][0])) $composer[] = $ThisFileInfo['tags']['id3v2']['composer'][0]; else $composer[] = '';
        if(isset($ThisFileInfo['tags']['id3v2']['genre'][0])) $genre[] = $ThisFileInfo['tags']['id3v2']['genre'][0]; else $genre[] = '';
        if(isset($ThisFileInfo['tags']['id3v2']['year'][0])) $year[] = $ThisFileInfo['tags']['id3v2']['year'][0]; else $year[] = '';
        if(isset($ThisFileInfo['tags']['id3v2']['comment'][0])) $comment[] = $ThisFileInfo['tags']['id3v2']['comment'][0]; else $comment[] = '';
    }

    /* ##################### ab hier nicht mehr editieren ########################## */
    $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 );
    }

    /* den uebergebenen Titel abfragen */
    if (isset($_REQUEST['titel']))  {
        $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 = "";
    }




    /* Das Infofeld generieren */
    if (isset($_REQUEST['titel'])) $activei = $_REQUEST['titel'] - 1; else $activei = 0;
    $infofield = '<img id="infoimg" width="150" height="150" src="' . $image[$activei] . '">';
    $infofield .= '<ul id="infolis">';
    $infofield .= '<li>Titel: ' . $title[$activei] . '</li>';
    $infofield .= '<li>Interpret: ' . $artist[$activei] . '</li>';
    $infofield .= '<li>Album: ' . $album[$activei] . '</li>';
    $infofield .= '<li>Komponist: ' . $composer[$activei] . '</li>';
    $infofield .= '<li>Genre: ' . $genre[$activei] . '</li>';
    $infofield .= '<li>Jahr: ' . $year[$activei] . '</li>';
    $infofield .= '<li>Kommentar: ' . $comment[$activei] . '</li>';
    $infofield .= '</ul>';




    /* die Linkliste generieren */
    for ($i = 1; $i <= count($url); $i++) {
        $aufruf .= '<li><a href="?titel=' . $i . '"> ' . $title[$i - 1] . ' - ' . $artist[$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].'"> '.$title[$i-1].'</a>';
        $direktlink .= '</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="S-Test_css/audiotest.css" />
        <title>HTML5 Audio und Radio Player</title>
        <!-- <script src="modernizr.custom.29132.js"></script> -->
        <?php
            if(isIOS()) {
            echo '
            <style>
                #player {background: #e1e1e1;border: 2px solid #aaa;}
                li a {color:#000 !important;}
                li {border-top: 1px solid #aaa}
                audio {margin: 10px 0 5px 0}
            </style>
            ';
            }
        ?>
    </head>
    <body onload="Lautstaerke()">
        <!-- <h2>HTML5 Audio- und Radio-Player</h2> -->
        <div id="h2"></div>
        <script>
            if (top.location == self.location) {
                // Seite in einem Frame geladen
                document.getElementById('h2').innerHTML='<h1>HTML5 Audio- und Radio-Player</h1>';
            }    
        </script>
 
 
        <div id="ie_fallback"></div>
        <div id="player">
            <div id="mp3infos"><?php echo $infofield; ?></div>
            <!-- erstaunlich: ohne <source> tag gehts auch mit VO auf iOS -->
            <audio id="innerplayer" src="<?php echo $titel; ?>" controls <?php echo $autoplay; ?>></audio>
            <ul>
                <?php echo $aufruf; ?>
            </ul>
        </div>
        <div id="down_hinweis"></div>
 
        <!-- <p id="gemafrei" class="bem">Gemafreie Demo-mp3: <a href="http://www.MP3-GEMA-frei.de">MP3-GEMA-frei.de</a></p> -->
        <?php
            $neuer_titel = 0;
            if (isset($_REQUEST['titel']))  {$neuer_titel=1;}
        ?>
        <script>
            // if (!Modernizr.audio.mp3) {
            //     document.getElementById('player').style.display = 'none';
            //     document.getElementById('ie_fallback').innerHTML='<p>Ihr Browser kann leider keine Audios im MP3-Format abspielen. Das tut uns leid. <br />Ersatzweise hier die Links zum Abspielen in einem installierten Player oder zum Download (rechte Maustaste).</p> <ul><?php echo $direktlink; ?></ul>';
            // }

            /* Damit Screen Reader Ausgaben nicht uebertoent werden: */
            function Lautstaerke() {
                document.getElementById("innerplayer").volume=0.7;
                /* Fokus auf Player setzen nach Anwahl */
                    var neu = <?php echo $neuer_titel; ?>;
                if ( neu === 1 ) {
                    document.getElementById('innerplayer').focus();
                }
            }
        </script>
      </body> </html>

Alles anzeigen

Sempervivum · 8. Januar 2017

Zitat

Bei mir sollen ja "nur" 8 Tags pro mp3 ausgelesen werden.

Diese Zeile im PHP:

PHP

$ThisFileInfo = $getID3->analyze($filename);

liest alle Tags aus. Welche man dann verwendet, spielt keine Rolle.

Zitat

Lasse Dich nicht irritieren: Es ist exakt der html5-List-Player von dem Herrn Weisshart > erl ässt sich via CSS anders layouten! Das habe ich gemacht.

Man kann das Umfeld des Player layouten, aber der Player selbst mit seinen Controls sieht in jedem Browser anders aus. Das Layout in deiner Grafik ist das von Firefox. Probiere es mal mit einem anderen Browser!
Aber wir können das erst Mal zurück stellen.

Was das Laden betrifft, habe ich es gerade mit deiner Testseite ausprobiert und diese lädt wirklich sehr schnell. Wenn das so ist, können wir das Neuladen wahrscheinlich akzeptieren und ich werde jetzt mit dem Einfüge der Tags in den Kopf weiter machen.

Sempervivum · 8. Januar 2017

Noch etwas: Der Player in deiner Grafik sieht ganz anders aus als der Player, der von der Testseite angezeigt wird. Dieser ist der Player von HTML5 und er sieht in jedem Browser anders aus - probiere es aus. Ich selber benutze den Mediaelement-Player:
http://mediaelementjs.com/
Dieser sieht annähernd so aus wie in deiner Grafik, bis auf den Lautstärkebalken. Überlege, ob wir beim HTML5-Player bleiben oder mediaelement nehmen.

Sempervivum · 8. Januar 2017

Zitat

es hat sehr lange gedauert bis sich die Testseite aufgebaut hat

Ich vermute, dass das nicht nur an dem var_dump liegt, sondern vor allem daran, dass ja die MP3s gelesen werden müssen, um die Tags zu ermitteln. Im Zusammenhang damit müssten wir zunächst eine Frage klären, bevor ich weiter mache:
Wählt man aus der Liste einen anderen Titel aus, wird leider die Seite neu geladen. Das bedeutet, dass in diesem Fall wieder die ganze Zeit verstreicht, in der die Tags gelesen werden. Probiere das mal aus. Wenn es nicht akzeptabel ist, müssten wir uns von diesem Verfahren verabschieden und den ausgewählten Titel mit Javascript an den Player schicken, so dass er gespielt wird, ohne dass die Seite neu geladen wird.

Sempervivum · 8. Januar 2017

Na, das ist doch ein großer Fortschritt, dass jetzt die Tags ausgelesen werden.
Dann poste mal, welche Tags Du brauchst (wenn Du das var_dump() aktivierst, siehst Du, dass sehr viele vorhanden sind) und wo sie angezeigt werden sollen. Ich glaube, früher hattest Du geschrieben, dass z. B. das Bild über dem Player angezeigt werden soll. Also beschreibe genau welches Tag wo angezeigt werden soll, in der Liste unter dem Player für alle Titel oder/und in dem Anzeigefeld über dem Player für den aktuellen.

Sempervivum · 8. Januar 2017

Dieses ist wohl das entscheidende:
"Caught exception: Required module.tag.id3v2.php is missing."

Anscheinend ist die Datei getid3.php wohl doch nicht ausreichend, sondern er braucht weitere Dateien aus diesem Verzeichnis. Versuche, alle wieder hochzuladen, dann müsste es sich verbessern. Das sind ca. 1,7 MB und diese müssen ja nicht herunter geladen werden, wie bei js-Dateien, sondern sie werden nur auf dem Server gebraucht.

Sempervivum · 8. Januar 2017

Er findet immer noch keine Tags. Bau den var_dump noch Mal ein:

PHP

$ThisFileInfo = $getID3->analyze($filename);var_dump($ThisFileInfo);

Sempervivum · 7. Januar 2017

Zitat

reicht nur dieser Pfad und dort als einzige (!) Datei die "getid3.php"?!?

Genau, Du brauchst auf dem Server nur diese eine Datei.

Sempervivum · 7. Januar 2017

Die Ausgabe von var_dump() liefert die Erklärung, warum es nicht funktioniert:
"getID3() requires PHP v5.3.0 or higher - you are running v5.2.17"

Das PHP deines Servers ist zu alt. 5.2 wird schon lange nicht mehr unterstützt. Informiere dich bei deinem Hoster, wie Du auf eine neuere Version upgraden kannst.

Sempervivum · 7. Januar 2017

Kein Problem, so etwas macht mir Spaß!
Füge doch mal ein var_dump() nach dem Auslesen der Tags ein:

PHP

$ThisFileInfo = $getID3->analyze($filename);        var_dump($ThisFileInfo);

Sempervivum · 7. Januar 2017

PS: Ups, das war nichts: Wenn ich diese Datei im Broswer aufrufe, wird natürlich das PHP nicht angezeigt, sondern nur geparst.

Sempervivum · 7. Januar 2017

Ich habe deinen PHP-Code aus der txt-Datei und die beiden MP3s herunter geladen, die Pfade in meinem lokalen Verzeichnis angepasst und damit funktioniert es bei mir einwandfrei.
Ich habe festgestellt, dass deine Datei http://www.foto-finish.de/getID3-1.9.12/getid3/getid3.php zwar gefunden wird, aber leer ist. Ist da vielleicht bei Hochladen etwas schief gelaufen?

Sempervivum · 7. Januar 2017

Das wäre diese Zeile:

PHP

$name[] = $ThisFileInfo['tags']['id3v2']['title'][0];

Würde bedeuten, dass der title-Tag in der MP3 nicht vorhanden ist. Das wundert mich, denn ich hatte mit "Here And Now And There And Then - Lenni Paul Klimek" getestet und da wurde der Titel angezeigt. Versuche es zunächst mal mit dieser Datei.

Sempervivum · 7. Januar 2017

Dieser Fehler kommt offenbar von dieser Zeile:

PHP

$titel = $url[0];

Offenbar hat er die MP3s noch nicht gefunden. Bist Du sicher, dass der Pfad richtig ist und dass die MP3s dort liegen?

Edit1: Doch, die MP3s sind da. Dann verstehe ich nicht, warum er sie nicht findet.

Edit2: Leider kann ich den PHP-Code nicht einsehen. Vielleicht kannst Du den Code der Seite zusätzlich mit der Endung "txt" hoch laden, dann kann ich ihn dort lesen.

Sempervivum · 7. Januar 2017

Nein, es muss natürlich nicht unbedingt "audio" sein, Du kannst den Pfad beliebig anpassen. Ich hätte ihn als Konstante ganz oben in dem Skript definieren sollen.

Und nein, Du brauchst die Bilder nicht explizit als Thumbnails abzulegen. Das Skript liest sie aus den MP3s.

Und was dieses betrifft:

Zitat

Fatal error: Cannot use [] for reading in /home/foto-finishde/public_html/S-Test.php on line 15

Anscheinend unterstützt deine PHP-Version die Schreibweise mit [] nicht. Verwende statt dessen dieses:

PHP

$url = array();    $name = array();     $image = array();

Sempervivum · 7. Januar 2017

Du musst deine MP3s in das Verzeichnis audio legen. Hast Du das getan? Ich habe den Code natürlich getestet und bei mir hat er einwandfrei funktioniert.
Ich habe auch eine von deinen MP3s getestet und sie wird einwandfrei angezeigt, einschl. Bild, und abgespielt.

Sempervivum · 7. Januar 2017

Ich bin mal nach diesen beiden Anleitungen vorgegangen:
http://www.phpgangsta.de/mogli…ionen-aus-mp3s-auszulesen

http://stackoverflow.com/quest…m-art-from-an-mp3-id3-tag

Damit funktioniert es einwandfrei, einschl. Auslesen des Bildes, wenn denn eines vorhanden ist:

PHP

<?php    
    error_reporting(E_ALL);
    ini_set('display_errors', '1');

    /* ####################################################################################
    Ein einfacher Audio-Player auf HTML5 Basis.
    Browser: IE 9+, Chrome (auch iOS), Safari (auch iOS), Firefox ab V. 21, neue Opera
    http://webdesign.weisshart.de 2014
    Lizenz: CC BY-NC-SA 3.0 DE
    ##################################################################################### */
    /* ################### hier die .mp3 Dateien (Streams gehen als https nicht) ######## */

    $url = [];
    /* ################### und hier die angezeigten Titel  ######################### */
    $name = [];
    $image = [];
 
    // include getID3() library (can be in a different directory if full path is specified)
    require_once 'getID3-1.9.12/getid3/getid3.php';
    // Initialize getID3 engine
    $getID3 = new getID3;
    $files = glob("audio/*.mp3");
    foreach ($files as $filename) {
        $url[] = $filename;

        $ThisFileInfo = $getID3->analyze($filename);
        // Analyze file and store returned data in $ThisFileInfo
        $name[] = $ThisFileInfo['tags']['id3v2']['title'][0];

        if(isset($ThisFileInfo['comments']['picture'][0])){
            $image[] =  'data:'.$ThisFileInfo['comments']['picture'][0]['image_mime'].';charset=utf-8;base64,'.base64_encode($ThisFileInfo['comments']['picture'][0]['data']);
        } else {
            $image[] = '';  
        }
    }

    /* ##################### ab hier nicht mehr editieren ########################## */
    $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 );
    }

    /* den uebergebenen Titel abfragen */
    if (isset($_REQUEST['titel']))  {
        $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); $i++) {
        $aufruf .= '<li><a href="?titel='.$i.'"> '.$name[$i-1];
        if ($titel == $url[$i-1]) {
            $aufruf .= "<span class='star'> âœ”ï¸Ž</span>";
        }
        if ($image[$i - 1] != '') $aufruf .= '<img id="FileImage" width="150" src="' . $image[$i - 1] . '" height="150">';
        $aufruf .= "</a></li>\n";
        $direktlink .= '<li><a style="color:#000" href="'.$url[$i-1].'"> '.$name[$i-1].'</a>';
        $direktlink .= '</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="audiotest.css" />
        <title>HTML5 Audio und Radio Player</title>
        <!-- <script src="modernizr.custom.29132.js"></script> -->
        <?php
            if(isIOS()) {
            echo '
            <style>
                #player {background: #e1e1e1;border: 2px solid #aaa;}
                li a {color:#000 !important;}
                li {border-top: 1px solid #aaa}
                audio {margin: 10px 0 5px 0}
            </style>
            ';
            }
        ?>
    </head>
    <body onload="Lautstaerke()">
        <!-- <h2>HTML5 Audio- und Radio-Player</h2> -->
        <div id="h2"></div>
        <script>
            if (top.location == self.location) {
                // Seite in einem Frame geladen
                document.getElementById('h2').innerHTML='<h1>HTML5 Audio- und Radio-Player</h1>';
            }	
        </script>
 
 
        <div id="ie_fallback"></div>
        <div id="player">
            <!-- erstaunlich: ohne <source> tag gehts auch mit VO auf iOS -->
            <audio id="innerplayer" src="<?php echo $titel; ?>" controls <?php echo $autoplay; ?>></audio>
            <ul>
                <?php echo $aufruf; ?>
            </ul>
        </div>
        <div id="down_hinweis"></div>
 
        <!-- <p id="gemafrei" class="bem">Gemafreie Demo-mp3: <a href="http://www.MP3-GEMA-frei.de">MP3-GEMA-frei.de</a></p> -->
        <?php
            $neuer_titel = 0;
            if (isset($_REQUEST['titel']))  {$neuer_titel=1;}
        ?>
        <script>
            // if (!Modernizr.audio.mp3) {
            // 	document.getElementById('player').style.display = 'none';
            // 	document.getElementById('ie_fallback').innerHTML='<p>Ihr Browser kann leider keine Audios im MP3-Format abspielen. Das tut uns leid. <br />Ersatzweise hier die Links zum Abspielen in einem installierten Player oder zum Download (rechte Maustaste).</p> <ul><?php echo $direktlink; ?></ul>';
            // }

            /* Damit Screen Reader Ausgaben nicht uebertoent werden: */
            function Lautstaerke() {
                document.getElementById("innerplayer").volume=0.7;
                /* Fokus auf Player setzen nach Anwahl */
                    var neu = <?php echo $neuer_titel; ?>;
                if ( neu === 1 ) {
                    document.getElementById('innerplayer').focus();
                }
            }
        </script>
 
    </body> </html>

Alles anzeigen

Dieses Skript liest die MP3s aus dem Unterverzeichnis audio aus.

Sempervivum · 6. Januar 2017

Das sollte doch zu machen sein.

Zitat

Ich habe im Netz gesucht und wirklich einiges zum Thema gefunden, aber leider funktioniert dieses alles nicht

Poste doch mal, wonach Du vorgegangen bist und woran es gescheitert ist.

Sempervivum · 5. Januar 2017

Hast Du dir jPlayer schon angesehen?
http://jplayer.org/latest/demos/
Edit: Ich sehe gerade, der ist von Haus aus nicht responsive, aber es gibt anscheinend Wege, das nachzurüsten:
http://stackoverflow.com/quest…e-audio-player-responsive

Beiträge von Sempervivum

Teile eines IMG mit hover versehen, welches jew. ein DropDown-Menü anzeigt

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Suche guten html5 mp3 Player mit Playlist zum selber machen