html, JavaScriptで、一つの関数で複数の音楽の再生/停止を切り替えられて、audioタグを使わないボタンのコード例

<script>
const audioElements = {};
function btn(filePath, button) {
  if (!audioElements[filePath]) {
      // 新しい音声ファイルを再生
      audioElements[filePath] = new Audio(filePath);
      audioElements[filePath].play();
      button.classList.add('playing'); // ボタンのスタイルを変更

      // 音声再生終了時のイベントハンドラを設定
      audioElements[filePath].addEventListener('ended', function() {
          button.classList.remove('playing'); // ボタンのスタイルを元に戻す
          delete audioElements[filePath]; // オブジェクトから削除
      });} else {
      // 既存の音声ファイルを停止
      audioElements[filePath].pause();
      audioElements[filePath].currentTime = 0; // 音声を最初から再生できるようにリセット
      delete audioElements[filePath]; // オブジェクトから削除
      button.classList.remove('playing'); // ボタンのスタイルを元に戻す
  }}
</script>
<style>

button{
  background-color: #47848b;
  color: white;
  border-radius: 1em;border-width: 0;
  &:hover {
    background-color: #4d9fa9;
  }
  &.playing {
    background-color: #14656e; /* 再生中のボタンの背景色を変更 */
  }
}

</style>
<button onclick="btn('1.mp3', this)">ボタン1</button>
<button onclick="btn('2.mp3', this)">ボタン2</button>
<button onclick="btn('3.mp3', this)">ボタン3</button>