使用更改音频播放期间的锚文本/图标 <audio> 标签和Javascript

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，该方法由<a>标记的onclick事件调用。 该函数如下所示：

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

效果很好，但是在播放音频时，是否有任何方法可以将“ 真棒字体”扬声器图标更改为其他一些“真棒字体”图标？ 我知道通过添加代码来更改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图标。

附言：我知道这似乎适用于视频，但我想我也适用于音频。 希望我没有错