javascript - 使用 标签和 Javascript 在音频播放期间更改 anchor 文本/图标

Question

我正在使用 HTML <audio>标签以在我的页面上添加短 MP3 剪辑 (~6-8kb)。我使用服务器端 PHP 添加标签，如下所示:

$soundnode->appendXML('<span class="sound"><audio id="yourAudio" preload="none"><source src="' . $soundlink . '" 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-up pronounce"></i></a></span>');
$node->appendChild($soundnode);

在页面上，标签如下所示:

<span class="sound">
   <audio id="yourAudio" preload="none">
      <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-up pronounce"></i>
   </a>
</span>

为了播放上述音频文件，我使用 playclip() 形式的 JavaScript由 onclick 调用的方法事件<a>标签。这个函数看起来像这样:

function playclip(){
    var yourAudio = document.getElementById('yourAudio');
    yourAudio.play();
    return false;
}

这很好用，但是有什么方法可以在播放音频时将 Font Awesome 扬声器图标更改为其他 Font Awesome 图标吗？我知道通过添加代码来更改 playclip() 中的标签很容易做到这一点功能。但是，我不知道如何确保更改仅在剪辑播放时应用，然后在播放结束后恢复为原始状态。

Answer 1

应该不会太难。

使用 onplay 和 onpause 事件: http://www.w3schools.com/jsref/event_onplay.asp http://www.w3schools.com/jsref/event_onpause.asp

<audio id="yourAudio" preload="none" onplay="boo()" onpause="bong()">

并在这些函数中，更改 fa 图标。

p.s 我知道它似乎适用于视频，但我认为我也适用于音频。希望我没有错