仅当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> 

的div使用jQuery在3秒钟后消失在：

<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(); 
    } 
});