Musik auf Knopfdruck

html.de-Forum JavaScript
1

Hallo liebe Community!
Ich möchte das auf Knopfdruck auf ein MouseOver Bild ein bestimmtes Lied ertönt.
Die Mouseoverbilder und meinen Musik-Player habe ich schon, ich weiß nur nicht wie man das als Funktion verlinkt.
Mein Code sieht Momentan so aus:

[CODE]

Linkes Frame body { background-image: url("Hintergrund.jpg"); background-position: 50% 50%; background-repeat: repeat; }



[/CODE]

Ich bedanke mich schon mal im Voraus!

2

Hier fehlt die schließende Klammer:

<source src="audio.mp3">

Um die Bilder hast Du ein a-href-Tag gelegt, das heißt, wenn man draufklickt, verlässt man die Seite und das Linkziel wird geladen. D. h. die Musik wird nicht spielen. Oder willst Du, dass die Musik auf der neu geladenen Seite abgespielt wird?

3

Stimmt, ist mir auch aufgefallen. Ich denke ich mache den a-href Link weg.
Aber trotzdem: Wie würde das dann funktionieren?

4

Solle so funktionieren (ungetestet):

<img src="PegboardNerdsLogo.png" onClick="PegboardNerds(this)" alt="" heigth="200" width="200" onMouseOver="src='PegboardNerds.png'" onMouseOut="src='PegboardNerdsLogo.png'" data-music="deine_musik.mp3"/>

[CODE]

[/CODE] [CODE]function PegboardNerds(ele) { player = document.getElementById("player"); player.src = ele.getAttribute("data-music"); player.play(); }[/CODE]
5

Funktioniert leider nicht. :frowning: Wofür steht das „ele“ bei
function PegboardNerds(ele) { …?

Und warum muss da ein „this“ beim onClick rein?

6

Ich bin davon ausgegangen, dass Du für jedes Bild eine andere Musik abspielen willst. Daher das Attribut data-music beim img-Tag. Und das this und das ele braucht man, um in der Funktion auf das Element zugreifen zu können. Möglicherweise funktioniert es auch ohne, wenn man in der Funktion this verwendet. Muss ich mal ausprobieren. Ich mache mal schnell eine Testseite.

7

Vielen Dank, nicht mehr nötig! :wink: Habe es jetzt hinbekommen. Keine Ahnung, was ich da eben falsch hatte.
Dankeschöön :slight_smile:

8

Eine letzte Frage: was muss ich denn jetzt ändern, um ein neues Lied für ein anderes Bild zu verwenden.
Außer einen neuen Player zu machen fällt mir nichts ein.

9

Nein, Du brauchst auch keinen anderen Player. Nur bei jedem Bild das Attribut data-music mit einer anderen Musikdatei belegen.