静的サイトに設置したaudioタグに関連する挙動について

説明力不足によりややこしくしてしまっていたらすみません。
解決策がお分かりの方、お力いただけますと幸いです。

概要

・静的サイトにaudioタグで2つのmp3を再生させたいと思い以下コードを作成しました。
・hoverで背景を #E36D3E にした際に、再生のボタン画像（.svg）とテキストを白に変化させる動きをつけたいが、うまくいかない

html
<div class="voice ja">
  <audio id="bgm1">
    <source src="images/voice_ja.mp3" type="audio/wav">
  </audio>
  <!-- 再生ボタン -->
  <div id="btn-play" type="button">
    <img src="images/voice.svg" class="play"><img src="images/play_white.svg" class="play-white"><span>音声１</span>
  </div>
</div>
<div class="voice">
  <audio id="bgm2">
    <source src="images/voice_en.mp3" type="audio/wav">
  </audio>
  <div id="btn-play2" type="button">
    <img src="images/voice.svg"><span>音声２</span>
  </div>
</div>

scss
.voice{
  width: 330px;
  background: rgb(97 86 83 / 30%);
  padding: 12px 15px;
  margin-top: 15px ;
  img{
    vertical-align: middle;
    margin-right: 14px;
    width: 26px;
    height: 26px;
  }
  span{
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 0.1em;
  }
  .play-white{
    display: none;
  }
  &:hover{
    background: #E36D3E;
    span{
      color: #fff;
    }
    .play{
      display: none;
    }
    .play-white{
      display: inline-block;
    }
  }
}

JavaScript
$(function(){

  const bgm1 = document.querySelector("#bgm1");       // <audio>
  const btn1  = document.querySelector("#btn-play");   // <button>
  const bgm2 = document.querySelector("#bgm2");       // <audio>
  const btn2  = document.querySelector("#btn-play2");   // <button>

  btn1.addEventListener("click", ()=>{
    // pausedがtrue=>停止, false=>再生中
    if( ! bgm1.paused ){
      btn1.innerHTML = '<img src="images/voice.svg">'+'<span>音声1</span>';  // 「再生ボタン」に切り替え
      bgm1.pause();
    }
    else{
      btn1.innerHTML = '<img src="images/pause.svg">'+'<span>音声1</span>';  // 「一時停止ボタン」に切り替え
      bgm1.play();
    }
  });

  btn2.addEventListener("click", ()=>{
    // pausedがtrue=>停止, false=>再生中
    if( ! bgm2.paused ){
      btn2.innerHTML = '<img src="images/voice.svg">'+'音声２</span>';  // 「再生ボタン」に切り替え
      bgm2.pause();
    }
    else{
      btn2.innerHTML = '<img src="images/pause.svg">'+'音声2</span>';  // 「一時停止ボタン」に切り替え
      bgm2.play();
    }
  });


  bgm1.addEventListener("ended", ()=>{
    bgm1.currentTime = 0;  // 終了時再生位置を先頭に移動
    btn1.innerHTML = '<img src="images/voice.svg">';  // 「再生ボタン」に変更
  });
  bgm2.addEventListener("ended", ()=>{
    bgm2.currentTime = 0;  
    btn2.innerHTML = '<img src="images/voice.svg">';  
  });
});

試したこと

・imgタタグ２つ用意し、通常とhoverで表示させるimgを分けた
→hoverは白になったのでOKだが、再生・一時停止をした際にscript.jsで設定している茶色いボタン（通常時のもの）になってしまう。その後hoverしても白いアイコンには切り替わらない。

やりたいこと

再生する際・一時停止する際・再度再生する際、
hoverしている時はplay_white.svg やpause_white.svg の白い画像に差し替えたい
（上の記述の中にpause_white.svgはありません...どこに入れればいいか分からず... ; ;）

JavaScriptに関してはほとんど知識がなく、様々な記事を参考にここまで作成いたしましたが、色変更のところでつまずいてしまい、どうしようもできなくなってしまいました。
「やりたいこと」に書いてある挙動ができれば、上記のコードは大きく変わっても構いません。
お力いただけるかたいらっしゃいましたらどうぞよろしくお願いいたします。