Add element to a List

    Und da heißt es immer, OOP verbessere die Wartbarkeit und Änderungsfreundlichkeit oder stelle sie gar sicher. Beides setzt Lesbarkeit voraus aber hier sucht man sich ja dumm und dämlich, bis man etwas gefunden hat.

    Oh, das tut mir Leid! Ich wollte dich nicht angreifen. Hatte vermutet, dass das ein Muster ist, das von der Aufgabe vorgegeben wurde. Weil Du in anderem Zusammenhang mal geschrieben hattest, dass Du etwas nicht anwenden kannst, weil die Aufgabe es anders verlangt.

    Es waren nur die 5 Module vorgegeben aber die waren leer und ich sollte den code so schreiben dass ich in die 5 Module verteile und ich sollte diese Template die in HTML vorgegeben war benutzen. Ich weiß nur nicht wo ich diese Eventlistener stellen soll, da ich den funktion addNewBird brauche :/

    Hallo Jungs. Ich bräuchte noch hilfe :( könnt ihr mir bitte helfen diese audio datei ( die bei jedem vogel ein audiopath angegeben ist) irgendwie zu spielen wenn man den kursor über den vogel in lIste drauf geht. Es wäre mega cool. Danke danke!

    Ich empfehle folgendes:

    Die URL der Sounddatei in einem data-Attribut ablegen. Leider sieht dein Template keinen Platzhalter dafür vor, aber Du könntest es so einfügen:


    Code
    .replace('<img src=', '<img data-sound="' + dein_objekt.audioPath + '" src=')

    Dann ein Audio-Objekt anlegen:

    Code
    var aud = new Audio();

    Und einen Eventhandler für Mouseover registrieren:

    Code
    $("bird-list-entry img").on("mouseover", function() {
    var audiourl = $(this).data("sound");
    aud.src = audiourl;
    aud.play(); 
});

    Und bedenke, dass es auf Touch-Geräten kein Mouseover gibt. Besser wäre es, jeweils einen Play-Button anzubringen und damit den Klang zu starten.

    Ich darf es erweitern. Das bedeutet ich darf auch ein playButton erstellen. Wie könnte ich das genau machen?


    p.s.

    Überlegen Sie sich selbstständig eine kreative oder hilfreiche Erweiterung der Anwendung und implementieren Sie diese. Für die Erweiterung können Sie z.B. die unter resources/data/audio abgelegten Audio-Dateien verwenden.

    Dann würde ich das Template so erweitern:

    Das Ersetzen des Platzhalters <%= sound %> kannst Du sicher selber machen.

    Und der Eventlistener müsste dann so aussehen:

    Code
    $("bird-list-entry span.play-button").on("click", function() {
    var audiourl = $(this).data("sound");
    aud.src = audiourl;
    aud.play(); 
});

    Ich hab das implementiert aber da bekomm ich ein fehler auf console:

    BirdingModel.js:45 Uncaught TypeError: audiourl.play is not a function

    at HTMLSpanElement.playSound


    Bei audiourl kommt der src richtig raus aber dann wird nicht gespielt. Ich hab versucht auch auf HTML nach span play-button ein audio tag zu setzen aber trotzdem kommt der gleiche Fehler raus. Wo könnte das Problem liegen?

    Code
    audiourl = bird.getElementsByTagName("audio")[0].getAttribute("src");
        console.log(audiourl); //nur zu überprüfen, kommt src raus z.B. resources/data/audio/feldsperling.ogg
    audiourl.play(); //es steht so bei und trotzdem kommt diese Fehlermeldung und ich auch so wie du es vorgeschlagen hast
                     // und kommt der gleiche Fehlermeldeung

    Cool jetzt geht, Danke vielmals :) Jetzt ist nur ein klein Problem ( sorry ich glaub ich verlang viel zu viel :( ) das Audiostück ist zu lang wie könnte ich es machen, irgendwie, das wenn an ein ander play drückst die vorherige stopt. Sorry nochmal.

    Ich hab mal bei Audio am ende controls benutzt und versuch irgendwie auf css-datei die richtige parameter zu stellen damit des auch bei design passt aber irgendwie kann ich den nicht kleiner machen. Geht das überhaupt?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden