Beiträge von Sempervivum

Sempervivum

Gar nicht verwirrend. Ich hatte es zunächst auch so verstanden, aber dann in meine Testdatei gesehen, die ich früher von dir übernommen hatte und dort keine Skriptdatei gefunden. In deiner endgültigen Seite habe ich es jedoch gefunden. Wenn Du mein Skript in deins übernimmst, das Du im Header einziehst, musst Du es in das document-ready schreiben:

JavaScript

$(document).ready(function() {
		$('.menubutton').click(function() {
			$('nav').slideToggle('slow');
		});
                window.addEventListener("beforeunload", function () {
                    window.localStorage.setItem("scrollLeft" + window.location.pathname, $(window).scrollLeft());
                    window.localStorage.setItem("scrollTop" + window.location.pathname, $(window).scrollTop());
                });
                var leftPos = window.localStorage.getItem("scrollLeft" + window.location.pathname);
                var topPos = window.localStorage.getItem("scrollTop" + window.location.pathname);
                $(window).scrollLeft(leftPos);
                  $(window).scrollTop(topPos);	});

Alles anzeigen

Sempervivum

Ganz korrekt ist dein Entwurf noch nicht, es muss so aussehen:

JavaScript

window.addEventListener("beforeunload", function () {                window.localStorage.setItem("scrollLeft" + window.location.pathname, $(window).scrollLeft());
                window.localStorage.setItem("scrollTop" + window.location.pathname, $(window).scrollTop());
            });
            var leftPos = window.localStorage.getItem("scrollLeft" + window.location.pathname);
            var topPos = window.localStorage.getItem("scrollTop" + window.location.pathname);
            $(window).scrollLeft(leftPos);             $(window).scrollTop(topPos);

Wenn Du das in eine Datei, z. B. scrollto.js schreibst, musst Du diese, analog zu jQuery, so einziehen:

HTML

<script src="scrollto.js"></script>

ggf. mit Verzeichnis, wenn Du sie in ein Unterverzeichnis legst.

Sempervivum

Was das Einbinden von jQuery betrifft: Wenn Du diese Zeile schon hast, solltest Du jQuery nicht ein zweites Mal einbinden.

Natürlich kannst Du das Javascript in eine Datei einziehen und auf allen Seiten verwenden. Du musst jedoch bedenken, dass es nur bei einem Neuladen der gleichen Seite funktioniert. Wenn Du eine neue Seite lädst, wird die Scrollposition der vorigen Seite eingestellt und das ist ja sicher nicht das, was Du willst. Man kann das aber ändern, indem man die URL der Seite in den Item-Namen mit aufnimmt, etwa so:

JavaScript

window.localStorage.setItem("scrollLeft-" + window.location.pathname, $(window).scrollLeft());

Sempervivum

Ich habe da mal etwas ausgearbeitet:
https://jsfiddle.net/ao6Le32x/3/

Damit brauchst Du nur ein zusätzliches, rot eingefärbtes Bild.
Statt einer image-map habe ich für jeden Bereich ein div über das Bild gelegt. Das funktioniert natürlich nur mit rechteckigen Bereichen, aber ich glaube, das trifft bei dir zu.
Schau mal, ob das das ist, was Du dir vorgestellt hast.

Sempervivum

Um es browserübergreifend zum Laufen zu bringen, musste ich jquery verwenden. Binde es im head ein:

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

und füge dieses Javascript am Ende des body, vor dem schließenden </body> ein:

JavaScript

<script>            window.addEventListener("beforeunload", function () {                window.localStorage.setItem("scrollLeft", $(window).scrollLeft());                window.localStorage.setItem("scrollTop", $(window).scrollTop());            });            var leftPos = window.localStorage.getItem("scrollLeft");            var topPos = window.localStorage.getItem("scrollTop");            $(window).scrollLeft(leftPos);            $(window).scrollTop(topPos);         </script>

Sempervivum

Zitat

nun lädt die Seite ja immer neu und springt dabei nach oben. Gibt es eine Funktion, dass die Seite "stehen bleibt" auch wenn sie neu lädt?

Ja, man kann die Scrollposition im Localstorage speichern und beim Neuladen die wieder herstellen. Mache ich dann ...

Sehr gelungenes Design!

Sempervivum

Dann mach es doch so:

HTML

<area   shape="rect" coords="510,32,640,328" href="javascript:showMenu('menu4');"
   onmouseover="changeImage('bild_40.png'); document.getElementById('menu4').style.display = 'block';"
   onmouseout="changeImage('bild.png');"/>

HTML

<div id="menu4" onmouseout="this.style.display = 'none';"> 
         Menu 4 
        <a href="link1.htm">Link1</a> 
        <a href="link2.htm">Link2</a> 
        <a href="link3.htm">Link3</a>    </div>

Eleganter wäre es jedoch, das Menü so zu positionieren, dass es die Area überlappt, so dass man ohne Unterbrechung von einem zum anderen hovern kann.

Sempervivum

Tabellen für Layoutzwecke sind heutzutage stark verpönt. Ich empfehle, die Elemente mit CSS nebeneinander anzuordnen:

CSS

#infoimg {                float: left;
            }
            #infolis {
                margin-left: 150px !important;             }

Oder so:

CSS

#infolis {                display: inline-block;
                width: calc(100% - 150px);
            }
            #mp3infos img {
                vertical-align: top;             }

Sempervivum

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

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

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

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

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

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

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

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

PHP

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

Sempervivum

Zitat

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

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

Sempervivum

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

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

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

Beiträge von Sempervivum

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

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

Tags aus mp3-Dateien auslesen

Tags aus mp3-Dateien auslesen

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

Tags aus mp3-Dateien auslesen

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