jQueryを使用してhtml内の入力フィールドに挿入/フォーカス/ブラーを適用すると音楽を再生します

Question

//入力フィールド内に入ると音楽が再生され、フィールドをマウスアウトすると音楽が停止します。

//私は、HTMLの体内以下embedタグを持っている：

<form id="myForm" action="userInfo.php" method="POST"> 
    <input type="text" name="name1" required="required" /> <br /> 
</form> 
<embed src="" autostart="true" loop="true" width="2"  height="0"></embed> 

//内部のjsスクリプト：

$(document).ready(function()){ 
    $("#myForm :input").focus(function(){ 
     $("embed").attr("src", "music/mysong.mp3"); 
    }); 
}); 

は残念ながら、私は...からkeyup、それをぼかし、フォーカスを試してみました動作しません。 （私はembedタグのsrc属性にすぐにパスを入れた場合は、ページをロードするとき、音楽の再生開始）

Answer 1

ではなくsrcを変える新たな要素を追加してください。

$(document).ready(function()){ 
    $("#myForm :input").focus(function(){ 
     element = $("embed"); 
     newEl = element.clone().attr("src", "music/mysong.mp3") 
     element.replaceWith(newEl); 
    }); 
}); 

Answer 2

これは正しくちょうどの代わりにオーディオタグを使用しようと、自分のアプリケーションに取り組んでいるがタグを埋め込みます。その後、

<audio id="musicplay" autoplay="autoplay" loop="true"> 
     <source src="~/music/mysong.mp3" type="audio/mpeg" /> 
    </audio> 

と、次のようにスクリプトを変更します。

$(document).ready(function()){ 

     $('#musicplay').get(0).pause(); 

     $("#myForm :input").focus(function(){ 
      $('#musicplay').get(0).play(); 
     }); 
    }); 

あなたは時に音楽を停止する.blur（）を使用するか、jqueryのの（今まであなたのために働く）.focusout（）関数をすることができますコントロールの損失のフォーカス：

$("#myForm :input").blur(function() { 
    $('#musicplay').get(0).pause(); 
    }); 

Answer 3

私はこれを試して、働いた！

    $("#myForm :input").focus(function(){ 

        $("embed").attr("src", "music/mysong.mp3"); 

        //element = $("embed"); 
        newEl = $("embed").clone().attr("src", "music/mysong.mp3"); 
        $("embed").replaceWith(newEl); 
       }); 


       $("#myForm :input").focusout(function(){ 

        $("embed").attr("src", ""); 

        //element = $("embed"); 
        newEl = $("embed").clone().attr("src", ""); 
        $("embed").replaceWith(newEl); 
       });