Javascript 使用'；音频'；只有JS和CSS（不带库）通过设置类创建2种音频播放器样式

我想创建两个不同的音频播放器，一个大一个小。我希望能够通过设置一个类来设置在HTML中直接显示哪一个

大的应该有一个播放/暂停按钮图标和进度条，这将占据它自己的网页行。小图标只有一个播放按钮图标（使用SVG），它可以根据当前状态（播放或暂停）进行切换，可以在线显示在网页上

这是我最希望能够使用的HTML：

<audio class="small">
  <source src="mysound.ogg" type="audio/ogg">
  <source src="mysound.mp3" type="audio/mpeg">
</audio>

我一直在玩它，这是我能得到的最接近的：

<div class="audio">
   <audio id="player" src="mysound.mp3"></audio>
   <a id="button" title="button">Play</a>
</div>

<script>
$(document).ready(function() {
  var playing = false;

  $('a#button').click(function() {
      $(this).toggleClass("down");

      if (playing == false) {
          document.getElementById('player').play();
          playing = true;
          $(this).text("Pause");

      } else {
        document.getElementById('player').pause();
        playing = false;
        $(this).text("Play");
      }
  });
});
</script>

玩
$（文档）.ready（函数（）{
var=false；
$（'a#按钮'）。单击（函数（）{
$（this.toggleClass（“向下”）；
如果（播放==错误）{
document.getElementById（'player'）.play（）；
玩=真；
$（此）.text（“暂停”）；
}否则{
document.getElementById（'player'）.pause（）；
玩=假；
$（此）.text（“播放”）；
}
});
});

上述代码存在几个问题：

音频播放结束后，“暂停”不会切换回 显示“播放”

如果页面上有多个播放机，则不会 目标

此

这是笨重的，需要人写的网页 添加大量代码。我想将大部分内容转移到JS和 CSS

我觉得我完全走错了方向，但是我找不到好的文档来简化这个过程