在音频播放期间使用<音频>标签和Javascript

我正在使用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>

为了播放所述音频文件，我使用由<a>标签的onclick事件调用的playclip()方法形式的JavaScript。此功能如下所示：

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

这很好，但在播放音频时，有没有办法将Font Awesome扬声器图标更改为其他字体Awesome图标？我知道通过添加代码来更改playclip()函数中的标记很容易做到这一点。然而，我不知道如何确保更改仅在片段播放时适用，然后在播放结束后恢复为原始更改。