JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>

 

  <head>
	
	<meta charset="utf-8">
	<title>?!?</title>
	<link rel="stylesheet" href="style.css">
	<script src="java.js"></script>
	<script src="https://kit.fontawesome.com/231bb1e68e.js" crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
  </head>

 

  <body>
	<h1>vie silencieuse</h1>
	<div class="text">
		<button class="bouton1" id="play2">
			<i class="fa-solid fa-play"></i>
			<!--<i class="fa-solid fa-pause"></i>-->

		</button>
		<audio src="pluie d'oiseau.mp3" id="audio"></audio>
		
		<p>
			La simple énumération des choses représentées sur la toile,<br>
			puis de l’étude de la singulière manière du peintre, de son « faire »,<br>
			se révèlent impuissants à expliquer la véritable beauté des oeuvres.<br>
			C’est donc ce mouvement de l’écriture vers un inévitable silence de la peinture<br>
			qu’il s’agissait de tracer, mouvement qui passe des objets au « technique »,<br>
			et qui se perd, enfin, dans l’homme.
		</p>
	</div>
	<div>
		<p>
			
			
			
		</p>
	</div>
	<div class="playlist barre" id="musique-contenant">
		<button class="action-btn" id="precedent">
			<i class="fa-solid fa-backward"></i>
		</button>
		<button class="action-btn" id="play">
			<i class="btn-play fa fa-play" aria-hidden="true"></i>
			<!--<i class="btn-pause fa fa-pause" aria-hidden="true"></i>-->
		</button>
		<button class="action-btn" id="suivant">
			<i class="fa-solid fa-forward"></i>
		</button>
		<ol>
			<li id="un">Alma<audio src="musique/Alma.mp3" id="audio"></audio></li>
			<li id="deux">Prayer<audio src="musique/Prayer.mp3" id="audio"></audio></li>
			<li id="trois">Articulate<audio src="musique/Articulate.mp3" id="audio"></audio></li>
			<li id="quatre">Glissent les feuilles<audio src="musique/Glissent les feuilles.mp3" id="audio"></audio></li>
			<li id="cinq">I<audio src="musique/I.mp3"...

CSS

body{
  background-color:black;
  color: white;
  font-family: machine;
  font-size: 25px;
  font-family: 'storaregular';
  background-image:url(vide.jpg);
  background-repeat:no-repeat;
}
 button{
	 margin: auto;
	 border:0;
	 background-color: transparent;
	 color:#fff9e1;
	 cursor:pointer;
 }
 li{
	 cursor:pointer;
 }
 li:hover{
  font-size: 25px;
  color: black;
  background: white;
  cursor:pointer;
}
 h1{
	 text-align:center;
	 font-size: 450%;
 }

.text{
	float:left;
	
}
 .bouton1{
	width: 200px;
	 font-size:100px;
	 padding:10px;
 }
 .playlist{
	 float:right;
	 
 }
 .navigation{
	 display:flex;
	 align-content:center;
	 justify-content:center;
	 z-index:1;
 }
 .action-btn{
	 border:0;
	 font-size:30px;
	 padding:10px;
	 margin:0 30px;
 }

.barre{
	border-left: 2px solid white;
}
@font-face {
    font-family: 'storaregular';
    src: url('stora-webfont.woff2') format('woff2'),
         url('stora-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

JavaScript

//const btnPlay2=document.getElementById('play2');
		
		const btnPlay=document.getElementById('play');
		const btnPrecedent=document.getElementById('precedent');
		const btnSuivant=document.getElementById('suivant');
		
		const musiqueContenant=document.getElementById('musique-contenant');
		const audio=document.getElementById('audio');
		
		
		const chansonsArr=["Alma","Prayer","Articulate","Glissent les feuilles","I"];
		
		const titre1=document.getElementById('un');
		const titre2=document.getElementById('deux');
		const titre3=document.getElementById('trois');
		const titre4=document.getElementById('quatre');
		const titre5=document.getElementById('cinq');

		let ordreChanson=0;
		
		function telechargerChanson(chanson){
			titre.innerText=chanson;
			audio.src=`musique/${chanson}.mp3`;
		}

		
		telechargerChanson(chansonsArr[ordreChanson]);
		changeNom(nom[ordreChanson]);
		
		function playChanson(){
			musiqueContenant.classList.add('play');
			btnPlay.querySelector('i.fa').classList.remove('fa-play');
			btnPlay.querySelector('i.fa').classList.add('fa-pause');
			audio.play();
			
		}
		
		function pauseChanson(){
			musiqueContenant.classList.remove('play');
			audio.pause();
			
			btnPlay.querySelector('i.fa').classList.add('fa-play');
			btnPlay.querySelector('i.fa').classList.remove('fa-pause');
		}
		
		function chansonPrecedente(){
			ordreChanson--;
			if(ordreChanson<0)
				ordreChanson=0
			telechargerChanson(chansonsArr[ordreChanson]);
			changeNom(nom[ordreChanson]);
			playChanson();
		}
		
		function chansonSuivante(){
			ordreChanson++;
			if(ordreChanson>chansonsArr.length-1){
				ordreChanson=0
			}
			telechargerChanson(chansonsArr[ordreChanson]);
			changeNom(nom[ordreChanson]);
			playChanson();
		}
		
			
		
		function cliqueMusique1(){
			ordreChanson=0
			
			telechargerChanson(chansonsArr[ordreChanson]);
			changeNom(nom[ordreChanson]);
			playChanson();
		
		}
		function...