播放音频时显示图形

Displaying a graphic when audio is playing

本文关键字：显示图 图形 显示 音频 播放      更新时间：2023-09-26

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

在你的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

你必须用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();
}
相关文章：