javascript - How can as well load different subtitles with the other files?

Question

In the following code different audio files are loaded with the button next. On the console you can see when they are finished loading. The dynamic text changes as well. These are answers that are answered with the radio buttons. It will indicate which answer has been selected. It all works already. It is only about the subtitles

Now several subtitles are to be added. These have to be loaded and started with the different audio files.

For clip0 and the array0, also subtitle_0 and for clip1 and the array1 should subtitle_1 be loaded.

Press Next and thenSubtitle Open, then Play Pause Reset

I have already tried a lot, but it does not really want to. Can someone help me there? Many Thanks.

var currentArray = -1;
var arrays = [
    [ "Argument arr0,1", "Argument arr0,2", "Argument arr0,3", ],
    [ "Argument arr1,1", "Argument arr1,2", "Argument arr1,3", ],
    [ "Argument arr2,1", "Argument arr2,2", "Argument arr2,3", ]
];

var renderArray = function renderArray( ary ) {
    document.querySelector( '#arr1' ).textContent = ary[ 0 ];
    document.querySelector( '#arr2' ).textContent = ary[ 1 ];
    document.querySelector( '#arr3' ).textContent = ary[ 2 ];

};

var previous = function previous( event ) {
    currentArray -= 1;
    if ( currentArray < 0 ) currentArray = arrays.length - 1;
         renderArray( arrays[ currentArray ] );
    
    if ( currentArray == 0 ) {
         clip0.click();
    }		
    if ( currentArray == 1 ) {
         clip1.click();
    }		
    if ( currentArray == 2 ) {
         clip2.click();
    }
    
    document.getElementById('Radio1').checked = false;
    document.getElementById('Radio2').checked = false;
    document.getElementById('Radio3').checked = false;
};

var next = function next( event ) {
    currentArray += 1;
    if ( currentArray > arrays.length - 1 ) currentArray = 0;
         renderArray( arrays[ currentArray ] );
    
    if ( currentArray == 0 ) {
         clip0.click();
         changer0();  //for Subtittle_0
    }		
    if ( currentArray == 1 ) {
         clip1.click();
         changer1();  //for Subtittle_1
    }		
    if ( currentArray == 2 ) {
         clip2.click();
    } 
 
    document.getElementById('Radio1').checked = false;
    document.getElementById('Radio2').checked = false;          
    document.getElementById('Radio3').checked = false;                                                                                                         
};
 
    document.querySelector( '#prev_button' ).addEventListener( 'click', previous );
    document.querySelector( '#next_button' ).addEventListener( 'click', next );

var check = function check() {
    if ( document.getElementById( 'Radio1' ).checked ) {    		
		console.log( 'array ' + currentArray + ' with radio button 1 is checked' );
    
    } else if ( document.getElementById( 'Radio2' ).checked ) {    		
		console.log( 'array ' + currentArray + ' with radio button 2 is checked' );
    
    } else if ( document.getElementById( 'Radio3' ).checked ) {    		
		console.log( 'array ' + currentArray + ' with radio button 3 is checked' );
    }
}

var listener = new THREE.AudioListener();  
var audioLoader = new THREE.AudioLoader();

var clip0 = document.querySelector('#clip0');
    clip0.addEventListener('click', function () {
    loadClip('https://cdn.rawgit.com/mrdoob/three.js/master/examples/sounds/358232_j_s_song.mp3');			
});

var clip1 = document.querySelector('#clip1');
    clip1.addEventListener('click', function () {
    loadClip('https://cdn.rawgit.com/mrdoob/three.js/master/examples/sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3');
});
	
var clip2 = document.querySelector('#clip2');
    clip2.addEventListener('click', function () {
    loadClip('https://cdn.rawgit.com/mrdoob/three.js/master/examples/sounds/358232_j_s_song.mp3');
});
  
  
var audioLoaded = false,	   
    result	
	
