Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Soundausgabe mit audio.play() und onmouseover
#1
Hallo in die Runde. Ich erstelle monatlich ein Online-Comic-Kalenderblatt und lasse mir dabei unter Verwendung von JavaScript immer wieder neue Effekte einfallen, die Sache etwas interessanter zu machen. Klappt auch im Prinzip sehr gut - aber jetzt könnte ich mal einen Hinweis gebrauchen. Schon des Öfteren habe ich mit der einfachen Funktion:

function Sound(s) {
  var audio = new Audio(s);
  audio.volume = 0.5;
  audio.play();
}


Soundeffekte bei einem onclick-Ereignis aus einem "area shape" eingebunden. Diesmal soll zusätzlich auch bei mouseover
Zitieren
#2
Dann brauchst du ja theoretisch nur onclick auszutauschen zu mouseover.
Das sollte eigentlich schon gehen, wenn ich dich richtig verstehe
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren
#3
(07.11.2022, 23:34)admin schrieb: Dann brauchst du ja theoretisch nur onclick  auszutauschen zu mouseover.
Das sollte eigentlich schon gehen, wenn ich dich richtig verstehe

Ich glaube meine Frage wurde etwas verstümmelt übertragen. Noch einmal etwas genauer:
Ich benutze auf der entsprechenden Seite sowohl mouseover als auch  onclick, sogar bei den selben area shape objekten. Schwebt der Mauszeiger über dem area shape, dann wird (mittels mouseover) ein Einleitungstext gesprochen und dazu ein Div mit Text und Grafik gefüllt. 
Bei nachfolgenden onclick-Ereignissen wird dann bei jedem Klick die eigentliche Geschichte (für dieses Objekt) über Soundausgabe und Grafikanzeige erzählt bzw. weitererzählt. Zwischendurch kann auf andere area shapes gewechselt werden und so die gesamte Map - auch durcheinander durchgespielt werden.
Es funktioniert ja auch alles ... bis auf das allererste mouseover. Da regt sich kein Ton, als würde so etwas wie eine Initialisierung der Soundausgabe fehlen.
Wenn ich aber nach dem Aufbau der Seite einen beliebigen Klick mit der Maus vollführe (auch außerhalb der Map) oder eine beliebige Taste drücke, dann funktioniert alles von Beginn an.
Das gleiche Problem habe ich übrigens auch auch, wenn ich in der window.onload-Funktion die Funktion Sound() oder audio.play() direkt aufrufe.
Zitieren
#4
Ist das möglich, das mal Live zu testen?
Da jetzt irgendwelche Vermutungen abzugeben, bringt ja auch nichts, gerade wenn man den Code so nicht kennt.
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren
#5
(11.11.2022, 21:50)admin schrieb: Ist das möglich, das mal Live zu testen?
Da jetzt irgendwelche Vermutungen abzugeben, bringt ja auch nichts, gerade wenn man den Code so nicht kennt.

Ja klar, gerne. Die aktuelle Seite ist im Moment ne riesige Baustelle, werde deshalb den größten Teil rausschmeißen und dann hier den Test-Link setzen.

Danke und bis dahin...
Zitieren
#6
Ich habe der Soundfunktion noch eine Abfrage hinzugefügt um zu verhindern, dass sich bei schnellen Mausbewegungen oder Klicks die audio-Ausgaben überlappen:

Code:
function Sound(s) {
    var audio = new Audio(s);
    if (tonalt > "") {            <!--alte Ausgabe stoppen, damit sich nichts überlagert-->
        tonalt.pause();
        tonalt.currentTime = 0;
    }else{

/*        hier müsste der Sound initialisiert werden (erste Tonausgabe)
Habe verschiedene Varianten Simulationsvarianten für Maus und Tastatur
probiert - ohne Erfolg    
*/
    }

      tonalt = audio;
    audio.volume = 0.5;
    audio.play();
}

Code:
        Sound(fass[fasspos+2]);


Die Seite ist immer noch Baustelle (und noch nicht im Netz verlinkt), aber ich habe ins rechte Textfeld eine Anleitung geschrieben wie der Effekt reproduziert werden kann. Der Funktion wird eine mp3-Datei (s) übergeben.
Statt auf das Fass zu gehen kann auch am Ziegenbock getestet werden
Link zum testen:
https://www.mosafilm.de/reni/variant/48K.html#
Zitieren
#7
Nur zur Vervollständigung:
Das geschilderte "Problem" konnte ich bisher nicht lösen, bleibe aber weiter daran interessiert (falls noch jemand eine Idee hat)...
Um mit meinem Novemberblatt weiterzukommen habe ich mich jetzt einer "Hilfskrücke" bedient. Der Besucher ist gezwungen auf einen Soundbutton oder Textlink zu klicken um überhaupt Sound zu erhalten. Damit habe ich dann auch meinen notwendigen ersten Klick für das erste MouseOver...
https://www.mosafilm.de/reni/variant/48K.html#
Zitieren
#8
Mein Problem ist, das ich einfach nicht verstehe, was du davor hast. Ich habe der Ziege auf den Arsch geklickt , aber da passiert nichts. Des Weiteren verstehe ich auch nicht, was du mit mousmove vorhast. Eins ist auf jede fall wichtig. Ohne User Eingabe wird kein Sound abgespielt. Da muss eigentlich eine Mausbewegung reichen , das muss kein klick sein.
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren
#9
(29.11.2022, 00:51)admin schrieb: Mein Problem ist, das ich einfach nicht verstehe, was du davor hast. Ich habe der Ziege auf den Arsch geklickt , aber da passiert nichts. Des Weiteren verstehe ich auch nicht, was du mit mousmove vorhast. Eins ist auf jede fall wichtig. Ohne User Eingabe wird kein Sound abgespielt. Da muss eigentlich eine Mausbewegung reichen , das muss kein klick sein.

