Воспроизведение музыки при вставке/фокусе/размытии в поле ввода внутри html с помощью jQuery

Question

// Я хочу, когда вы войдете в поле ввода, музыка начнет воспроизводиться, когда вы выходите на поле, музыка останавливается.

// У меня есть следующий код вставки тег внутри тела 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> 

// Inside сценарий расслоение плотной:

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

К сожалению, я пытался сосредоточиться, размытие, KeyUp ... это не работает. (Если я сразу же положу путь к атрибуту 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() или .focusout() функция (которая когда-либо работает для вас) из JQuery, чтобы остановить музыку, когда контрольные потери фокус:

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