Recherche à travers un fichier MP3 en streaming avec HTML5 <audio> tag

Question

J'espère que quelqu'un peut m'aider avec cela.

Je joue avec un serveur node.js qui diffuse de l'audio vers un client, et je veux créer un lecteur HTML5. À l'heure actuelle, je diffuse le code à partir du nœud à l'aide d'un codage en bloc, et si vous allez directement à l'URL, cela fonctionne très bien.

Ce que je voudrais faire est Embed ce en utilisant la balise HTML5 <audio>, comme ceci:

<audio src="http://server/stream?file=123"> 

où /stream est le point final pour le serveur de noeud pour diffuser le MP3. Le lecteur HTML5 se charge bien dans Safari et Chrome, mais il ne me permet pas de chercher, et Safari dit même qu'il s'agit d'une "diffusion en direct". Dans les en-têtes de /stream, j'inclus la taille du fichier et le type de fichier, et la réponse se termine correctement.

Des idées sur comment je pourrais contourner cela? Je pourrais certainement envoyer le fichier entier à la fois, mais alors le joueur attendrait que le tout soit téléchargé - je le streamerais plutôt.

Answer 1

jetez un oeil ici http://www.scottandrew.com/pub/html5audioplayer/, je l'ai utilisé et il joue pendant le téléchargement du fichier. Il attend un peu le tampon mais joue ensuite. Je n'ai jamais essayé de chercher mais je commencerais par essayer de mettre le "aud.currentTime" dans son code si cela peut être fait.

Bonne chance

Answer 2

Êtes-vous l'envoi d'un Accept-Ranges (RFC 2616, Section 14.5) tête de réponse?

Answer 3

D'après ce que je comprends que vous voulez que le lecteur pour permettre à l'utilisateur de passer directement aux parties de l'audio/vidéo refuge » Je ne suis pas sûr que ce soit possible, vu que j'ai regardé quelques-uns des exemples d'éléments médiaux de html5 et ils ne m'ont pas permis de chercher à pièces unbuffered :(

Si vous voulez chercher à travers la partie tamponnée - alors ce n'est pas un problème. créer un problème pour vous ici, autant que je comprends. Vous voulez diffuser le fichier, et ce que cela fait est que le joueur pense que vous avez une sorte de diffusion en direct là-bas. Si vous venez d'envoyer le fichier directement, vous n'auriez pas ce problème, car le lecteur pourra commencer à jouer avant de charger le fichier entier. Cela fonctionne bien avec les éléments audio et vidéo, et j'ai confirmé ce comportement à la fois dans Chrome et FF :)

Espérons que cela aide!

Answer 4

peut-être ce html5 audio player example va nous expliquer et nous démontrer le nouvel élément et ses méthodes .load, .play, .currentTime, etc.

J'utilise un tableau d'éléments et peux définir la position currentTime bien sûr. nous pouvons également utiliser eventhandlers (par exemple 'loadeddata') pour attendre avant d'autoriser la recherche.

ping et amusez-vous avec html5 :)

Answer 5

Assurez-vous que le serveur accepte les demandes Range, vous pouvez vérifier si Accept-Ranges est dans l'en-tête. Dans jPlayer, il s'agit d'un problème courant dans les navigateurs Webkit (en particulier Chrome) lorsqu'il s'agit de progresser et de rechercher des fonctionnalités.

Vous n'utilisez peut-être pas jPlayer, mais les informations de réponse du serveur sur le site Web officiel peuvent être utiles.

http://www.jplayer.org/latest/developer-guide/#jPlayer-server-response

Answer 6

mais j'eu le même problème. Il est nécessaire de définir des en-têtes pour la réponse du fichier multimédia.

comme exemple:

Accept-Ranges:bytes 
Content-Length:7437847 
Content-Range:bytes 0-7437846/7437847 

tag ensuite audio sera en mesure de rechercher