Réglage audio HTML5 position
Comment passer à certaines des décalages temporels dans HTML5 Audio éléments?
Ils disent que vous pouvez tout simplement mis leur currentTime
de la propriété (l'emphase est mienne):
La
currentTime
attribut doit, sur réception, le retour du courant
la lecture de la position, exprimée en secondes. Sur la définition de, si les médias
l'élément est doté d'un contrôleur de médias, il se doit de jeter un
INVALID_STATE_ERR exception; sinon, l'agent utilisateur doit chercher à
la nouvelle valeur (qui pourrait soulever une exception).
Hélas, il ne semble pas fonctionner (j'en ai besoin dans Chrome).
Il y a des questions similaires, bien que, pas de réponses.
Vous devez vous connecter pour publier un commentaire.
Fonctionne sur mon chrome...
currentTime
commencé à travailler. Donc, je pense que c'est le serveur de chose, parce que j'ai utilisépython -m SimpleHTTPServer
pour servir un fichier audio.À sauter autour d'un fichier audio, votre serveur doit être configuré correctement.
Le client envoie plage d'octets demandes de chercher et de lire certaines régions d'un fichier, le serveur doit la réponse adéquate:
Ensuite, si le serveur de réponses à la plage d'octets demandes correctement, vous pouvez définir la position de l'audio via
currentTime
:Voir MDN, Configuration des serveurs pour Ogg media (la même chose s'applique pour les autres formats, en fait).
Aussi, voir La configuration des serveurs web HTML5 Ogg audio et vidéo.
Accept-Ranges: bytes
, même pour les données qui est déjà en mémoire tampon (réglageContent-Length
ouX-Content-Duration
n'aide pas)... C'est assez étrange, car ce ne sont pas tous les backends sont en mesure de soutenir le contenu varie (le mien ne l'est pas, puisque nous convertir des fichiers à la volée)... Firefox est plus sain, et fonctionne comme prévu (vous pouvez chercher dans le contenu mis en mémoire tampon, et pas dans le tampon de contenu).Header set Accept-Ranges bytes
dans votre.htaccess
les gars, merci. Je suis sur ce depuis 2013 😐Vous pouvez utiliser le
#t
URI plage de Temps propriétéet c'est valable pour les deux audio et vidéo médias.
JS:
Si vous voulez dynamiquement sauter à une plage spécifique, que l'utilisation HTMLMediaElement.currentTime:
Un beaucoup solution plus simple
Assurez-vous que vous tentez de définir la
currentTime
propriété après l'élément audio est prêt à jouer. Vous pouvez lier votre fonction à laoncanplay
événement attribut défini dans la spécification.Pouvez-vous poster un exemple de code qui échoue?
currentTime
à partir de la console, lorsque l'audio est déjà en cours de lecture.Firefox rend également plage d'octets demandes lors de la recherche de contenu qu'il n'a pas encore chargé, il n'est pas juste un chrome question.
La réponse de l'en-tête "Accept-Ranges: bytes" et de retourner une 206 Partielle, du Contenu de code de statut pour permettre à tout client de faire un octet de demandes de plage.
Voir https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly
J'ai été confronté problème que la barre de progression de l'audio n'a pas de travail mais l'audio a été fonctionne correctement. Ce code fonctionne pour moi. Espérons qu'il vous aidera aussi.
Ici la chanson est l'objet de composant audio.
Partie HTML
JQuery Partie
L' @katspaugh réponse est bonne, mais il y a une solution qui ne nécessite aucune configuration de serveur. L'idée est d'obtenir le fichier audio sous la forme d'une goutte, de le transformer en
dataURL
et l'utiliser comme lasrc
pour laaudio
élément.Voici la solution angulaire
$http
, mais si besoin je peux ajouter la vanille JS version:précautions
Jeu de position de temps de 5 secondes: