Frage von swobocop, 91

Wie kann ich über einen :hover mit Html5 css und javascript einen ton abspielen?

Hallo Leute, ich bastel seit kurzem an einer kleinen Homepage und möchte bei der auslösung eines hovers (sobald der zeiger auf ein bestimmtest element zeigt) ein ton abspielen lassen.. Ich suche bereits seit 2 tagen nach einer lösung, jedoch vergeblich... ich habe sehr gute erklärungen gefunden jedoch kommt bei mir eine fehler meldung sobald ich folgendes eingebe: und zwar wird das source rot unterstrichen... ich weiß jedoch nicht wieso und bei allem lösungen die ich gefunden habe finde ich fast immer die gleiche lösung... ich arbeite mit dem editor NetBeans... die seite besteht der zeit aus Html5 und css... javascript wird auch kommen sobald ich eine lösung für das problem gefunden habe...

vllt findet sich jemand der sich gut auskennt und mir evtl. ein guten beispiel für die lösung zeigen kann ....

danke schon mal :)

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von rmnstr, 91

Mit dem HTML5 audio Tag und mouse events.

<audio id="mysound" controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>
<button onmouseover="document.getElementById('mysound').play()"
onmouseout="document.getElementById('mysound').pause()">
Hover me!
</button>
Kommentar von swobocop ,

super sache genau so in etwa habe ich es mir vorgestellt... das einziege was noch nicht so richtig funktioniert ist wenn ich mit dem mauszeiger aus der div raus gehe, dann läuft der sound weiter und hört nicht auf... bei einem erneuten reinfahren wird der sound auch nicht von neu gestartet sonder läuft durch bis er fertig ist... vllt hast du da auch noch eine lösung dafür ?:)

ich habe den audio tag über die div gepackt und die onmouseover und onmouseout nun in den div tag gepackt..ich möchte auch mein html code hier einfügen aber irgendwie funktionierts nicht ..-.-

liebe grüße

Kommentar von swobocop ,

und vllt weißt du auch wie ich die player leiste wegbekomme? :)

Kommentar von rmnstr ,

Das Audio-Element kannst du ausblenden, indem du controls einfach entfernst.

Ganz stoppen kannst du das Audiofile mit Hilfe der currentTime property vom audio Element.

<div id="mysound"
onmouseover="document.getElementById('mysound').play()"
onmouseout="stop()">
Hover me!
</div>

<script>
function stop() {
var audio = document.getElementById('mysound');
audio.pause();
audio.currentTime = 0;
}
</script>
Kommentar von swobocop ,

super vielen dank... genau so habe ich es mir vorgestellt und nach genau so einer lösung habe ich gesucht :) kennst du dich persönlich so gut aus oder kannst du mir vllt eine gute quelle empfehlen?

evtl. könnten wir irgendwie in kontakt bleiben falls ich noch paar fragen hätte? :)

liebe grüße

Kommentar von rmnstr ,

Du solltest dich bei so etwas immer über die Eigenschaften eines HTML-Elements informieren.
http://www.w3schools.com/ bietet dafür eine ganz gute Übersicht.

Über JavaScript kannst du jede dieser Eigenschaften manipulieren, das läuft alles eigentlich immer gleich ab.

Ansonsten solltest du bei solchen Fragen immer zuerst auf Stackoverflow suchen. Die Chancen stehen ziemlich gut, dass dort jemand schon dasselbe gefragt hat. Du musst halt nur auf Englisch suchen ;)

Antwort
von caigie, 75

wird mit :hover wahrscheinlich nicht machbar sein, da css eigentlich nicht viel mit audiodateien anstellen kann.

Du solltest dafür javascript verwenden, einen EventListener für ein mouseover auf dein Element setzen und dann darin ein auf der seite eingebautes audioelemnt abspielen

Kommentar von swobocop ,

könntest du mir evtl. eine kleine vorlage schreiben wie das alles aussieht? auch in javascript?

Keine passende Antwort gefunden?

Fragen Sie die Community