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。 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";
}

这很棒并且按预期工作。但是，如果可能的话，我正在尝试使用播放（）功能进行更多冒险。目前，该图标显示为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

Answer 2

我在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);
}

HTML音频onplay（）事件期间对font-awesome图标的动画效果

2 个答案: