HTML5 <audio> Safari de la diffusion en direct de vs pas

Je suis d'essayer d'intégrer un élément HTML5 audio pointant vers MP3 ou OGG données servi par un fichier PHP . Lorsque j'affiche la page dans Safari, les contrôles apparaissent, mais l'INTERFACE utilisateur dit "Émission en Direct." Lorsque je clique sur jouer, le son démarre comme prévu. Une fois qu'il se termine, cependant, je ne peux pas commencer à y jouer à nouveau en cliquant sur jouer. Même en utilisant l'API JS sur l'élément audio et réglage currentTime à 0 échoue avec une erreur d'index exception.

Je soupçonne les en-têtes du script PHP ont été le problème, en particulier manque une longueur de contenu. Mais ce n'est pas le cas. Les en-têtes de réponse inclut un Contenu de Longueur pour indiquer l'audio est de taille finie. En outre, tout fonctionne comme prévu dans Firefox 3.5+. J'ai peut-cliquez sur l'élément audio à plusieurs reprises pour entendre le son de relecture.

Si je supprime le script PHP à partir de l'équation et de servir une copie statique du fichier MP3, tout fonctionne bien dans Safari.

Est-ce à dire Safari est le traitement de l'audio src Url avec des paramètres de requête différemment que les Url qui n'en ont pas? Quelqu'un a une chance pour que cela fonctionne?

Mon exemple simple de la page est:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <audio controls autobuffer>
      <source src="say.php?text=this%20is%20a%20test&format=.ogg" />
      <source src="say.php?text=this%20is%20a%20test&format=.mp3" />
    </audio>
  </body>
</html>

En-Têtes HTTP de script PHP:

HTTP/1.x 200 OK
Date: Sun, 03 Jan 2010 15:39:34 GMT
Server: Apache
X-Powered-By: PHP/5.2.10
Content-Length: 8993
Keep-Alive: timeout=2, max=98
Connection: Keep-Alive
Content-Type: audio/mpeg

En-Têtes HTTP de l'accès au fichier direct:

HTTP/1.x 200 OK
Date: Sun, 03 Jan 2010 20:06:59 GMT
Server: Apache
Last-Modified: Sun, 03 Jan 2010 03:20:02 GMT
Etag: "a404b-c3f-47c3a14937c80"
Accept-Ranges: bytes
Content-Length: 8993
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: audio/mpeg

J'ai essayé de coder en dur le Accept-Ranges-tête dans le script, mais pas de chance.

  • Je ne sais pas si vous vous êtes averti à propos de l'édition, mais j'ai édité ma réponse à inclure un cas de test qui fonctionne pour moi, et semble correspondre à ce que vous faites. Pouvez-vous vérifier si mon cas de test qui fonctionne pour vous ainsi?
InformationsquelleAutor Peter Parente | 2010-01-03
  1. 34

    Pouvez-vous poster les en-têtes envoyés par le serveur à la fois avec et sans le script PHP? Je me demandais si le script PHP est l'envoi d'un autre Content-Type que de servir les fichiers normalement.

    Il serait également une bonne idée de préciser le type attribut sur la source éléments, de sorte que le navigateur ne dispose pas de télécharger les deux clips afin de déterminer s'il peut jouer.

    Je ne peux pas reproduire votre problème. J'ai essayé de reproduire le problème dans Safari 4.0.4, et le courant WebKit tous les soirs, avec le suivant page de test. Je suis simplement à l'aide du module mod_rewrite d'envoi de différents formats en fonction d'un paramètre au lieu de PHP, mais je ne pense pas que devrait faire une différence, à moins d'une certaine manière PHP, c'est de modifier le fichier.

    <!DOCTYPE html>
<title>Auido test</title>
<audio controls autobuffer>
  <source src="gnossienne-no-1?foo=bar&format=.mp4">
  <source src="gnossienne-no-1?foo=bar&format=.ogg">
