使用'audio'并且只有JS和CSS（没有库）通过设置类来创建2个音频播放器样式

Question

我想创建2个不同的音频播放器，1个大型和1个小型。我希望能够通过设置类来设置直接在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>

上述代码存在以下几个问题：

1. 音频播放完毕后，“Pause”不会切换回 显示“播放”。
2. 如果页面上有多个玩家，则不会 目标this。
3. 它很笨重，需要写页面的人 添加大量代码。我想把大部分内容转移到JS和 CSS。

我觉得我完全走错了路，但是我找不到好的文档来让这个更简单。