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

...komplette Frage anzeigen

2 Antworten

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>

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

0

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

0
@swobocop

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>
1
@rmnstr

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

0
@swobocop

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 ;)

1

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

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

0

Was möchtest Du wissen?