</audio>

    Pouvez-vous essayer mon exemple, et laissez-moi savoir si cela fonctionne pour vous?

    modifier Ah. Après avoir farfouillé à un peu plus, il semble que le problème est dû à une drôle de façon que le <audio> élément dans Safari se comporte en tentant de déterminer la taille du contenu.

    Voici un extrait d'une capture de paquets de Safari à la rencontre d'un <audio> élément vers un fichier servis directement à partir de Apache. Comme vous pouvez le voir, il tente d'abord de récupérer les deux premiers octets des médias, sans doute afin d'obtenir un Contenu de Longueur de dos, et peut-être d'autres en-têtes. Il tente alors de récupérer la totalité de la chose. Puis, inexplicablement, il tente d'extraire les deux premiers octets de nouveau, mais passe approprié de la mise en cache des en-têtes pour obtenir un "304 not Modified". Et enfin, toujours inexplicablement, il récupère la dernière 3440 octets du fichier une fois de plus. Il fait toutes ces en séparer les connexions TCP, ce qui ajoute beaucoup de frais généraux, en plus de la surcharge de récupérer les données d'un couple de fois.

    OBTENIR /stackoverflow/audio-test/dire-noid3?foo=bar&format=.mp3 HTTP/1.1 
Hôte: ephemera.continuation.org 
Gamme: octets=0-1 
Connection: close 
User-Agent: Apple Mac OS X v10.6.2 CoreMedia v1.0.0.10C540 
Accept: */* 
Accept-Encoding: identité 
Témoin: [rédigé] 

HTTP/1.1 206 Partielle, du Contenu 
Date: tue, 05 Jan 2010 02:12:48 GMT 
Serveur: Apache 
Last-Modified: Tue, 05 Jan 2010 02:02:08 GMT 
ETag: "b2a80ad-11f6-47c6139aaa800" 
Accept-Ranges: bytes 
Contenu-Durée: 2 
Content-Range: bytes 0-1/4598 
Connection: close 
Content-Type: audio/mpeg 

# 2 octets de données 

GET /stackoverflow/audio-test/dire-noid3?foo=bar&format=.mp3 HTTP/1.1 
Hôte: ephemera.continuation.org 
Gamme: octets=0-4597 
Connection: close 
User-Agent: Apple Mac OS X v10.6.2 CoreMedia v1.0.0.10C540 
Accept: */* 
Accept-Encoding: identité 
Témoin: [rédigé] 

HTTP/1.1 206 Partielle, du Contenu 
Date: tue, 05 Jan 2010 02:12:48 GMT 
Serveur: Apache 
Last-Modified: Tue, 05 Jan 2010 02:02:08 GMT 
ETag: "b2a80ad-11f6-47c6139aaa800" 
Accept-Ranges: bytes 
Content-Length: 4598 
Content-Range: bytes 0-4597/4598 
Connection: close 
Content-Type: audio/mpeg 

# 4598 octets de données 

GET /stackoverflow/audio-test/dire-noid3?foo=bar&format=.mp3 HTTP/1.1 
Hôte: ephemera.continuation.org 
Gamme: octets=0-1 
Connection: close 
User-Agent: Apple Mac OS X v10.6.2 CoreMedia v1.0.0.10C540 
Accept: */* 
Accept-Encoding: identité 
Témoin: [rédigé] 
Si-None-Match: "b2a80ad-11f6-47c6139aaa800" 
Si-Modified-since: Tue, 05 Jan 2010 02:02:08 GMT 

HTTP/1.1 "304 not Modified" 
Date: tue, 05 Jan 2010 02:12:49 GMT 
Serveur: Apache 
Connection: close 
ETag: "b2a80ad-11f6-47c6139aaa800" 

# pas de données 

GET /stackoverflow/audio-test/dire-noid3?foo=bar&format=.mp3 HTTP/1.1 
Hôte: ephemera.continuation.org 
Gamme: octets=1158-4597 
Connection: close 
User-Agent: Apple Mac OS X v10.6.2 CoreMedia v1.0.0.10C540 
Accept: */* 
Accept-Encoding: identité 
Témoin: [rédigé] 

