✔ Lesen eines Attribut

[ojamaney]

Hallo,

ich bin jetzt schon den ganzen Tag am suchen, finde aber keine Lösung für das was ich möchte.
Ich hoffe ich bekomme hier einen Hinweis.

Und zwar möchte ich mir eine Seite erstellen auf der ich meine eigene Musik abspielen kann.
Ich möchte aber kein Player-Plugin dafür benutzen, ich will wat eigenes.

Also dachte ich, ich baue mir eine Liste mit den Titeln, wobei beim Klick auf den Titel die Musik abgespielt bzw pausiert wird.

Html-Code:

<div id="idname"
<ul>
<li onclick="play()"
url="mp3/tralala.mp3"
cover="xyz.jpg"
artist="ohjamaney">Dateiname</li>
</ul>
</div>

JavaScript:

function play() {
    // Abspielen
    var song = document.getElementElementById("idname").url;
    document.getElementById(var song).play();

}

So, das funktioniert ja so nicht. ich brauche die richtige Syntax. Im Netz habe ich alles Mögliche über den Zugriff auf Attribute gefunden. Aber nichts wo steht wie ich auf eine Liste zugreife mit immer dem gleichen Tag, nämelich <li>

Wenn ich einen Gedankenfehler beim Ablauf habe, nur raus damit. Ansonsten brauche ich nur die richtige Syntax. Ich kann HTML, PHP und VB und das nötigste in JS. Ich will jetzt nicht noch ausführliches JS dazulernen. Das ist mir mit fast 60 zu anstrengend zumal es anscheinend keine Tutorials für Blödmänner mehr gibt. Die Foren die man meisten findet sind voll mit kryptischen Fachsprachen-Keulen und "foo-bar" Gesabbel, da blick ich nicht mehr durch.

Für einen kleinen Schubs in die richtige Richtung wäre ich sehr dankbar!

 

[Sempervivum]

Du brauchst zwar kein Plugin, aber einen Player schon. Das audio-Element liefert dir diesen.

Dieses:

var song = document.getElementElementById("idname").url;

wird nicht funktionieren, da url kein Attribut von #idname ist, sondern von dem untergeordneten li-Element.

Nicht zwingend, weil die Browser es tolerieren, aber benutzerdefinierte Attribute sollten das Präfix "data" haben, also: data-url="mp3/tralala.mp3"

Es bietet sich an, das geklickte Element als Parameter an die Funktion zu übergeben, dann hast Du direkten Zugriff auf die Attribute:

onclick="play(this)"

Alles zusammen müsste dann so aussehen:

<audio id="player"></audio>
<ul>
    <li onclick="play(this)"
        data-url="mp3/tralala.mp3"
        data-cover="xyz.jpg"
        data-artist="ohjamaney">Song xyz
    </li>
</ul>
<script>
    function play(ele) {
        var url = ele.getAttribute("data-url");
        player.src = url;
        player.play();
    }
</script>

 

[ojamaney]

Vielen Dank!
Genau das habe ich gesucht.

Es war mir klar, dass "url" kein Attribut von "idname" war, nur wusste ich nicht wie ich auf das "li" zugreifen sollte. Davon gibt es ja mehrere.
Das "this" ist ja fast schon selbsterklärend. Muss man nur drauf kommen... oder wissen.