Hallo!!
Achtung! Ich bin kompletter Anfänger!
Für mein Kunststudium möchte ich etwas programmieren, damit Menschen mit Sehbeeinträchtigung ein Kunstwerk erleben können.
Dazu möchte ich das Bild in Sound umsetzten.
Dafür habe ich also ein Bild über HTML eingebunden. Mit <DIV> bestimme ich einen Bereich, wo wenn der Cursor drüber hovert der Sound abgespielt werden soll.
Es soll möglich sein mehrere Sounds "übereinander" abspielen zu lassen.
Beispiel: Bild von einer Stadt und einem Bahnhof.
Wenn ich über den Bahnhof hover ertönen Bahnhofssounds. In dem Bahnhof ist ein Hund, dann kommt zu den Bahnhofssound das Bellen eines Hundes.
Das hat bisher alles super funktioniert. Ich habe nur ein Problem: Sobald ich aber den z.B. den Bahnhofssound höre und dann zum Hund hover, stockt der Sound der Bahnhofshalle kurz, bevor es dann alles gemeinsam weitergeht.
Es wäre unglaublich toll wenn mir jemand helfen könnte!
Ich kann leider (noch) kein Java und hab mir den Code nur über Foren zusammengesucht .
Herzliche Grüße,
Henni
Hier der Code:
<head></head>
<body>
<img id="foto" src="bild.jpeg">
<audio id="dampflok" src="dampflok.mp3"></audio>
<audio id="musik" src="musik.mp3"></audio>
<audio id="bahnhofshalle" src="bahnhofshalle.mp3"></audio>
<audio id="hund" src="hund.mp3"></audio>
<div id="musik"
onmouseover="document.getElementById('musik').play()"
onmouseout="document.getElementById('musik').pause()">
<div id="dampflok"
onmouseover="document.getElementById('dampflok').play()"
onmouseout="document.getElementById('dampflok').pause()"
onmouseout="document.getElementById('musik').pause()"
>
</div>
<div id="bahnhofshalle"
onmouseover="document.getElementById('bahnhofshalle').play()"
onmouseout="document.getElementById('bahnhofshalle').pause()"
onmouseout="document.getElementById('musik').pause()"
>
</div>
<div id="hund"
onmouseover="document.getElementById('hund').play()"
onmouseout="document.getElementById('hund').pause()"
onmouseout="document.getElementById('musik').pause()"
>
</div>
</body>
</div>
Achtung! Ich bin kompletter Anfänger!
Für mein Kunststudium möchte ich etwas programmieren, damit Menschen mit Sehbeeinträchtigung ein Kunstwerk erleben können.
Dazu möchte ich das Bild in Sound umsetzten.
Dafür habe ich also ein Bild über HTML eingebunden. Mit <DIV> bestimme ich einen Bereich, wo wenn der Cursor drüber hovert der Sound abgespielt werden soll.
Es soll möglich sein mehrere Sounds "übereinander" abspielen zu lassen.
Beispiel: Bild von einer Stadt und einem Bahnhof.
Wenn ich über den Bahnhof hover ertönen Bahnhofssounds. In dem Bahnhof ist ein Hund, dann kommt zu den Bahnhofssound das Bellen eines Hundes.
Das hat bisher alles super funktioniert. Ich habe nur ein Problem: Sobald ich aber den z.B. den Bahnhofssound höre und dann zum Hund hover, stockt der Sound der Bahnhofshalle kurz, bevor es dann alles gemeinsam weitergeht.
Es wäre unglaublich toll wenn mir jemand helfen könnte!
Ich kann leider (noch) kein Java und hab mir den Code nur über Foren zusammengesucht .
Herzliche Grüße,
Henni
Hier der Code:
<head></head>
<body>
<img id="foto" src="bild.jpeg">
<audio id="dampflok" src="dampflok.mp3"></audio>
<audio id="musik" src="musik.mp3"></audio>
<audio id="bahnhofshalle" src="bahnhofshalle.mp3"></audio>
<audio id="hund" src="hund.mp3"></audio>
<div id="musik"
onmouseover="document.getElementById('musik').play()"
onmouseout="document.getElementById('musik').pause()">
<div id="dampflok"
onmouseover="document.getElementById('dampflok').play()"
onmouseout="document.getElementById('dampflok').pause()"
onmouseout="document.getElementById('musik').pause()"
>
</div>
<div id="bahnhofshalle"
onmouseover="document.getElementById('bahnhofshalle').play()"
onmouseout="document.getElementById('bahnhofshalle').pause()"
onmouseout="document.getElementById('musik').pause()"
>
</div>
<div id="hund"
onmouseover="document.getElementById('hund').play()"
onmouseout="document.getElementById('hund').pause()"
onmouseout="document.getElementById('musik').pause()"
>
</div>
</body>
</div>
