Musik auf Knopfdruck

TimoW · 27 November 2015

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:

<html>
<head>
  <meta charset="utf8"/>
  <title>Linkes Frame</title>
  <link rel="stylesheet" href="main.css"/>
<style style="text/css">
body {
  background-image: url("Hintergrund.jpg");
  background-position: 50% 50%;
  background-repeat: repeat;
}
</style>
<script>
function PegboardNerds()  {
[WAS KOMMT HIER HIN?]
}
</script>
</head>

<body>
<form name="links">
</form>
<center>

<!--LINKS-->

<!--Pegboard Nerds-->
  <a href="https://www.monstercat.com/artists/PegboardNerds/">
  <img src="PegboardNerdsLogo.png" onClick="PegboardNerds()" alt="" heigth="200" width="200"
  onMouseOver="src='PegboardNerds.png'"
  onMouseOut="src='PegboardNerdsLogo.png'" /></a>
<br>
<br>
<!--Razihel-->
  <a href="https://www.monstercat.com/artists/Razihel/">
  <img src="RazihelLogo.png" alt="" heigth="200" width="200"
  onMouseOver="src='Razihel.png'"
  onMouseOut="src='RazihelLogo.png'" /></a>
  <br>
  <br>
<!--Tristam-->
  <a href="https://www.monstercat.com/artists/Tristam/">
  <img src="TristamLogo.png" alt="" heigth="200" width="200"
  onMouseOver="src='Tristam.png'"
  onMouseOut="src='TristamLogo.png'" /></a>
</center>

<center>
<audio preload controls>
  <source src="audio.mp3"
</audio>
</body>

</html>

Ich bedanke mich schon mal im Voraus!

Sempervivum · 27 November 2015

Hier fehlt die schließende Klammer:

Code:

<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?

TimoW · 27 November 2015

Sempervivum schrieb:
Hier fehlt die schließende Klammer:

Code:

<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?

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

Sempervivum · 27 November 2015

Solle so funktionieren (ungetestet):

Code:

  <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:

<audio id="player" preload controls>
  <source src="audio.mp3">
</audio>

Code:

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

TimoW · 27 November 2015

Sempervivum schrieb:

Solle so funktionieren (ungetestet):

Code:

  <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:

<audio id="player" preload controls>
  <source src="audio.mp3">
</audio>

Code:

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

Funktioniert leider nicht. :( Wofür steht das "ele" bei
function PegboardNerds(ele) { ...?

Und warum muss da ein "this" beim onClick rein?

Sempervivum · 27 November 2015

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.

TimoW · 27 November 2015

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

TimoW · 27 November 2015

Sempervivum schrieb:
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.

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.

Sempervivum · 27 November 2015

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

Musik auf Knopfdruck

TimoW

Mitglied

Sempervivum

Guest

TimoW

Mitglied

Sempervivum

Guest

TimoW

Mitglied

Sempervivum

Guest

TimoW

Mitglied

TimoW

Mitglied

Sempervivum

Guest

Neueste Beiträge