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

你必须使用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();
}

Answer 2

在你的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 个答案: