javascript - 播放音频时显示图形

Question

试图找到一种方法来显示一个小的图形，以指示何时播放音频剪辑。类似于当前播放声音时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时它们开始播放。我们希望在任何音频剪辑开始播放时显示图形，然后在剪辑结束时隐藏图形。

Answer 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