стилизация тега Audio html

const audios = document.getElementsByClassName('custom-audio');

for (let element of audios) {
  let audio = element.querySelector('audio');
  let playBtn = element.querySelector('#play');
  let pauseBtn = element.querySelector('#pause');

  playBtn.addEventListener('click', () => {
    let playing = document.querySelector('.custom-audio > .audio-btn.pause:not(.hide)');
    if (playing) {
      playing.classList.add('hide');
      let playBtn = playing.parentElement.querySelector('.custom-audio > .audio-btn.play.hide');
      playBtn.classList.remove('hide');
    }

    pauseBtn.classList.remove('hide');
    playBtn.classList.add('hide');
    audio.play();
  });

  pauseBtn.addEventListener('click', () => {
    pauseBtn.classList.add('hide');
    playBtn.classList.remove('hide');
    audio.pause();
  });
}

.audio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  width: 320px;
  padding: 12px;
  border: 1px solid #000;
  border-radius: 12px;
}

.audio .left {
  height: 100%;
  display: flex;
  align-items: center;
}

.audio .image {
  height: 100%;
}

.audio img {
  height: 100%;
  margin-right: 16px;
}

.audio-btn {
  cursor: pointer;
}

.hide {
  display: none;
}

<div class="audio custom-audio">
  <audio src="path/to/file" id="audio"></audio>
  <div class="left">
    <div class="image">
      <image src="https://upload.wikimedia.org/wikipedia/ru/thumb/c/c4/Luis_Fonsi_Feat._Daddy_Yankee_-_Despacito.png/274px-Luis_Fonsi_Feat._Daddy_Yankee_-_Despacito.png">
    </div>
    <div class="title">Despacito </div>
  </div>

  <div id="play" class="audio-btn play">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-play" viewBox="0 0 16 16"> <path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"/></svg>
  </div>
  <div id="pause" class="audio-btn pause hide">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-pause" viewBox="0 0 16 16"> <path d="M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z"/></svg>
  </div>
</div>

<div class="audio custom-audio">
  <audio src="path/to/file" id="audio"></audio>
  <div class="left">
    <div class="image">
      <image src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Baby_shark_dance%2C_Andersen.jpg/200px-Baby_shark_dance%2C_Andersen.jpg">
    </div>
    <div class="title">Baby Shark </div>
  </div>

  <div id="play" class="audio-btn play">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-play" viewBox="0 0 16 16"> <path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"/></svg>
  </div>
  <div id="pause" class="audio-btn pause hide">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-pause" viewBox="0 0 16 16"> <path d="M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z"/></svg>
  </div>
</div>