JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Управление звуком</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <audio  src="https://onlinetestcase.com/wp-content/uploads/2023/06/100-KB-MP3.mp3" controls></audio><br>
  <a class="btn waves-effect light-blue darken-1" id="playButton"><i class="material-icons right">play_arrow</i>Запустить</a><br>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
   $(document).ready(function() {
     var audioElement = $('audio')[0];
     $('audio').on('ended', function() {
        console.log('Воспроизведение аудио завершено');
        $('#playButton').removeClass('red');
        $('#playButton').addClass('light-blue');
        $('#playButton').html('<i class="material-icons right">play_arrow</i>Запустить');
     });
     $('#playButton').click(function() {
       if (audioElement.paused) {
         console.log('Аудио на паузе - запускаем ...');
         $('#playButton').removeClass('light-blue');
         $('#playButton').addClass('red');
         $('#playButton').html('<i class="material-icons right">pause</i>Остановить');
         audioElement.play();
       } else {
         console.log('Аудио воспроизводится - останавливаем ...');
         $('#playButton').removeClass('red');
         $('#playButton').addClass('light-blue');
         $('#playButton').html('<i class="material-icons right">play_arrow</i>Запустить');
         audioElement.pause();
       }
     });
   });
 </script>
</body>
</html>