web-dev-qa-db-fra.com

Définition de la position audio HTML5

Comment passer à certains décalages horaires dans les éléments HTML5 Audio ?

Ils disent que vous pouvez simplement définir leur currentTime propriété (emphase mienne):

L'attribut currentTime doit, à la réception, renvoyer la position de lecture actuelle, exprimée en secondes. Avec le paramètre , si l'élément multimédia a un contrôleur de média actuel, il doit alors lever une exception INVALID_STATE_ERR. sinon, l'agent utilisateur doit rechercher la nouvelle valeur (ce qui pourrait déclencher une exception).

Hélas, cela ne semble pas fonctionner (j'en ai besoin sous Chrome).

Il y a des questions similaires, mais pas de réponses.

javascriptgoogle-chromehtml5-audio
61
katspaugh

Fonctionne sur mon chrome ...

$('#audio').bind('canplay', function() {
  this.currentTime = 29; // jumps to 29th secs
});
51
marko

Pour contourner un fichier audio, votre serveur doit être configuré correctement.

Le client envoie demandes de plage d'octets pour rechercher et lire certaines régions d'un fichier. Le serveur doit donc répondre correctement:

Afin de prendre en charge la recherche et la lecture de régions du média non encore téléchargées, Gecko utilise des requêtes de plage d'octets HTTP 1.1 pour extraire le média de la position de la cible de recherche. De plus, si vous ne fournissez pas d'en-têtes X-Content-Durée, Gecko utilise des requêtes sur une plage d'octets pour rechercher la fin du média (en supposant que vous serviez l'en-tête Content-Length) afin de déterminer la durée du média.

Ensuite, si le serveur répond correctement aux demandes de plage d'octets, vous pouvez définir la position de l'audio via currentTime:

audio.currentTime = 30;

Voir MDN Configuration des serveurs pour le support Ogg (il en va de même pour les autres formats).

Voir aussi Configuration des serveurs Web pour les fichiers audio et vidéo HTML5 Ogg .

64
katspaugh

Vous pouvez utiliser le #t URI propriété plage de temps
et qui est valable à la fois audio et vidéo médias.

stackoverflow.mp3#t=8.5 // Will start playing from the 8.5 sec.

var a = new Audio();
a.src= "http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg#t=4.5";
a.play();

Si vous souhaitez passer dynamiquement à une plage spécifique, utilisez HTMLMediaElement. currentTime :

audio.currentTime = 8.5;
16
Roko C. Buljan

Une solution beaucoup plus facile est

var element = document.getElementById('audioPlayer');

//first make sure the audio player is playing
element.play(); 

//second seek to the specific time you're looking for
element.currentTime = 226;
9
Cedric Dahl

Assurez-vous d’essayer de définir la propriété currentTimeaprès l’élément audio est prêt à être lu. Vous pouvez lier votre fonction à l'attribut d'événement oncanplay défini dans la spécification.

Pouvez-vous poster un exemple du code qui a échoué?

8
dragon

Firefox effectue également des demandes de plage d'octets lors de la recherche de contenu qu'il n'a pas encore chargé. Il ne s'agit pas simplement d'un problème chrome. Définissez l'en-tête de réponse "Accept-Ranges: bytes" et renvoyez un 206 contenu partiel. code de statut permettant à tout client de faire des demandes de plage d'octets.

Voir https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly

7
user3834658

Je faisais face au problème que la barre de progression de l'audio ne fonctionnait pas mais que l'audio fonctionnait correctement. Ce code fonctionne pour moi. J'espère que cela vous aidera aussi. Ici la chanson est l’objet du composant audio.

Partie HTML

<input type="range" id="seek" value="0" max=""/>

JQuery Part

    $("#seek").bind("change", function() {
            song.currentTime = $(this).val();               
        });

song.addEventListener('timeupdate',function (){

    $("#seek").attr("max", song.duration);
    $('#seek').val(song.currentTime);
    });
5
Anuj Sharma

La réponse de @ katspaugh est correcte, mais il existe une solution de contournement qui n'exige aucune configuration de serveur supplémentaire. L'idée est d'obtenir le fichier audio sous forme de blob, de le transformer en dataURL et de l'utiliser en tant que src pour l'élément audio.

Voici la solution pour angular $http, mais si nécessaire, je peux également ajouter la version de Vanilla JS:

$http.get(audioFileURL,
        {responseType:'blob'})
        .success(function(data){
            var fr = new FileReader;
            fr.readAsDataURL(data);
            fr.onloadend = function(){
                domObjects.audio.src = fr.result;
            };
        });

mises en garde

  1. Cette solution de contournement ne convient pas aux fichiers volumineux.
  2. Cela ne fonctionnera pas d'origine croisée si CORS n'est pas correctement configuré.
4
artur grzesiak

Définissez la position temporelle sur 5 secondes:

var vid = document.getElementById("myAudio");
vid.currentTime = 5;
2
Jijo Paulose