Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 22
  1. #1
    ullidrachenfels ist offline Jungspund
    registriert
    08-10-2012
    Beiträge
    17

    HTML5 Audio-Element über Javascript ansteuern

    Für ein privates Projekt habe ich einen Chat auf PHP-Basis. In diesem Chat möchte ich gerne Audioereignisse einbauen. Um das ganze möglichst ohne Plugin wie z.B. Flash zu realisieren, bin ich auf das HTML5 Audio-Element gekommen. Das funktioniert für warscheinlich mehr als 90% aller User und benötigt kein Plugin.
    Leider kann ich zwar einigermaßen PHP, aber Javascript überhaupt nicht. Daher hier meine Frage:
    Ich will z.B. die Ankunft eines neuen Users im Chat mit einem Ton versehen.
    Das sieht dann z.B. so aus: (15:07:03) James: Tekener hat den Raum betreten. - Hallo Tekener ! ;-)
    Programmiertechnisch so:
    Code:
    if ($hi)
    	$messages_to_show[] = array(MESG_TIME=>my_time(), 
    								MESG_ROOM=>$room_id,  
    								MESG_FROM=>$w_rob_name, 
    								MESG_FROMWOTAGS=>$w_rob_name,
    								MESG_FROMSESSION=>"",
    								MESG_FROMID=>0,
    								MESG_FROMAVATAR=>"",
    								MESG_TO=>"", 
    								MESG_TOSESSION=>"",
    								MESG_TOID=>"",
    								MESG_BODY=>"<font color=\"#dadada\">".str_replace("~", $user_name, $sw_rob_login)."</font>");
    Jetzt könnte ich natürlich ein Audioelement in der Form in der letzten Zeile einfügen:
    Code:
    <audio autoplay=autoplay><source src=\"sounds/enterroom.mp3\"/><source src=\"sounds/enterroom.ogg\"/></audio>
    Das funktioniert zwar, ist aber nicht sinnvoll, da der Chat mittels PHP-Stream arbeitet. Wann immer etwas geschrieben wird, wird der Audioplayer ja wieder aufgerufen.
    Meine Idee war daher, den Player einmalig fest in die Seite einzubauen und das jeweilige Soundevent dann via Javascript an den Player zu übergeben. Dadurch ist gewährleistet, das der Sound nur einmal abgespielt wird und ich kann verschiedene Soundevents definieren.
    Also z.B. verlässt den Raum, private Message etc.
    Wie gesagt, habe ich von Javascript nicht den blassesten Schimmer, daher wäre es schön, wenn da einer eine Idee für mich hätte und mir behilflich sein kann.

    Gruß,

    Ulli

  2. #2
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: HTML5 Audio-Element über Javascript ansteuern

    Vielleicht hilft ja folgendes weiter: Audio-Player mit HTML5
    Hoffe ich konnte helfen

  3. #3
    ullidrachenfels ist offline Jungspund
    registriert
    08-10-2012
    Beiträge
    17

    AW: HTML5 Audio-Element über Javascript ansteuern

    Nein, leider nicht. Das ist ein ganz normaler Player, der via klick bzw. onload gestartet wird. Beide Verfahren kommen bei mir ja nicht in Frage. Der Klick, weil nicht vorhanden und der onload nicht, da ja sonst bei jedem reload der Player neu abgespielt werden würde.
    Wie gesagt, es handelt sich dabei um das Textfenster des Chats!

    Gruß,

    Ulli

  4. #4
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: HTML5 Audio-Element über Javascript ansteuern

    Zitat Zitat von ullidrachenfels Beitrag anzeigen
    Das ist ein ganz normaler Player, der via klick bzw. onload gestartet wird.
    So wie in deinem Beispiel gezeigt.

    Zitat Zitat von ullidrachenfels Beitrag anzeigen
    Beide Verfahren kommen bei mir ja nicht in Frage. Der Klick, weil nicht vorhanden und der onload nicht, da ja sonst bei jedem reload der Player neu abgespielt werden würde.
    Der Player in meinem Beispiel reagiert auf 2 Ereignisse, onload und onclick, ja.

    Zitat Zitat von ullidrachenfels Beitrag anzeigen
    Wie gesagt, es handelt sich dabei um das Textfenster des Chats!
    ...welches ein Ereignis generiert, wenn z.B. ein neuer Chatter den Raum betritt. Nennen wir es mal joinIn. Und wenn nun joinIn ausgelöst wird, dann startet eben dieses Ereignis den Player.

    Oder meinst du etwas anderes? Wenn ja, dann musst du dich genauer ausdrücken und mehr erklären was du machen möchtest.
    Hoffe ich konnte helfen

  5. #5
    ullidrachenfels ist offline Jungspund
    registriert
    08-10-2012
    Beiträge
    17

    AW: HTML5 Audio-Element über Javascript ansteuern

    ...welches ein Ereignis generiert, wenn z.B. ein neuer Chatter den Raum betritt. Nennen wir es mal joinIn. Und wenn nun joinIn ausgelöst wird, dann startet eben dieses Ereignis den Player.
    Das ist exakt richtig.
    Was ich jetzt halt nicht weiß, ist wie ich das Ereignis joinIn dem player mitteile. Der oben genannte Code generiert ja in der letzten Zeile die HTML-Ausgabe. Die Seite die die Ausgabe generiert ist eine reine PHP-Seite.
    Ich habe jetzt erstmal den Header der Seite der nicht dynamisch erstellt wird um folgendes erweitert:
    Mit Header ist hier nicht der HTML-Header gemeint, sondern die ersten Zeilen nach "Body".
    Code:
    <audio id="enterroom" src="sounds/enterroom.mp3" src="sounds/enterroom.ogg"></audio>
    Was mir jetzt fehlt ist, wie ich dem Player die id="enterroom" mitteile.

    Gruß,

    Ulli

  6. #6
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: HTML5 Audio-Element über Javascript ansteuern

    Zitat Zitat von ullidrachenfels Beitrag anzeigen
    Was ich jetzt halt nicht weiß, ist wie ich das Ereignis joinIn dem player mitteile.
    Genauso wie bei [(15:07:03) James: Tekener hat den Raum betreten. - Hallo Tekener ! ;-)]

    Zitat Zitat von ullidrachenfels Beitrag anzeigen
    Code:
    <audio id="enterroom" src="sounds/enterroom.mp3" src="sounds/enterroom.ogg"></audio>
    Was mir jetzt fehlt ist, wie ich dem Player die id="enterroom" mitteile.
    Diese Fragestellung verstehe ich jetzt nicht...hä?
    Hoffe ich konnte helfen

  7. #7
    ullidrachenfels ist offline Jungspund
    registriert
    08-10-2012
    Beiträge
    17

    AW: HTML5 Audio-Element über Javascript ansteuern

    Okay, die Ausgabeseite des Chats wird durch mehrere Komponenten generiert.
    Eine davon ist die Header.html
    In ihr befindet sich der Player. Der Player wurde mit einer id versehen, was mich in die Lage versetzen soll, verschiedene Sounds für verschiedene Events abzuspielen.
    Dann habe ich eine Seite, die via PHP den dynamischen Teil generiert. Das ist die voc.php
    Das Event um das es geht ist dieses:
    Code:
    if ($hi)
    	$messages_to_show[] = array(MESG_TIME=>my_time(), 
    								MESG_ROOM=>$room_id,  
    								MESG_FROM=>$w_rob_name, 
    								MESG_FROMWOTAGS=>$w_rob_name,
    								MESG_FROMSESSION=>"",
    								MESG_FROMID=>0,
    								MESG_FROMAVATAR=>"",
    								MESG_TO=>"", 
    								MESG_TOSESSION=>"",
    								MESG_TOID=>"",
    								MESG_BODY=>"<font color=\"#dadada\">".str_replace("~", $user_name, $sw_rob_login)."</font>");
    Das ganze zusammengesetzt ergibt:
    Code:
    (21:35:57) James: Tekener hat den Raum betreten. - Hallo Tekener ! ;-)
    Bzw. als Quelltext:

    Code:
    <span class="love"><br>Willkommen im Asyl</span><hr color="#dadada">
    <audio id="enterroom" src="sounds/enterroom.mp3"></audio>
    
    <small>(20:54:10)</small> <b>James</b>: <font color="#dadada"><b>Tekener</b> hat den Raum betreten. - Hallo <b>Tekener</b> ! ;-)</font><script type="text/javascript"><br><script>up()</script>
    <small>(20:54:24)</small> <b>James</b>: <font color="#dadada"><b>Tekener</b> hat sich ausgeloggt.</font><br><script>up()</script>
    <small>(20:54:26)</small> <b>James</b>: <font color="#dadada"><b>Tekener</b> hat den Raum betreten. - Hallo <b>Tekener</b> ! ;-)</font><script type="text/javascript"><br><script>up()</script>
    <small>(20:55:47)</small> <b>James</b>: <font color="#dadada"><b>Tekener</b> hat sich ausgeloggt.</font><br><script>up()</script>
    <small>(20:55:48)</small> <b>James</b>: <font color="#dadada"><b>Tekener</b> hat den Raum betreten. - Hallo <b>Tekener</b> ! ;-)</font>;<br><script>up()</script>
    <small>(20:55:50)</small> <b>James</b>: <font color="#dadada"><b>Tekener</b> hat sich ausgeloggt.</font><br><script>up()</script>
    <small>(20:55:52)</small> <b>James</b>: <font color="#dadada"><b>Tekener</b> hat den Raum betreten. - Hallo <b>Tekener</b> ! ;-)</font>;<br><script>up()</script>
    <small>(21:35:35)</small> <b><font color="gray">Tekener</font></b>: <font color="gray">Test</font><br><script>up()</script>
    <small>(21:35:55)</small> <b>James</b>: <font color="#dadada"><b>Tekener</b> hat sich ausgeloggt.</font><br><script>up()</script>
    <small>(21:35:57)</small> <b>James</b>: <font color="#dadada"><b>Tekener</b> hat den Raum betreten. - Hallo <b>Tekener</b> ! ;-)</font><br><script>up()</script>
    <small>(21:36:04)</small> <b><font color="gray">Tekener</font></b>: <font color="gray">test</font><br><script>up()</script>
    Die Frage ist also, wie teile ich dem Player jetzt mit, das das Event "enterroom" stattgefunden hat. Am sinnvollsten wäre es, das über die voc.php zu machen in dem oben angegebenen Code. Ich habe aber keine Ahnung, wie ich das mache. Die voc.php ist eine reine PHP-Seite und ich hab keine Ahnung, wie ich da Javascript einbaue. Und das ganze in die HTML-Ausgabe zu basteln, würde ja dazu führen, das bei jedem Reload wieder der Ton abgespielt wird.
    Meine Vorstellung war, in die PHP-Bedingung "if ($hi)" etwas einzubauen, das unabhängig von der HTML-Ausgabe dem Player die ID mitteilt.
    Ob das allerdings geht, weiß ich nicht.

    Gruß,

    Ulli

  8. #8
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: HTML5 Audio-Element über Javascript ansteuern

    Du hast doch schon einen Aufruf in deinem Code:
    Code:
    <script>up()</script>
    Was macht denn dieser? Kannste doch mit dem Playeraufruf kombinieren!?
    Hoffe ich konnte helfen

  9. #9
    ullidrachenfels ist offline Jungspund
    registriert
    08-10-2012
    Beiträge
    17

    AW: HTML5 Audio-Element über Javascript ansteuern

    Das ist eine gute Frage. Leider hab ich keine Ahnung wofür der ist. Der Chat ist nicht von mir. Der Chat hat verschiedene Engines. Eine davon ist PHP-Stream, eine andere ist ein Javascriptstream. Ich vermute, das es für den Javascript-Stream ist.
    Code:
    <script>up()</script>
    Das wird an jede Textzeile angehängt, ist daher für meine Zwecke nicht brauchbar.

    Gruß,

    Ulli

  10. #10
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: HTML5 Audio-Element über Javascript ansteuern

    Du benutzt also irgendein PHP und JavaScript, wo du nicht weis was wo passiert, was welcher Code/Befehl macht, der nicht von dir ist und du uns keinen Namen bzw. keine Quelle angibst, geschweigedenn eine Testseite anbietest und lässt gleichzeitig nen kleinen Schlauberger heraushängen für den wir die Lösung finden sollen?

    Hab ich das soweit korrekt verstanden?
    Hoffe ich konnte helfen

  11. #11
    Avatar von scrypter
    scrypter ist offline Haudegen
    registriert
    25-06-2011
    Beiträge
    706

    AW: HTML5 Audio-Element über Javascript ansteuern

    das scheint doch so zu sein, das per ajax über das php-script der Inhalt des chats in ein Element geladen wird und per
    Code:
    <script>up()</script>
    das Element bzw. dessen Inhalt hoch gescrollt wird

    wenn Du also im statischen Teil die audio-Elemente
    HTML-Code:
    <audio id="enterroom" preload="auto" autobuffer>
        <source src="sounds/enterroom.ogg">
        <source src="sounds/enterroom.mp3">
    </audio>
    <audio id="leaveroom" preload="auto" autobuffer>
        <source src="sounds/leaveroom.ogg">
        <source src="sounds/leaveroom.mp3">
    </audio>
    platzierst, ist es doch easy die zu triggern
    Code:
    <script>up();document.getElementById('enterroom').play();</script>
    Du musst halt nur im php-script entscheiden, wann der Aufruf der sounds eingefügt werden soll, da ja nicht jedesmal irgendwas abgespielt werden soll
    das sollte ja möglich sein, da ja das Eintreten und Verlassen anders sind als normale messages
    fatal error: EBKAC (error between keybord and chair)

  12. #12
    ullidrachenfels ist offline Jungspund
    registriert
    08-10-2012
    Beiträge
    17

    AW: HTML5 Audio-Element über Javascript ansteuern

    Nö, eigentlich nicht. Und ich sehe auch keinen Grund, so unhöflich zu werden.
    Der Chat ist hier zu finden: Chat
    Das Script vom Autor gibt es hier: http://http://vochat.com/
    Eventuell erforderliche Zugangsdaten wie FTP gibt es nur per PM.
    Der Chat ist sehr komplex, allerdings wird er seit 2006 nicht mehr gepflegt. Eine Kontaktaufnahme mit dem Autor ist fehlgeschlagen.
    Es stimmt, das ich noch vieles in dem Chat nicht unbedingt verstehe.
    Und ja, wenn ich einen Lösungsansatz oder eine Lösung hier bekommen würde, wäre das sehr hilfreich.
    Deswegen muss ich jetzt aber nicht zu Kreuze kriechen und den Schlauberger hab ich auch nicht raushängen lassen.

    Gruß,

    Ulli

  13. #13
    Avatar von scrypter
    scrypter ist offline Haudegen
    registriert
    25-06-2011
    Beiträge
    706

    AW: HTML5 Audio-Element über Javascript ansteuern

    Testuser login-Daten gibts auch dazu? den kannste ja später wieder löschen
    mit der Anmeldeseite kann man Dir nicht wirklich weiterhelfen

    edit: ah habs rausgefunden, es gibt ja bereits tester
    Geändert von scrypter (08-10-2012 um 23:35 Uhr)
    fatal error: EBKAC (error between keybord and chair)

  14. #14
    ullidrachenfels ist offline Jungspund
    registriert
    08-10-2012
    Beiträge
    17

    AW: HTML5 Audio-Element über Javascript ansteuern

    User: Tester
    PW: tester

  15. #15
    ullidrachenfels ist offline Jungspund
    registriert
    08-10-2012
    Beiträge
    17

    AW: HTML5 Audio-Element über Javascript ansteuern

    Problem ist mit freundlicher Unterstützung von Scrypter gelöst!
    Vielen Dank dafür!!!

    Gruß,

    Ulli

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Antworten: 3
    Letzter Beitrag: 02-11-2011, 15:29
  2. HTML5 Canvas Element und onclick
    Von AndreM im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 08-08-2011, 23:30
  3. Javascript über Link ansteuern
    Von eky79 im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 07-04-2011, 15:52
  4. Antworten: 0
    Letzter Beitrag: 26-02-2009, 17:52
  5. Antworten: 1
    Letzter Beitrag: 14-09-2008, 02:36

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •