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我知道它似乎是它的视频，但我想我也适用于音频。希望我没错。

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

1 个答案: