mouseoverイベントでHTML5オーディオを再生しようとしています

Question

なぜこのスクリプトはうまく動作しないのかわかりませんが、実行するとエラーは発生しません。私はqTip 2を実行していて、このスクリプトがどのように相互作用するかの違いがあればそれを実行しています。

ここに私のスクリプトがあります。

JS

<script type="text/javascript"> 
var $j = jQuery.noConflict(); 

var growlSound = $j("#growlSound")[0]; 
$j("#growl") 
    .mouseenter(function() { 
      growlSound.play(); 
    }); 

var laughSound = $j("#laughSound")[0]; 
$j("#laugh") 
    .mouseenter(function() { 
      laughSound.play(); 
    }); 

</script> 

HTML

<audio id="growlSound" preload="auto"> 
          <source src="/messages4u/2011/images/october/growl.ogg"> 
          <source src="/messages4u/2011/images/october/growl.mp3"> 
          Your browser does not support HTML5 Audio. Please Upgrade Your Browser. 
        </audio> 
          <audio id="laughSound" preload="auto"> 
          <source src="/messages4u/2011/images/october/laugh.ogg"> 
          <source src="/messages4u/2011/images/october/laugh.mp3"> 
          Your browser does not support HTML5 Audio. Please Upgrade Your Browser. 
        </audio> 
    <p><img src="/messages4u/2011/images/october/halloween4.jpg" width="600" border="0" usemap="#Map" class="center" style="width: 600px;" /> 
     <map name="Map" id="Map"> 
     <area class="growl" id="growl" style="cursor:default;" shape="rect" coords="117,118,225,223" href="#" /> 
     <area class="laugh" id="laugh" style="cursor:default;" shape="rect" coords="255,244,308,292" href="#" /> 
     </map> 
</p> 

私はmouseoverイベントにオーディオを再生しようとしています見ることができるように。私はこれを動作させることはできませんが、エラーがどこにあるかわかりません。

UPDATE - mouseenterイベントが機能していません表示されます。

Answer 1

他にもいくつかの要因があります。私はここでもっと簡単な例を作りました。あなたがMouseEnterイベントをトリガするために失敗し、何らかの形で、ある

をリンクあなたのオーディオファイルが正しくありません

• ：（Chromeで）動作しているようだ：

  http://jsfiddle.net/5PnCt/2/

  それはその可能性イベント

• あなたは正しくテストするには、イベント

に結合されていません次のような場合は、

 console.log('playing'); 

...のように入力してください。イベントが発生すると、ログメッセージが表示されます。三番目のケースの場合

、あなたは、彼らが影響を与えるHTML後にスクリプトを置くか、あなたは彼らがHTMLをロードするまで実行されないことを確認するために、次のラッパーを使用していることを確認してください：

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 
    ...code goes here... 
}); 

あなたは要素にページが存在しない場合は要素を選択してバインドできないため、コードの順序が重要です。この問題を回避するには、document.readyを使用する方法があります。スクリプトを実行しようとする前に、ページが完全にロードされるまでjQueryに指示します。