<audio>
特定の html5 要素がホバーされるたびに特定の html5 要素を再生するスクリプトに取り組んでいます<div>
。jQueryを使用してホバーを検出し、音量をアニメーション化してオーディオをフェードイン/フェードアウトします。
これが私のコードです:
<head>
<!-- unrelated code removed -->
<script type="text/javascript">
$(document).ready(function(){
//unrelated code removed
$("#pog").mouseenter(function() {
$("#poga").get(0).volume=0;
$("#poga").get(0).play();
$("#poga").animate({volume: 1}, 1000);
});
$("#pog").mouseleave(function() {
$("#poga").animate({volume: 0}, 1000, function() {
$("#poga").get(0).pause();
});
});
});
</script>
</head>
<body>
<audio preload loop controls id="poga">
<source src="audio/phantogram.mp3"></source>
<source src="audio/phantogram.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
<div id="pog" class="band">Phantogram</div>
</body>
ここに jsFiddle があります: http://jsfiddle.net/2eG6s/
問題は、ボリューム アニメーションが非常に途切れ途切れであることです。一定間隔でフェードインとフェードアウトします (正確な音量はわかりませんが、100%、60%、20% のようなものです)。これは本当に奇妙で、Windows 7 の Firefox 21.0 および 22.0 でのみ発生します (Firefox 21.0 および 22.0 の Mac バージョンは正常に動作します)。
ヘルプ!