jquery - 仅在可见div时播放声音文件？

Question

我正在使用jquery在3秒后淡入div。我现在想做的是设置某种if语句，以便在div“dashboard_right2”可见时进行播放。

目前，我正在使用此html5音频脚本来启动页面加载时播放的声音文件，但是我希望仅在div“dashbaord_right2”可见的情况下播放声音文件。有人可以告诉我如何做到这一点，谢谢。

音频代码:

<audio src="assets/music/sound_file.mp3" autoplay>
</audio>
<script>
var audio = document.createElement("audio");
if (audio != null && audio.canPlayType && audio.canPlayType("audio/mpeg"))
{
audio.src = "audio/sample.mp3";
audio.play();
}
</script>
<audio src="data:audio/mpeg,ID3%02%00%00%00%00%..." autoplay>
</audio>

使用jquery在3秒后消失的div:

<script>
$('.dashboard_right2').hide(); // this or use css to hide the div
$('.dashboard_right2').delay(2000).fadeIn('slow');
</script>

Answer 1

您可以这样:

$('.dashboard_right2').delay(2000).fadeIn('slow', function() {
  // play your audio
  audio.play();
});

和

$('.dashboard_right2').hide();
audio.pause();

例如:

<div id="toggleMusic">Toggle Music</div>

<audio id="audio" src="assets/music/sound_file.mp3" autoplay>

<script type="text/javascript">
$("#toggleMusic").click(function() {
   var audio = document.getElementsByTagName('audio')[0];

   if($(".dashboard_right2").is(":visible")) {
      // hide the dashboard and pause the music
      $('.dashboard_right2').hide();
      audio.pause();
   } else {
      // show the dashboard and start the music
      $('.dashboard_right2').delay(2000).fadeIn('slow', function() {
         audio.play();
      });
   }
});
</script>

如果只需要在页面加载时添加 fadeIn()，则应使用 toggle()方法隐藏/显示您的元素:

$('.dashboard_right2').toggle(0, function() {
   if($('.dashboard_right2').is(':visible')) {
      audio.play();
   } else {
      audio.pause();
   }
});