HTTP/1.1 206 Partielle, du Contenu 
Date: tue, 05 Jan 2010 02:12:49 GMT 
Serveur: Apache 
Last-Modified: Tue, 05 Jan 2010 02:02:08 GMT 
ETag: "b2a80ad-11f6-47c6139aaa800" 
Accept-Ranges: bytes 
Content-Length: 3440 
Content-Range: bytes 1158-4597/4598 
Connection: close 
Content-Type: audio/mpeg 

# 3440 octets de données

    De toute façon, à la façon dont il traite avec la sortie de votre script PHP. Ici, Safari tente à nouveau de télécharger les deux premiers octets, mais votre script ignore la Range demande et renvoie le tout. Apparemment, WebKit n'est pas comme ça, et donc il essaie à nouveau, sans la Range demande. Encore une fois, votre script envoie le contenu complet. Safari tente maintenant une fois de plus, l'ajout d'un Icy-Metadata en-tête, ce qui indique qu'il pense que c'est le téléchargement d'un ruisseau et veut streaming métadonnées à être envoyé. Il accepte finalement la sortie de l', et la <audio> élément peut jouer.

    OBTENIR /dire.le php?texte=ce%20is%20a%20test&format=.mp3 HTTP/1.1 
Hôte: tts.mindtrove.info 
Gamme: octets=0-1 
Connection: close 
User-Agent: Apple Mac OS X v10.6.2 CoreMedia v1.0.0.10C540 
Accept: */* 
Accept-Encoding: identité 

HTTP/1.1 200 OK 
Date: tue, 05 Jan 2010 02:14:28 GMT 
Serveur: Apache 
X-Powered-By: PHP/5.2.10 
Content-Length: 4598 
Connection: close 
Content-Type: audio/mpeg 

# 4598 octets de données 

OBTENIR /dire.le php?texte=ce%20is%20a%20test&format=.mp3 HTTP/1.1 
Hôte: tts.mindtrove.info 
Connection: close 
User-Agent: Apple Mac OS X v10.6.2 CoreMedia v1.0.0.10C540 
Accept: */* 

HTTP/1.1 200 OK 
Date: tue, 05 Jan 2010 02:14:28 GMT 
Serveur: Apache 
X-Powered-By: PHP/5.2.10 
Content-Length: 4598 
Connection: close 
Content-Type: audio/mpeg 

# 4598 octets de données 