function loadClip( audioUrl ) {
    audioLoaded = false	
	
    console.log(`
Loading sound...`);		
    audioLoader.load( audioUrl, function( buffer ) {
    sound = new THREE.PositionalAudio( listener ); 				
    sound.setBuffer( buffer );
    sound.setRefDistance( 20 );
    sound.setLoop(false);
    sound.setVolume(5);
    console.log(`
Audio finished loading!`);
    audioLoaded = true       
});	
	
play.onclick = function playClip() {
    console.log( `
playClip()` );
    play.style.background = "#92ddb8";	  
	  
    reset.disabled = false;
    play.disabled = true;
    paused.disabled = false;
      
    sound.play();
    timerId = window.setInterval ( changer0, 1500 );  //Subtitle play
    //timerId = window.setInterval ( changer1, 1500 );  //Subtitle play
}

reset.onclick = function resetClip() {		
    console.log( `
resetClip()` );    
    play.style.background = "";
    play.style.color = "";      
      
    reset.disabled = false;
    play.disabled = false;
    paused.disabled = false;
      
    sound.stop()
    document.getElementById('Radio1').checked = false;
    document.getElementById('Radio2').checked = false;
    document.getElementById('Radio3').checked = false;    
    
    i = 0	               //Subtitle reset
    changer0();	               //Subtitle reset
    //changer1();
    clearInterval( timerId );  //Subtitle reset
    
    console.clear();    
}
   
paused.onclick = function pausedClip() {		
    console.log( `
pausedClip()` );    
    play.style.background = "";
    play.style.color = "";		

    reset.disabled = false;
    play.disabled = false;
    paused.disabled = true;
    
    action.paused = true;
    sound.pause();    
    clearInterval( timerId );  //Subtitle paused
}
}

///// Subtitle_0 for Array_0 /////

var texter0 = new Array
    texter0[0]='Good day_0';
    texter0[1]='This is the text for array 0 radio 1 - 3';
    texter0[2]='';
    texter0[3]='Text for Array 0, to see the text for Array 1, press next.';
    texter0[4]='I am still looking for this solution.';
    texter0[5]='Many thanks for the help';
    texter0[6]='';
    texter0[7]='Ciao';
var i=0;
var timerId;

function changer0(){
    document.getElementById('transbox').innerHTML=texter0[i];
    i++;
    if(i==texter0.length-1) i = 0;
}

///// Subtitle_1 for Array_1 /////

var texter1 = new Array
    texter1[0]='Good day_1';
    texter1[1]='This is the text for array 1 radio 1 - 3';
    texter1[2]='';
    texter1[3]='Text for Array 1, to see the text for Array 3, press next.';
    texter1[4]='I am still looking for this solution.';
    texter1[5]='Many thanks for the help';
    texter1[6]='';
    texter1[7]='Ciao';
var i=0;
var timerId;

function changer1(){
    document.getElementById('transbox').innerHTML=texter1[i];
    i++;
    if(i==texter1.length-1) i = 0;
}



var info = document.getElementById("transbox");
    info.style.display = "none"; 
	
// Infobox display
function buttonShow() {  
    info.style.display = "";
}
// Infobox hidden
function buttonHide() {  
    info.style.display = "none";
}

#transbox {
    font-family:Arial,sans-serif;
    color:black;
    text-align:center;   
    margin-top:50px;			
}
#Radio1 {				
    margin-top: -267px;
    margin-left: 0px;
    vertical-align:middle;
}		
#Radio2 {			
    margin-top: -197px;
    margin-left: -20px;
    vertical-align:middle;
}			
#Radio3 {				
    margin-top: -125px;
    margin-left: -20px;
    vertical-align:middle;
}		
#arr1 {
    font-family:Arial,sans-serif; 
    font-size: 1em; 
    color:black;
    margin-top: 0px;
    margin-left: 20px;
}
#arr2 {
    font-family:Arial,sans-serif; 
    font-size: 1em; 
    color:black;
    margin-top: 0px;
    margin-left: 20px;
}
#arr3 {
    font-family:Arial,sans-serif; 
    font-size: 1em; 
    color:black;
    margin-top: 0px;
    margin-left: 20px;
}

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

<p id="arr1"></p>
<p id="arr2"></p>
<p id="arr3"></p>

<p id="clip0"></p>
<p id="clip1"></p>
<p id="clip2"></p>

<button type="button" onclick="buttonShow()">Subtitle Open</button>
<button type="button" onclick="buttonHide()">Subtitle Close</button>

<input type="button" id="prev_button" value="<< Prev" onclick= "prev_button">
<input type="button" id="next_button" value="Next >>" onclick= "next_button">

<form name=action>		
<input type="radio" id="Radio1" name="group1" autocomplete="off" onclick="check();"/>		
<input type="radio" id="Radio2" name="group1" autocomplete="off" onclick="check();"/>		
<input type="radio" id="Radio3" name="group1" autocomplete="off" onclick="check();"/>
</form>	

<button id="play" class="play">Play</button>
<button id="paused" class="paused">Pause</button>
<button id="reset" class="reset">Reset</button>

<body onLoad="changer0()">
<body onLoad="changer1()">
		
<div id="transbox"></div>

Answer 1

Waitting for answers