web-dev-qa-db-fra.com

diffusion audio en direct html5

Je crée mon propre audio, sans contrôle du navigateur.

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

J'ai ces fonctions, appelées lorsque l'on clique sur certains boutons:

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

function play()
{
   audio.pause
}

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

Mais pour l'instant, je ne peux que reproduire des fichiers mp3 ou ogg, mais pas une radio en direct. J'ai lu quelques plugins, mais je dois le faire avec du HTML pur.

Pourrais-tu m'aider s'il te plait? Merci beaucoup,

html5audiolive-streaming
15
Daniel Garcia Sanchez

Malheureusement, il n'y a toujours pas de codec vidéo et audio unique, qui est pris en charge par tous les navigateurs! Les programmeurs doivent s'assurer qu'il existe une solution de secours pour les cas d'utilisation où le navigateur A ne prend pas en charge le codec B et vice versa.

Vous pouvez consulter ce tableau de compatibilité, pour les navigateurs de bureau et mobiles.

Bureau:

  • Internet Explorer (9.0+) prend en charge les codecs MP3 et AAC
  • Chrome (6.0+) prend en charge Ogg Vorbis, MP3, WAV +
  • Firefox (3.6+) prend en charge Ogg Vorbis, WAV
  • Safari (5.0+) prend en charge MP3, AAC, WAV
  • Opera (10.0+) prend en charge Ogg Vorbis, WAV

Mobile:

  • Les codecs pris en charge par Opera Mobile (11.0+) dépendent de l'appareil
  • Les codecs pris en charge par Android (2.3+) dépendent de l'appareil
  • Mobile Safari (iDevices avec iOS 3.0+) prend en charge MP3, AAC
  • Blackberry (6.0+) prend en charge MP3, AAC

Étant donné que le flash est encore assez répandu, c'est probablement la solution de secours la plus sûre.

De plus, je tiens à noter qu'il n'y a rien de pire à utiliser une bibliothèque, certaines d'entre elles (par exemple jPlayer ) fournissent une interface très puissante et cela ne peut que vous aider à produire un meilleur code!

Je pense que vous pouvez trouver tout ce que vous voulez savoir dans l'article suivant: HTML5 Audio Radio Player by Opera Devs

12
kav

La lecture audio à partir d'une "source en direct" semble être prise en charge par les navigateurs modernes. Fondamentalement, utilisez simplement les balises audio HTML 5 normales et entrez l'URL "live stream" comme source, par exemple:

<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>

Et le flux "fonctionne" pour ainsi dire, bien que tenter de rechercher avec les contrôles par défaut ne fasse rien. Donc, vous voudrez peut-être éventuellement remplacer les contrôles par des contrôles "personnalisés", dans le style de média HTML 5 normal. Pour la compatibilité descendante avec les navigateurs non HTML 5, ce projet peut être utile: https://github.com/etianen/html5media/wiki/Embedding-audio (ne l'ai pas testé avec la diffusion en direct mais pourrait /devrait marcher). Le codec MP3 semble être pris en charge par les principaux navigateurs (sauf peut-être Firefox sur Linux [?]). Opus pourrait être une autre option bien multiplateforme, je ne suis pas sûr du codec quel est le "meilleur" choix pour ainsi dire.

Avec certains streams (shoutcast je présume) j'ai dû ajouter une fermeture ';' à l'URL, voir https://stackoverflow.com/a/3182814/3245 pour les notes là-bas, mais c'est simplement pour obtenir la "bonne" URL.

15
rogerdpack