Anton Jakob: Webseite mit Audiofunktion

Hallo,

ich möchte eine Webseite für einen Hörbuchsprecher erstellen. Die Webseite sollte neben Bildern und Texten einige audio Sprechproben beinhalten. Da ich mit HTMl bisher noch nicht gearbeitet hatte und die Einarbeitung einiges an Zeit kosten würde, wollte ich wissen, ob es "Homepage Baukasten", eine vereinfachte Möglichkeit Webseiten zu erstellen, gibt, mit denen ich audio Dateien in meine Webseite einbauen kann. Oder geht dies wirklich nur per Html? Wer einen solchen Homepage Baukasten kennt, gerne nennen.

Tausend Dank für Tipps und beste Grüße,
Anton

  1. @@Anton Jakob

    … ob es "Homepage Baukasten", eine vereinfachte Möglichkeit Webseiten zu erstellen, gibt, mit denen ich audio Dateien in meine Webseite einbauen kann. Oder geht dies wirklich nur per Html?

    Es geht mit HTML – einfacher geht’s nicht. Einfach nur das audio-Element einsetzen – fertig.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Hi Gunnar,

      Einfach nur das audio-Element einsetzen – fertig.

      Mache ich auch so. Aber:

      Die Webseite sollte .. einige audio Sprechproben beinhalten.

      HTML lässt zu, dass ein Audio gestartet wird, während das vorherige weiterläuft. Gibt es da einen fertigen Code-Schnippsel Javascript, der eine laufende Hörprobe beendet, wenn eine andere gestartet wird?

      Habe ich schon mal irgendwo gehört.

      Linuchs

      1. Hallo Linuchs,

        Gibt es da einen fertigen Code-Schnippsel Javascript, der eine laufende Hörprobe beendet, wenn eine andere gestartet wird?

        http://codekicker.de/fragen/HTML5-Audio-Player-stoppen-naechster-startet so als Ausgangsbasis.

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
        1. Hallo Matthias Apsel,

          Das im Artikel vorgeschlagene pausieren aller Player funktioniert in dieser Variante nicht, weil dadurch das play-Event jedesmal neu ausgelöst würde.

          var players = document.getElementsByTagName("audio");
          
          function play(ev) {
              for (var i = 0; i < players.length; i++) { 
                  players[i] == ev.target ? players[i].play() : players[i].pause();
              }
          }
            
          for (var i = 0; i < players.length; i++) {
              players[i].addEventListener("play",play);
          } 
          

          Es ist nicht möglich, ein play-Event für ein übergeordnetes Element zu registrieren und auf das hochgeblubberte Event zu warten, weil es zum Beispiel für eine Liste kein play-Event gibt.

          Bis demnächst
          Matthias

          --
          Rosen sind rot.
          1. Hallo Matthias

            Es ist nicht möglich, ein play-Event für ein übergeordnetes Element zu registrieren und auf das hochgeblubberte Event zu warten, weil es zum Beispiel für eine Liste kein play-Event gibt.

            const players = Array.from(document.getElementsByTagName('audio'));
            
            document.body.addEventListener('play', event => players.forEach(
              element => element !== event.target && element.pause()
            ), true);
            

            Nur weil ein Event nicht über eine Bubbling-Phase verfügt heißt das nicht, dass man es nicht an ein übergeordnetes Element delegieren kann. In diesem Fall muss man den Eventhandler eben für die Capturing-Phase registrieren.

            Gruß,

            Orlok

  2. Hej Anton,

    Gunnar hat recht: <audio></audio> zu schreiben ist wirklich keine Herausforderung - fehlt eigentlich nur noch die Quellenangabe und die Datei selber.

    Mit Homepage-Baukästen kenne ich mich nicht aus. Einen zu finden, der das kann würde auch schon viel länger dauern, als es schnell selber in die Webseite zu schreiben - hast du schon einen Editor? Zur Not für so eine kleine Sache kannst du den Notepad/Editor von Windows nehmen, etwas komfortabler ist der kostenlose Notepad++. Aber auch richtig gute Editoren wie Brackets oder Eclipse (nicht unbedingt für Anfänger) sind umsonst.

    Wenn du mehr Hilfe benötigst, melde Dich wieder - Fragen bitte möglichst konkret, am besten mit Code-Beispiel stellen.

    Marc