HTML5 Audio Tag - début et de fin à la position

Question

J'ai un certain nombre de <audio> balises dans mon code et je voudrais savoir s'il y a un moyen que je peux mettre chacun d'avoir une coutume commencer et fin position car ils chargent tous le même fichier.

Cela devrait se faire sans intervention de l'utilisateur. effectivement je dois déployer et <audio> étiquette et avoir quelque chose comme data-start="04.22" data-end="09.45"

Answer 1

Il existe un timerange parameter disponible dans l'attribut src de MediaElement qui fait exactement cela.

://url/to/media.ext#t=[starttime][,endtime]

Notez que si vous activez les contrôles sur ces éléments, l'utilisateur sera en mesure de chercher à différentes positions.

Exemple:

var url = 'https://upload.wikimedia.org/wikipedia/commons/4/4b/011229beowulf_grendel.ogg'; 
 
var slice_length = 12; 
 
var audio, start, end; 
 
for (var i = 0; i < 10; i++) { 
 
    start = slice_length * i; // set the start 
 
    end = slice_length * (i + 1); // set the end 
 
    // simply append our timerange param 
 
    audio = new Audio(url + '#t=' + start + ',' + end); 
 
    audio.controls = true; // beware this allows the user to change the range 
 

 
    document.body.appendChild(document.createTextNode(start + 's ~ ' + end + 's')); 
 
    document.body.appendChild(document.createElement('br')); 
 
    document.body.appendChild(audio); 
 
    document.body.appendChild(document.createElement('br')); 
 
}

Answer 2

Voir cette réponse pour savoir comment lire un fichier audio à un certain moment:

HTML 5 <audio> - Play file at certain time point

Answer 3

Voici ce que vous cherchez. J'ai quatre options parmi lesquelles vous pouvez choisir chacune avec un peu moins de difficulté que celle d'avant. Je recommande le dernier en fonction de ce dont vous aviez besoin.

L'heure de début est en secondes et dans cet exemple, elle est de 12 secondes. Au lieu d'une heure de fin, vous avez une durée de lecture et c'est en millisecondes.

myAudio=document.getElementById('audio2'); 
 
    myAudio.addEventListener('canplaythrough', function() { 
 
     if(this.currentTime < 72){this.currentTime = 72;} 
 
     this.play(); 
 
     setTimeout(function(){ 
 
     document.getElementById('audio2').pause(); 
 

 
}, 3000); 
 

 
    });

<audio id="audio2" 
 
     preload="auto" 
 
     src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Drum.ogg" > 
 
    <p>Your browser does not support the audio element</p> 
 
</audio>

Si vous voulez vraiment avoir une heure de fin, vous pouvez écrire une fonction qui prendra votre entrée et soustrayez de temps de démarrage et de le convertir en milliseconde. Un exemple de ce qui est visible ci-dessous:

var startTime = 72; 
 
var endTime = 75; 
 
var delaySec = endTime - startTime; 
 
var delayMillis = delaySec * 1000; 
 
    myAudio=document.getElementById('audio2'); 
 
    myAudio.addEventListener('canplaythrough', function() { 
 
     if(this.currentTime < startTime){this.currentTime = startTime;} 
 
     this.play(); 
 
     setTimeout(function(){ 
 
     document.getElementById('audio2').pause(); 
 

 
}, delayMillis); 
 

 
    });

<audio id="audio2" 
 
     preload="auto" 
 
     src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Drum.ogg" > 
 
    <p>Your browser does not support the audio element</p> 
 
</audio>

Dans celui-ci vous pouvez définir à la fois l'heure de début et de fin en quelques secondes.

Ou vous pouvez le faire avec l'heure de début en minutes et secondes.

var startMinute = 1; 
 
var startSecond = 12; 
 
var endMinute = 1; 
 
var endSecond = 15; 
 
var startinsec = startMinute * 60; 
 
var startTime = startinsec + startSecond; 
 
var endinsec = endMinute * 60; 
 
var endTime = endinsec + endSecond;; 
 
var delaySec = endTime - startTime; 
 
var delayMillis = delaySec * 1000; 
 
    myAudio=document.getElementById('audio2'); 
 
    myAudio.addEventListener('canplaythrough', function() { 
 
     if(this.currentTime < startTime){this.currentTime = startTime;} 
 
     this.play(); 
 
     setTimeout(function(){ 
 
     document.getElementById('audio2').pause(); 
 

 
}, delayMillis); 
 

 
    });

<audio id="audio2" 
 
     preload="auto" 
 
     src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Drum.ogg" > 
 
    <p>Your browser does not support the audio element</p> 
 
</audio>

Voici un autre qui devrait être plus facile pour vous de faire depuis que vous avez plusieurs fichiers:

audioControl('audio2', 1, 12, 1, 15); 
 
    
 
function audioControl(elemID,sM, sS, eM, eS) { 
 
var startinsec = sM * 60; 
 
var startTime = startinsec + sS; 
 
var endinsec = eM * 60; 
 
var endTime = endinsec + eS;; 
 
var delaySec = endTime - startTime; 
 
var delayMillis = delaySec * 1000; 
 
    myAudio=document.getElementById(elemID); 
 
    myAudio.addEventListener('canplaythrough', function() { 
 
     if(this.currentTime < startTime){this.currentTime = startTime;} 
 
     this.play(); 
 
     setTimeout(function(){ 
 
     document.getElementById(elemID).pause(); 
 

 
}, delayMillis); 
 

 
    }); 
 
    
 
    } 
 

<audio id="audio2" 
 
     preload="auto" 
 
     src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Drum.ogg" > 
 
    <p>Your browser does not support the audio element</p> 
 
</audio>

Chaque fois que vous voulez faire il vous suffit de lancer ce qui suit:

audioControl(ElementID, StartMinute, StartSecond, EndMinute, EndSecond);