2013-06-07 10 views
13

Ich erstelle meine eigenen Audio, ohne Steuerung des Browsers.html5 audio livestreaming

<audio src="http://50.7.98.194:8081/~dl3/cgi-bin/dl.cgi/bqmu5mltxcqy43mxecgo4gnw743qr7fd7io22q5xj4/gl1mwvp6b326.mp3" id="audio"> 
</audio> 

Ich habe diese Funktionen aufgerufen, wenn einige Tasten angeklickt:

function play() 
{ 
    audio.play(); 
} 

function play() 
{ 
    audio.pause 
} 

function stop() 
{ 
    audio.pause(); 
    audio.src = audio.src; 
} 

Aber jetzt habe ich nur mp3 oder ogg-Dateien wiedergeben kann, aber kein Live-Stream Radio. Ich lese über einige Plugins, aber ich muss es mit reinem HTML5 tun.

Können Sie mir bitte helfen? Vielen Dank,

Antwort

12

Leider gibt es immer noch keinen einzigen Video- und Audiocodec, der von allen Browsern unterstützt wird! Die Programmierer müssen sicherstellen, dass ein Fallback für Anwendungsfälle bereitgestellt wird, in denen Browser A Codec B nicht unterstützt und umgekehrt.

Sie können diese Kompatibilitätstabelle sowohl für Desktop- als auch für mobile Browser anzeigen.

Desktop:

  • Internet Explorer (9.0+) Unterstützung MP3 und AAC-Codecs
  • Chrome (6.0+) unterstützen Ogg Vorbis, MP3, WAV +
  • Firefox (3.6 oder höher) unterstützen Ogg Vorbis, WAV
  • Safari (ab Version 5.0) Unterstützung MP3, AAC, WAV
  • Opera (10.0+) unterstützen Ogg Vorbis, WAV

Mobil:

  • Opera Mobile (ab Version 11.0) unterstützten Codecs sind geräteabhängig
  • Android (2.3 und höher) unterstützten Codecs
  • Mobile Safari (iDevices mit iOS 3.0 geräteabhängig sind +) Unterstützung MP3, AAC
  • Blackberry (6.0+) Unterstützung MP3, AAC

Da Flash-stil ist Ich bin weit genug verbreitet, es ist wahrscheinlich der sicherste Fallback.

Auch ich möchte darauf hinweisen, dass es nichts Schlimmeres gibt, einige Bibliothek zu verwenden, einige von ihnen (z. B. jPlayer) bietet sehr leistungsfähige Schnittstelle, und dies kann Ihnen nur helfen, besseren Code zu produzieren!

Ich glaube, Sie alles, was Sie in dem folgenden Artikel wissen möchten, finden Sie unter: HTML5 Audio Radio Player by Opera Devs

+0

Hallo, danke für deine Antwort. Es scheint ein Problem mit meinem url Radio, das ich nicht hören kann ... Ich habe versucht mit diesem Radio http://listen.radionomy.com/abc-jazz und ich höre es gut !! Was kann sein? Vielleicht ein Problem mit Ports? –

+0

Der Codec des Audios, den ich erhalte, ist aacp –

+0

Ich denke, deshalb wird es nicht beginnen, können Sie versuchen, mit einer anderen Quelle (z. B. MP3/Ogg Streaming)? – vitozev

11

Abspielen von Audio von einer „Live-Quelle“ scheint von modernen Browsern unterstützt werden. Grundsätzlich verwenden Sie einfach die normalen HTML 5 Audio-Tags, und geben Sie die „Live-Stream“ URL als Quelle, zB:

<audio controls> 
    <source src="http://audio-mp3.ibiblio.org:8000/wcpe.mp3" type="audio/mpeg"> 
    <source src="http://audio-ogg.ibiblio.org:8000/wcpe.ogg" type="audio/ogg"> 
</audio> 

Und den Strom „einfach funktioniert“, wie es wäre, wenn Sie versuchen, mit den Standardsteuerungen zu suchen tut nichts. Möglicherweise möchten Sie die Steuerelemente im normalen HTML 5-Medienstil durch "benutzerdefinierte" ersetzen.Für die Rückwärtskompatibilität zu anderen Browsern als HTML 5 könnte dieses Projekt nützlich sein: https://github.com/etianen/html5media/wiki/Embedding-audio (habe es nicht mit Live-Streaming getestet, könnte/sollte funktionieren). Mp3-Codec scheint in den meisten Browsern unterstützt zu werden (abgesehen von Firefox auf Linux [?]). Opus könnte auch eine andere plattformübergreifende Option sein, ich bin nicht sicher, was Codec ist, was die "beste" Wahl ist.

Bei einigen Streams (Shoutcast vermute ich) musste ich ein Schließen ';' an die URL, siehe https://stackoverflow.com/a/3182814/32453 für Hinweise dort, aber das ist im Grunde nur um die "richtige" URL zu bekommen.

+0

Pro meiner Tests, ab heute (2017-03-05), Firefox, Edge kann beginnen, Live-Audio-Stream ziemlich schnell zu spielen (mit Verzögerung von 1 bis 3 Sekunden), und die Verzögerung für Opera ist etwa 10 Sekunden. Tests werden mit "audio/wav" durchgeführt. – Hong