je veux jouer plusieurs mp3 dans l'ordre jquery

Question

Je veux créer un script en javascript/jquery qui joue/parle les lettres d'un certain mot en arrière-plan.

lorsque j'appelle la fonction playWord(); Il épelle les lettres d'un mot dans un div.

Par exemple, le mot «aide». Il devrait épeler: 'h' 'e' 'l' 'p'. Chaque lettre a un fichier .mp3. Avant que la prochaine lettre ne s'écrit, il faut attendre que la lettre soit entièrement épelée.

C'est ce que j'ai jusqu'à présent, mais ce n'est pas correctement. Parfois, le temps entre les lettres est de 5 secondes.

<script type='text/javascript'> 

var letterCounter = 0; 
//the letter speed in ms 
var spellAudioSpeed = 1000; 

function playWord(){ 
    letterCounter = 0; 
    //the word from the div 
    playLetters($('#transWord').text().toLowerCase()); 
} 

function playLetters(pWord){ 
    if(letterCounter < pWord.length){ 

     var letter = pWord.charAt(letterCounter); 
     //create an new audio element 
     var audioElement = document.createElement('audio'); 

     if(letter == ' '){ 
      audioElement.setAttribute('src', 'Letters/spatie.mp3'); 
     } else if(letter == '\''){ 
      audioElement.setAttribute('src', 'Letters/aanhalingsteken.mp3'); 
     } else if(letter == '\\"'){ 
      audioElement.setAttribute('src', 'Letters/dubbeleaanhalingsteken.mp3'); 
     } else if(letter == '/'){ 
      audioElement.setAttribute('src', 'Letters/schuinestreep.mp3'); 
     } else if(letter == '\\'){ 
      audioElement.setAttribute('src', 'Letters/schuinestreepachteruit.mp3'); 
     } else { 
      audioElement.setAttribute('src', 'Letters/'+letter+'.mp3'); 
     } 

     //couldnt find a better way to determine the duration.. ??? 
     audioElement.addEventListener('durationchange', function() { 
      audioElement.play(); 
      letterCounter++; 
      timeOut = setTimeout(function(){playLetters(pWord)}, 
      spellAudioSpeed + (audioElement.duration * 1000)); 
     }, true); 

    } else if (letterCounter == pWord.length){ 
     //do stuff 
     alert("finished"); 
    } 
} 

playWord(); 

Answer 1

Essayez d'utiliser l'attribut preload.