JSFiddle - React, Tailwind, and code Playground

HTML

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

<input type="radio" id="clip1" name="myCheckbox" autocomplete="off" onclick="myCheckbox"/>
<p id="Message1">load audio 1 for test</p>		
<input type="radio" id="clip2" name="myCheckbox" autocomplete="off" onclick="myCheckbox"/>
<p id="Message2">load audio 2 for test</p>
<input type="radio" id="clip3" name="myCheckbox" autocomplete="off" onclick="myCheckbox"/>
<p id="Message3">load audio 3 for test</p>	

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

<input type="button" value="<< Prev" name="nextSession" onclick="nextSession">
<input type="button" value="Next >>" name="nextSession" onclick="nextSession">

CSS

#Message1 {
				font-family:Arial,sans-serif; 
				font-size: 1em; 
				color:black;
				margin-top: -20px;
				margin-left: 30px;
			}
#Message2 {
				font-family:Arial,sans-serif; 
				font-size: 1em; 
				color:black;
				margin-top: -20px;
				margin-left: 30px;
			}
#Message3 {
				font-family:Arial,sans-serif; 
				font-size: 1em; 
				color:black;
				margin-top: -20px;
				margin-left: 30px;
			}

JavaScript

//Experiment to load with Next and Prev.
  
  var curSession = 0;
	var Session1 = [
    'clip1',
    'clip2',
    'clip3'    
	];
  var Session2 = [
  	'clip4',
    'clip5',
    'clip6'
  ];
 
	function nextSession(direction) {
    	if (direction == 'next') {
       	 	curSession++;
 
        if (curSession == 2) {
            curSession = 0;
        }
    	} else {
        	curSession--;
        // even reset the counter here when
        // its getting 0
    	} 
   
	}

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

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

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

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