播放音频时显示图形答案

【问题标题】：Displaying a graphic when audio is playing播放音频时显示图形
【发布时间】：2014-08-06 13:07:12
【问题描述】：

试图找到一种方法来显示一个小图形以指示音频剪辑何时播放。类似于当前播放声音时在 Chrome 的标签中显示图标的方式，但在实际页面上显示为 gif 或类似的方式。

这是音频剪辑显示方式的简化版本：

<script type="text/javascript">
      function playSound(el,soundfile) {
          if (el.mp3) {
              if(el.mp3.paused) el.mp3.play();
              else el.mp3.pause();
          } else {
              el.mp3 = new Audio(soundfile);
              el.mp3.play();
          }
      }
</script>

<div onclick="playSound(this, '<?php echo htmlentities($filepath, ENT_QUOTES, 'UTF-8'); ?>');">

在时间轴中显示的页面上的许多文件链接，当单击 div 时，它们开始播放。我们希望在任何音频剪辑开始播放时显示图形，然后在剪辑结束时隐藏。

【问题讨论】：

什么音频剪辑？有代码吗？
感谢您的回复。我添加了更多信息和代码
您应该将 Javascript / jQuery 标签添加到您的问题中。

标签： javascript html css audio

【解决方案1】：

在你的 html 中，你会在某个地方找到它：

<img id="playimg" src="url_of_img" />

在你的 javascript 代码中：

<script type="text/javascript">

      function playSound(el,soundfile) {
          if (el.mp3) {
              if(el.mp3.paused){
                   el.mp3.play();
                   document.getElementById("playimg").style.visibility = "visible";
              }
              }else {
                   el.mp3.pause();
                   document.getElementById("playimg").style.visibility = "hidden";
              }
          } else {
              el.mp3 = new Audio(soundfile);
              el.mp3.play();
              document.getElementById("playimg").style.visibility = "visible";
          }
      }
</script>

现场示例，但不完全是这个脚本，因为我没有播放 mp3 文件的脚本：http://codepen.io/anon/pen/Iqadf

【讨论】：

【解决方案2】：

您必须使用 JavaScript 来完成。您可以使用 jQuery 显示/隐藏您的图形：

假设您的图形具有 id：#sound_playing

html：

<img id="sound_playing" src="sound_playing.png" />

JavaScript：

$sound_playing = $('#sound_playing');

if (your_sound.paused == false) {
    $sound_playing.show();
    alert('music is playing');
} else if {
    $sound_playing.hide();
}

【讨论】：