OBTENIR /dire.le php?texte=ce%20is%20a%20test&format=.mp3 HTTP/1.1 
Hôte: tts.mindtrove.info 
Accept: */* 
User-Agent: Apple Mac OS X v10.6.2 CoreMedia v1.0.0.10C540 
Icy-Métadonnées: 1 
Connection: close 

HTTP/1.1 200 OK 
Date: tue, 05 Jan 2010 02:14:28 GMT 
Serveur: Apache 
X-Powered-By: PHP/5.2.10 
Content-Length: 4598 
Connection: close 
Content-Type: audio/mpeg 

# 4598 octets de données

    En résumé, il semble que Safari (ou, plus précisément, QuickTime, Safari qui utilise pour gérer tous les médias et de téléchargement) a complètement braindamaged approche de téléchargement de médias. Quelque chose dans la façon dont vous envoyer vos données en arrière, sans doute du fait que vous ne répondez pas à Range demandes, fait penser que vous êtes l'envoi de streaming de médias, à l'origine pour télécharger le contenu à plusieurs reprises (bien que, même lorsqu'ils sont confrontés à un serveur qui répond à un Range demande de, il fait encore plusieurs plus de demandes qu'il a vraiment besoin d').

    Mon conseil serait d'essayer de répondre de façon appropriée aux Range demandes; au moment de servir, les médias, les navigateurs seront susceptibles de les utiliser pour essayer de réduire la bande passante, par la seule mise en mémoire tampon autant que ils ont besoin pour être capable de jouer (même si ont le autobuffer attribut qui indique que vous aimeriez qu'ils tampon de l'ensemble de la chose, les navigateurs peuvent ignorer que). Je vous conseille d'utiliser X-Sendfile pour qu'Apache traiter desservant le fichier, mise en cache, et les demandes de plage, mais vous semblez être sur Dreamhost, qui n'a pas mod_xsendfile installé, de sorte que vous allez avoir à déployer votre propre Range de manutention.

    • Ajouté les en-têtes à la question de départ qu'ils ne rentrait pas dans un commentaire. J'ai eu du type spécifié à l'origine, mais pris dans le cas où il a été à l'origine du problème. Ajoutant pour faire bonne mesure, mais sans modification du comportement défectueux dans Safari.
    • Votre exemple qui fonctionne pour moi. Donc, le seul facteur qui semble être le script PHP. Intéressant. J'ai posté une démo de mon code dans le tts.mindtrove.info/test.html. La source de fichier PHP est visible à l'adresse tts.mindtrove.info/say.php.txt. La statique des fichiers audio sont au tts.mindtrove.info/cache. La seule chose que je vois dans le script PHP qui pourrait être difficile maintenant est l'utilisation de passthru("cat $fn"). Mais avec un Content-Length et forcé de quitter() à la fin du script, je ne sais pas pourquoi Safari / WebKit traiter de l'audio en un flux sans fin.
    • Excellente aide. Merci de prendre le temps de travailler avec moi. Vos résultats pourraient être mûrs pour un rapport de bug, mais je suis sûr que Apple va simplement dire que le script PHP besoins de gestion de Plage. Il pourrait être sympa si ils ont documenté quelque part si.
    • J'ai eu des problèmes avec safari et audio ainsi. votre page de test ne fonctionne pas sur la dernière version (safari v5.0.2 pour windows 7). Ne vous arrive de savoir si l'ipod safari prend en charge l'audio? si oui, je peut essayer de le faire fonctionner
    • Parente: j'ai du mal ainsi. Votre page de test et de Brians ne fonctionne pas pour moi (safari v5.0.2 pour windows 7)
    • C'est toujours un problème. 🙁
    • Wow, ce problème est maintenant, 6 ans plus tard, toujours présent dans safari sur iOS 9.2. Merci pour votre réponse claire. M'a sauvé la journée de la frustration.
    • Brian et @DirkdeBoer, pouvez-vous s'il vous plaît regardez mon code simple à stackoverflow.com/questions/54738875/... et voir si je ne vais pas faire ce que vous suggérez? J'aimerais vraiment avoir votre avis. Merci!
    • Cela a été vraiment utile et je l'ai proposée comme réponse à mon débordement de pile question stackoverflow.com/questions/55830509/...

    InformationsquelleAutor Brian Campbell
  2. 4

    Pour l'enregistrement, tandis que les deux Pochang et Chris sont correctes que vous avez besoin de Contenu de Gamme d'en-tête pour résoudre ce problème dans Safari, Chrome exige un en-tête supplémentaire qui doit être inclus pour la mise currentTime de fonctionner correctement:

    header( 'Accept-Ranges: bytes');

    Remarque que vous n'avez pas à répondre correctement à la demande de l'en-tête de Plage, vous avez juste à les inclure dans la réponse.

    • Merci, Brendan, qui a beaucoup aidé!
    • Je ne pouvais pas obtenir ce travail.
    InformationsquelleAutor Brendan
  3. 2

    J'ai eu le même problème.
    Le point clé est l' Contenu de Gamme en-tête.
    Tout fonctionne très bien, après je l'ajouter à la la mp3-sortie de php.

    InformationsquelleAutor Pochang
  4. 2

    Pochang est correct. Y compris un Contenu de Gamme d'en-tête dans le PHP réponse sera la cause de Safari à se comporter correctement. Il permet également la recherche (médias.currentTime = 0;) sans le redoutable INDEX_SIZE_ERR dans Safari, mais pas dans google Chrome.

    Le code PHP pour l'en-tête est:

    $len = strlen( $data );
$shortlen = $len - 1;
header( 'Content-Range: bytes 0-'.$shortlen.'/'.$len);
    • Quelles sont les variables ici exactement??? Est $les données de votre fichier de musique? Où est $longueur en venir?
    • Je ne pouvais pas obtenir ce travail.
    InformationsquelleAutor Chris Snyder