web-dev-qa-db-fra.com

Comment puis-je lire un flux shoutcast/icecast avec HTML5?

Est-il possible de lire un flux shoutcast/icecast en utilisant HTML5?

Si oui, comment devrais-je le mettre en œuvre?

html5streamingaudio-streamingshoutcasticecast
25
Cy.

Ajoutez un point-virgule à la fin de la requête http. Il IS utilise le protocole défini par shoutcast pour annuler la détection de son navigateur. Comme ça:

<audio controls src="http://shoutcast.internet-radio.org.uk:10272/;"></audio>
47
Nate Sweet

Il y a un gros problème avec SHOUTcast, qui, je suppose, est responsable de son inefficacité, même dans Chrome qui est supposé prendre en charge le format MP3.

SHOUTcast peut servir trois types de réponse différents:

  • une réponse audio en continu avec le protocole SHOUTcast «ICY» natif. Il décide de le faire si le joueur accédant au flux inclut un en-tête icy-metadata: 1.

  • une réponse audio en streaming HTTP simple, sans métadonnées supplémentaires, pour les lecteurs multimédias sans support ICY.

  • le “SHOUTcast D.N.A.S. Status ”et d'autres pages de l'interface Web.

Comment décide-t-il s'il convient de servir une page Web au lieu d'un flux audio? Il devine si vous utilisez un navigateur Web. En cherchant à voir si l'en-tête User-Agent commence par Mozilla/.... Parce que tous les navigateurs Web sont Mozilla, non? Bon Dieu, SHOUTcast.

Ainsi, lorsque Chrome tente de récupérer le flux audio à lire, SHOUTcast pense que c'est un navigateur Web (enfin ... c'est le cas) et refuse de lui donner le flux audio à insérer dans la balise audio. Au lieu de cela, il obtient la page Web d'administration.

(Je suppose que Safari passe l'en-tête icy-metadata pour éviter le problème et dispose d'un support spécifique pour SHOUTcast. Je ne peux pas le tester pour le moment, Safari ne lira pas d'audio ou de vidéo. Peut-être qu'il voudra que j'installe QuickTime pour cela. Peut-être qu'il peut aller se faire bourrer.)

Vous devrez donc probablement ajouter un lecteur audio Flash comme solution de secours.

18
bobince
<audio src="http://85.25.108.20:8090/;" controls autoplay></audio>

Cela devrait fonctionner correctement, mais assurez-vous que /; est présent après l'URL et le port du flux. Si vous n'avez pas besoin de lecture automatique, supprimez la balise "autoplay" .

4
Ruwan Harshana Peiris

Oui. Mais son seul travail dans Safari

    <!DOCTYPE html>
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/"></audio>

Cause Opera et Firefox ne supportaient pas les codecs non libres.

3
classless

voir ici: Est-il possible de lire des flux de radio Internet shoutcast avec html5?

3
Werewolve

En cas de problèmes de redirection avec la balise <audio> dans les navigateurs, essayez d’ajouter "/ stream" à la fin de l’URL du flux pour empêcher la redirection.

exemple:

ne fonctionne pas: http://live-radio01.xxxxxx.com/2TJW/mp3

travail: http://live-radio01.xxxxxx.com/2TJW/mp3/stream

0
DanielBLN

J'utilise Icecast avec Easystream pour la diffusion sur Mac et PC. Un script Configure le lecteur audio appelé MP3 Sticky Player. swf Avec les fichiers d’aide à la documentation, le lecteur se charge comme indiqué ci-dessous dans les deux cas.

PC

<ul id="playlist" style="display:none;">
        <li data-path="http://99.250.117.109:8000/stream" data-thumbpath="thumbnail of whatever" data-downloadable="no" data-duration="00:00">
    </li>
</ul>

MAC

<audio style="width: 100%" controls="controls" autoplay="autoplay" src="http://99.250.117.109:8000/stream">
            Your browser does not support the <code>audio</code> element.
</audio>

Comme nous avons supprimé les images de toutes les métadonnées mp3, nous utilisons un chargeur d’images qui saisit Icy-MetaData (FYI, vous aurez besoin d’au moins PHP 5.4 pour fonctionner correctement) et correspond à un répertoire des illustrations de couverture de chaque chanson du joueur diffusée . 

0
MPG