Vor 2 Tagen habe ich die Seite erneuert, wodurch du das Problem jetzt nicht mehr direkt sehen kannst. Es ist mit einem Trick umgangen, dass nun zunächst einmal ein Klick auf den roten Soundbutton (oder den Textlink rechts) ausgeführt werden muss bevor überhaupt etwas zu hören ist. Danach kommt Sound bei mousover + klick bei:
- der Ziege (Enttarnung der Zauberin Circe)
- dem Faß (Wilhelm Busch)
- dem Kerl im Faß (Diogenes von Sinope)
- der Prinzessin (Exposé zu einem unrealisierten Comic aus dem Jahr 1960)

Aber eigentlich wollte ich keinen Soundstart-Button. Doch das Problem war, dass beim allerersten onMouseOver nach dem Seitenaufbau kein Ton kam, obgleich die Funktion Sound() abgearbeitet wurde. Man konnte zwar wahllos irgendwo in einen anderen Bereich klicken (oder eine unbedeutende Taste drücken) und würde somit das Problem gar nicht bemerken. Schwebte man aber zuerst mit der Maus über eines der 4 Objekte um dort zu klicken, hatte man den ersten Sound (von mouseover) verpasst.
Natürlich hätte man das so lassen können - es wird bei mouseover eh immer nur so etwas wie eine Kapitelüberschrift abgespielt. Aber ich verstehe einfach nicht warum diese erste Soundausgabe nur erfolgt wenn vorher mal geklickt oder eine Taste gedrückt wurde - und wenn das nun mal nicht zu ändern ist, dann wollte ich diese Aktion automatisch bei window.onload ausführen - aber mit den mir bekannten Simulationen hatte ich leider auch keinen Erfolg.

Deshalb jetzt der Soundschalter, der natürlich auch nützlich ist um den Programmablauf zu beeinflussen ...


Vergessen wir mal meine Anwendung, ich habe einen Test mit einem einfachen Botton zusammengestellt:
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sound-Test</title>
</head>

<script type="text/javascript">
var TestMP3 = "48K-Ziege.mp3";

    function Sound(s) {
        var audio = new Audio(s);
        audio.volume = 0.5;
        audio.play();
    }

</script>
<body>

<div id="demo">
<button type = "button" onmouseover="Sound(TestMP3)">Soundausgabe-Test</button>
</div>

</body>
</html>

Hier der Link zum testen

Beim mouseover über den button geschieht nichts. Erst wenn ich einen Mausklick (muss nicht auf den Button sein) oder eine Taste gedrückt habe reagiert in der Folge alles wie es soll.

Das ganze kann natürlich auch mit Berechtigungen in den Sicherheitseinstellungen der Browser zu tun haben. Bei Firefox ist die automatische Wiedergabe standardmäßig blockiert - ist sie für alle (oder die betreffende) Seite erlaubt, funktioniert es.
Dann leuchtet mir aber trotzdem nicht ein, warum durch eine zusammenhanglose Useraktion die Berechtigung für die gesamte Session erteilt ist. Aber es ist wohl so, auch die anderen Browser unterdrücken die automatische Wiedergabe:
Hier für Chome:
https://www.clickstorm.de/blog/chrome-autoplay-policy/
(Autoplay mit Sound ist erlaubt, wenn:
* der Nutzer bereits mit der Seite interagiert hat (klicken, tippen, etc.)
* der Nutzer bereits ein Video mit Ton abgespielt hat)

Damit dürfte ich die Erklärung wohl selbst gefunden haben. MouseOver scheint nicht als Interaktion im Sinne von klicken und tippen zu gelten. Und vermutlich kann man das tatsächlich nicht über Javascript umgehen...
Zitieren
#10
(27.11.2022, 12:07)ollelinse schrieb:
Damit dürfte ich die Erklärung wohl selbst gefunden haben. MouseOver scheint nicht als Interaktion im Sinne von klicken und tippen zu gelten. Und vermutlich kann man das tatsächlich nicht über Javascript umgehen...

Ok jetzt verstehe ich, ob Mouseover reicht als usersction das weiß ich gerade auch nicht, ich bin aber der meinung das es auch anders gehen muss als der klick.
Bin mir nicht ganz sicher , aber mache mich mal schlau und teste mal etwas herum.
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
2 Gast/Gäste