Ergebnis 1 bis 9 von 9
  1. #1
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.702

    HTML5 audio Tag

    Wieder ein bisschen was zu spielen.
    Folgender Code funktioniert schon im Firefox 28.
    Übrigens: mo, was hälst du von einem zusätzlichen Unterforum "Tutorials HTML5" oder wenigstens "Tutorials HTML"?

    Seltsam finde ich, dass ich im IE11 nichts höre, obwohl er es laut http://caniuse.com/#feat=audio unterstützen sollte.
    HTML-Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Test mit HTML5 audio Tag</title>
        <script type="text/javascript"> 
          var audio;
          audio = document.createElement("audio");
          if (audio != null && audio.canPlayType && 
          audio.canPlayType("audio/ogg")){
            audio.src = "http://upload.wikimedia.org/wikipedia/commons/7/74/Lully_Le_Bourgeois_Gentilhomme_-_01._Ouverture.ogg";
          }  
          else if (audio != null && audio.canPlayType && 
          audio.canPlayType("audio/mp3")){
            audio.src = "http://www.mp3-gema-frei.de/MP3/MLO-0008.mp3";
          }
          function pause() {
            audio.pause();
            return false;
          }
          function play() {
             audio.play();
            return false;
          }
          function addVolume() {
            audio.volume += 0.1;
          }
          function redVolume() {
            audio.volume -= 0.1;
          }
        </script>  
      </head>
      <body>
      <style type="text/css">
        html {
          background: white;
        } 
          body
        {
            margin: 30px auto;
            padding: 20px;  
            width: 40%;
            background: white;
            font-family: 'trebuchet MS', Arial, helvetica;
            -moz-border-radius: 10px;   
            border-radius: 10px;         
            -moz-box-shadow: 0 0 10px #555;    
            -webkit-box-shadow: 0 0 10px #555;
            box-shadow: 0 0 10px #555;
        }
        </style>
        <button onclick="pause()">Pause</button>
        <button onclick="play()">Play</button>
        <button onclick="addVolume()">Vol+</button>
        <button onclick="redVolume()">Vol-</button>
      </body>
    </html>

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: HTML5 audio Tag

    ogg kann der IE11 prinzipiell nicht abspielen und bei mp3 kann er nicht alle spielen. Das Beispiel von dir gehört nicht dazu.

    Ich würde in den *Volume Funktionen noch einen Überprüfung einbauen, dass der Wert nicht größer als 1 und kleiner als 0 wird. Sonst bekommst du nämlich eine Fehlermeldung.

    PS: Für was sind die "return false;" in play() und pause() gut?

  3. #3
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.702

    AW: HTML5 audio Tag

    Der Code ist abgetippt aus einer c't, ich glaube aus der letzten.

    Wieso spielt der IE das MP3 denn nicht ab? Oder tut er das bei dir?

  4. #4
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: HTML5 audio Tag

    Zitat Zitat von mikdoe Beitrag anzeigen
    Wieso spielt der IE das MP3 denn nicht ab? Oder tut er das bei dir?
    mit welchem header wird das file denn ausgeliefert? audio/mpeg?

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: HTML5 audio Tag

    Bei mir spielt der das auch nicht ab, aber wenn ich ein anderes mp3 nehme, dann funktioniert's.

    EDIT: @hesst: ja, als audio/mpeg.

  6. #6
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.702

    AW: HTML5 audio Tag

    Zitat Zitat von hesst Beitrag anzeigen
    mit welchem header wird das file denn ausgeliefert? audio/mpeg?
    Laut Firebug:
    Accept-Ranges bytes
    Content-Length 213556
    Content-Type audio/mpeg
    Date Thu, 24 Apr 2014 15:54:33 GMT
    Etag "603821e-34234-3863a3c1eab40"
    Last-Modified Fri, 08 Jun 2001 14:13:25 GMT
    Server Apache/2.2.26 (Unix)

  7. #7
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: HTML5 audio Tag

    dann sollte
    canPlayType("audio/mp3")
    doch
    canPlayType("audio/mpeg")
    heißen

  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: HTML5 audio Tag

    audio/mp3 gibt es eigentlich gar nicht: http://de.wikipedia.org/wiki/MP3

    Aber der IE gibt bei beiden "maybe" aus.

  9. #9
    SteelWheel ist offline Haudegen
    registriert
    18-07-2012
    Beiträge
    600

    AW: HTML5 audio Tag

    Hey ho zusammen,

    ich habe kürzlich selbst mit HTML5-Audio gebastelt und mich an einem Viertakt-Sample erfreut, welches allerdings als "loop" in keinem Browser "ohne Verzögerung" (@repeat) wollte. Die sind noch net soweit und daher ist das bei mir auf Eis.

    ABER ... Probleme hatte ich mit gar keinem Browser in puncto "Format" o. ä. - einziger Unterschied zu Miks Source: meine Dateien lagen auf dem eigenen Server. Nur für den Fall, dass es sich hierbei wieder um eine browserinterne Schutzgeschichte handelt (ähnlich SOP) oder die Datei gar nicht ausgeliefert werden kann (aufgrund Config beim Hoster; ähnlich "Bilder" [wo dann gern ein "dieses Bild siehst Du nur auf <URL>" steht]).

    Ansonsten ist alles gesagt (audio/mpeg etc.).

    Beste Grüße vom Kaffeewüstling

Ähnliche Themen

  1. Antworten: 4
    Letzter Beitrag: 07-03-2014, 02:29
  2. Antworten: 1
    Letzter Beitrag: 23-01-2014, 01:23
  3. HTML5 Audio-Element über Javascript ansteuern
    Von ullidrachenfels im Forum JavaScript
    Antworten: 21
    Letzter Beitrag: 23-10-2012, 01:42
  4. audio datei
    Von baum94 im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 12-02-2012, 13:08
  5. Audio aufnehmen
    Von soad im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 11-07-2006, 01:24

Lesezeichen

Berechtigungen

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