Ankündigung

Einklappen
Keine Ankündigung bisher.

Javascript code zum play von sound geht nicht

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Javascript code zum play von sound geht nicht

    Hey,

    ich möchte, wenn man auf ein Button klickt, dass ein Sound abgespielt wird.

    Mit PHP konnte ich es bereits umsetzen aber mit JS scheitere ich. Ich weiß nicht warum das nicht geht. Habe die Entwicklerwerkzeuge benutzt und in der console steht drin: Uncaught TypeError: Cannot read property 'addEventListener' of null

    Ich weiß nicht weiter. Habe schon gegoogelt aber dies hat mir nicht geholfen. Da ist doch alles richtig beim code ?

    HTML-Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Audio</title>
    
        <script>
    
            document.getElementById("tor").addEventListener("click", playTor);
    
            function playTor(){
                var audio = "<audio autoplay> <source src='tor.mp3' type='audio/mpeg'></audio>";
                document.getElementById("output").innerHTML = audio;
            }
    
        </script>
    </head>
    <body>
        <main>
            <form method="post">
                <button id="tor">Toooorrr!</button>
            </form>
            <div id="output"></div>
        </main>
    </body>
    </html>
    Conner
    Wenn jemand Hilfe bei einem Projekt braucht bin ich bereit kostenfrei mitzuhelfen, denn ich möchte mehr Erfahrung sammeln.

  • #2
    Hattest du das Problem nicht erst kürzlich gelöst?
    [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

    Kommentar


    • #3
      Warum erstellst du denn das Element <audio> erst bei click?
      Du kannst das Audio-Element fest im HTML lassen und nur die Funktionalität von play mit Javascript auslösen.

      Siehe auch
      https://msdn.microsoft.com/en-us/lib...(v=vs.85).aspx
      https://www.w3schools.com/tags/av_met_play.asp

      Kommentar


      • #4
        Es gibt keinen guten Grund den Sound in´s DOM zu pflanzen.

        Nur mal als Hinweis:

        Code:
        new Audio('tor.mp3').play();
        Sollte ich nicht im Tor stehen:
        Code:
        myTor = new Audio('tor.mp3');
        myTor.play();

        Kommentar


        • #5
          Hey,

          das Problem war nicht das window.onload = function(){}

          Aus unerklärlichen Gründen wurde die variable audio nicht ausgegeben. Habe es dann mit der Audio-Class umgesetzt. Ist viel einfacher.
          Vielen Dank
          Wenn jemand Hilfe bei einem Projekt braucht bin ich bereit kostenfrei mitzuhelfen, denn ich möchte mehr Erfahrung sammeln.

          Kommentar


          • #6
            Ich habe jetzt bissl getestet. Habe immernoch ein Problem. Ich möchte, dass die Audiodatei bei jeder Person die den liveticker offen hat abgespielt wird. Jedoch wird die Audiodatei nur bei mir abgespielt und auf einem anderen pc wenn er den liveticker auf hat nicht.

            Habe dazu in js noch nichts gefunden beim googeln was dies erreicht hat. Habt ihr ne Idee`?
            Wenn jemand Hilfe bei einem Projekt braucht bin ich bereit kostenfrei mitzuhelfen, denn ich möchte mehr Erfahrung sammeln.

            Kommentar


            • #7
              Wie ich es mir vorgestellt habe:

              Ein Admin hat eine Seite mit Buttons und Formular. Wenn der Admin ein Button, nun z.b. Tor, klickt soll bei jeder Person die diesen liveticker geöffnet hat die
              Audio abgespielt werden.

              Im Moment wird diese aber nur bei dem abgespielt der auf den Button klickt.

              Muss man da dann doch den Audio Tag aus html verwenden ?
              Wenn jemand Hilfe bei einem Projekt braucht bin ich bereit kostenfrei mitzuhelfen, denn ich möchte mehr Erfahrung sammeln.

              Kommentar


              • #8
                Das geht in den Bereich Streaming...
                Competence-Center -> Enjoy the Informatrix
                PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                Kommentar


                • #9
                  Nö, mit Streaming hat das wohl nichts zu tun...

                  Nutzt er Websockets oder ist der Live Ticker ein PseudoLiveTicker? Kurz, wir haben eine Frage, etwas HTML Code, etwas Javascript und wissen jetzt, dass er einen Liveticker programmiert. Ohne weitere Info´s wie das implementiert wurde kann man keine seriösen Antworten liefern. Das ist die typische Gurkerei mit unvollständigen Fragestellungen.

                  Kommentar


                  • #10
                    Das ist die typische Gurkerei mit unvollständigen Fragestellungen.
                    Finde ich nicht. Ich stelle doch konkrete Fragestellungen.

                    Ich habe eine HTML-Datei in der alles bis jetzt steht. So sieht diese aus:

                    HTML-Code:
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta charset="utf-8">
                        <title>Liveticker</title>
                    
                        <script>
                        window.onload = function(){
                    
                            //Spielt Tor Sound ab bei klick auf Tor Button
                            document.getElementById("tor").addEventListener("click", playTor);
                    
                            function playTor(){
                                myTor = new Audio('tor.mp3');
                                myTor.play();
                            }
                        }
                    
                        </script>
                    </head>
                    <body>    
                        <head>Liveticker</head>
                        <main>
                            <!-- Live Ticker -->
                            <section>
                                <div>
                                    <h4>Dortmund</h4>
                                    <img src="bilder/dortmund.jpg">
                                </div>
                                <div>
                                    <p><span id="heimteam">0</span><span>:</span><span id="auswaertsteam">0</span></p>
                                </div>
                                <div>
                                    <h4>Bayern</h4>
                                    <img src="bilder/bayern.jpg">
                                </div>
                            </section>
                            <section>
                                <article>
                                    <p>Reus geht aufs Tor zu und schießt. Aber verfehlt das Tor doch um 3 Meter</p>
                                </article>
                                <article>
                                    <p>Mario Götze ist auf und davon und trifft zum verdienten 3:0</p>
                                </article>
                            </section>
                            <!-- Admin Formular -->
                            <form>
                                <textarea id="spielbeschreibung"></textarea>
                                <button id="sb_senden">Senden...</button>
                            </form>
                            <!-- Admin Actions (Toraudio,...) -->
                            <button id="tor">Tor</button>
                        </main>
                    </body>
                    </html>
                    Wenn jemand Hilfe bei einem Projekt braucht bin ich bereit kostenfrei mitzuhelfen, denn ich möchte mehr Erfahrung sammeln.

                    Kommentar


                    • #11
                      Zitat von Conner Beitrag anzeigen
                      Finde ich nicht. Ich stelle doch konkrete Fragestellungen.

                      Ich habe eine HTML-Datei in der alles bis jetzt steht. So sieht diese aus:
                      Und wie werden die Daten vom live-ticker geholt? Da muss doch noch jede Menge fehlen...

                      Kommentar


                      • #12
                        Ich habe es so vor:

                        Es gibt ein Admin/Spiel-Kommentator. Nun hat der diese html seite vor sich mit allen funktionen (tor, anpfiff, abpfiff, auswechslung,...). Diese sieht nur er. Dazu hat er noch ein Formular mit einer Textarea. Dort wird dann der Spielverlauf eingegeben und dann auf den button geklickt. Dann wird dies, was abgesendet wurde, mittels ajax an eine php seite gesendet, dort weiterverarbeitet und dann in dem section als article ausgegeben.

                        Bis jetzt habe ich aber nur den Tor-Sound Button. Dies mit Formularauswertung und -verarbeitung muss ich noch machen. Und diese zwei Sätze sind einfach simmulierte Daten. Mir gehts nun nur darum, wie es geht, dass wenn der Admin auf einen Button klickt der eine audio-datei dann abspielt, dass jede Person, welche diese seite offen hat, auch diese audio hört.

                        Aber der momentane Stand ist dieser, dass nur der Admin dies hört sonst niemand der auf der selben seite ist
                        Wenn jemand Hilfe bei einem Projekt braucht bin ich bereit kostenfrei mitzuhelfen, denn ich möchte mehr Erfahrung sammeln.

                        Kommentar


                        • #13
                          Dazu müssen die Personen, die die Seite geöffnet haben ja auch permanent diese Informationen erhalten.D.h. Admin drückt auf Tor, sendet per Ajax ein Signal, dass Tor gedrückt wurde. PHP bereitet das auf und die Clients müssen diese Information abrufen.

                          Du wirst also nicht daran vorbeikommen Dich mit Node zu beschäftigen oder etwas fertiges zu nutzen. Google mal nach Pusher.com...

                          Kommentar


                          • #14
                            Ja genau. Ach ich sende ja keine Informationen. Habe ich nicht mitbedacht. Schaue es mir mal an. Warum unbedingt Node.js ?

                            Naja mit Pusher.com komm ich nicht klar.





                            Wenn jemand Hilfe bei einem Projekt braucht bin ich bereit kostenfrei mitzuhelfen, denn ich möchte mehr Erfahrung sammeln.

                            Kommentar

                            Lädt...
                            X