javascript - HTML音频onplay()事件期间，对超赞字体图标的动画效果

Question

我有一个HTML <audio>标记设置如下:

<span class="sound">
   <audio id="yourAudio" preload="none" onplay="playing();" onended="stopped();">
      <source src="bootstrap/pronunciations/jjugar01sp.mp3" type="audio/mpeg">
   </audio>
   <a href="javascript:;" id="audioControl" onclick="playclip();" data-toggle="tooltip" data-original-title="Hear it spoken">
      <i class="fa fa-2x fa-volume-down pronounce"></i>
   </a>
</span>

有3个JS函数可实现此目的。

1. playclip():单击此图标时，此功能播放mp3文件。

function playclipwotd(){
    var wotdAudio = document.getElementById('wotdAudio');
    wotdAudio.play();
    return false;
}

2.播放():此功能可在播放文件时更改图标。

function playing(){
    var icon = document.getElementsByClassName("pronounce")[0];
    icon.className = "fa fa-2x fa-volume-up pronounce";
}

3. Stopped():文件播放完毕后，此功能会将图标更改回原始图标。

function stopped(){
    var icon = document.getElementsByClassName("pronounce")[0];
    icon.className = "fa fa-2x fa-volume-down pronounce";
}

这很棒，并且按预期工作。但是，如果可能的话，我试图在这里使用 playing()函数来尝试更多冒险。目前，该图标显示为fa-volume-down，在播放过程中更改为fa-volume-up，并在播放结束后返回fa-volume-down。这是为了给用户提供音频打开的视觉提示。如果可能的话，我想添加的是一种在播放过程中对扬声器图标进行动画处理的方式，以给人一种正在播放的感觉。例如，是否有可能以某种方式在整个播放过程中循环fa-volume-off，fa-volume-down和fa-volume-up类之间的图标循环(每个循环0.8秒)，然后在 onended()触发器触发时返回fa-volume-down？

Answer 1

我认为对您最有用的是使用gif。您可以免费或付费使用其中的许多软件。因此，您唯一要做的就是使用函数play()进行操作，但使用例如以下图像:
http://thebontotrecords.webs.com/images_smile/Music_Animation.gif