Musik abspielen, wenn Sie in ein Eingabefeld innerhalb von html mit jQuery einfügen/focus/blur setzen

Question

// Ich möchte, wenn Sie in das Eingabefeld gehen, beginnt die Musik zu spielen, wenn Sie das Feld mouseout, stoppt die Musik.

// Ich habe folgende embed-Tags innerhalb des Körpers von html:

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

// Innerhalb js Skript:

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

Leider habe ich versucht, Fokus, verwischen, keyup ... es funktioniert nicht. (Wenn ich den Pfad sofort auf das Attribut src des Tags embed setzen, wird die Musik beim Laden der Seite abgespielt)

Answer 1

Versuchen Sie, ein neues Element hinzuzufügen, anstatt src zu ändern.

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

Answer 2

Dies funktioniert korrekt in meiner Anwendung, nur versuchen Audio Tag an seinem Platz zu verwenden, von Tag einbetten. ändern

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

und dann das Skript wie folgt aus:

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

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

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

können Sie verwenden .blur() oder .focusout() Funktion (die immer für Sie arbeitet) von jquery die Musik zu stoppen, wenn die Kontrollverluste Fokus:

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

Answer 3

Ich versuchte dies und arbeitete !!!

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