Javascript 在HTML audio onplay（）事件期间，对字体图标的效果进行动画处理

我有一个HTML

标记，设置如下：

<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>

2。playing（）：此函数在文件播放时更改图标

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音量关闭

、

fa音量下降

、和

fa音量上升

类之间循环图标，例如每个循环0.8秒，然后在合一（）时返回到

fa音量下降

触发器？

我认为对您最有用的是使用GIF。有很多你可以免费或付费使用。因此，您必须做的唯一一件事就是与函数playing（）相同，但例如使用以下图像：

---

我刚刚在AngularJS应用程序中做了一些类似的事情。 我通过在一个间隔中嵌套一些超时来实现这一点，并取消了间隔。 我通过向“播放”和“结束”事件添加.on侦听器来启动和停止这些事件：

var icon = document.getElementsByClassName("pronounce")[0];
var myInterval;

var audioEl = document.querySelector('audio');

// during play
audioEl.on('playing', function(){
    // myInterval = $interval(function(){ // AngularJS way
    myInterval = setInterval(function(){
        icon.className = 'fa-volume-off'

        // $timeout(function(){ // AngularJS way
        setTimeout(function(){
            icon.className = 'fa-volume-down'
        },333);
        setTimeout(function(){ // $timeout
            icon.className = 'fa-volume-up'
        },667);
    });
});

// stop the interval on end
audioEl.on('ended', function(){
    // $interval.cancel(myInterval); // angularjs
    clearInterval(myInterval);
}

var icon = document.getElementsByClassName("pronounce")[0];
var myInterval;

var audioEl = document.querySelector('audio');

// during play
audioEl.on('playing', function(){
    // myInterval = $interval(function(){ // AngularJS way
    myInterval = setInterval(function(){
        icon.className = 'fa-volume-off'

        // $timeout(function(){ // AngularJS way
        setTimeout(function(){
            icon.className = 'fa-volume-down'
        },333);
        setTimeout(function(){ // $timeout
            icon.className = 'fa-volume-up'
        },667);
    });
});

// stop the interval on end
audioEl.on('ended', function(){
    // $interval.cancel(myInterval); // angularjs
    clearInterval(myInterval);
}