javascript - 如何更改点击图标？

我的页面上有一个看起来像这样的按钮:https://pierdzialka.misumi.me/d2TVS.png
一旦单击它，就会调用playPreview()播放音频文件。

var preview = document.getElementById("BeatmapPreview");
var isPlaying = false;

function playPreview() {
 if (isPlaying) {
  preview.pause();
  classList.toggle("play");
 } else {
  preview.play();
  classList.toggle("pause");
 }
};

preview.onplaying = function() {
 isPlaying = true;
};

preview.onpause = function() {
 isPlaying = false;
};

我正在尝试使其也将图标类从播放更改为暂停点击，代码如下:

<a onclick="playPreview()" class="ui blue labeled icon button">
  <i class="play icon"></i>
  {{ $.T "Play" }}
</a>

我该如何实现？
最后一点也是实际播放的音频，它放置在更上方，仅此而已:

<audio id="BeatmapPreview">
  <source src="https://misumi.me/preview/{{ .Beatmapset.ID }}.mp3">
</audio>

最佳答案

试试这个document.getElementById('yourIconElementId').classList.toggle("play");在classList之前添加图标元素选择器