当隐藏输入更改值时播放音频 - Play audio when hidden input change value

Play audio when hidden input change value

本文关键字：播放音频隐藏输入 | 更新日期: 2023-09-26

当隐藏的输入字段更改值时，我需要播放音频文件。这个隐藏的输入在<table>中，它由Ajax刷新以更新值。

我需要做的是，(例如(当值变为"是"时，需要播放Clap.wav，否则，当值变成"否"时，必须播放boo.wav。

有人可以给我一个示例代码或一个想法吗？感谢那些愿意提供帮助的人。

这是我的一些代码

这是隐藏的输入字段代码。它位于platinum.php 上id为connExcel的表上

<input type="hidden" name="indVal" id="indVal" value=" <?php echo $objWorksheet->getCellByColumnAndRow(5, 5)->getOldCalculatedValue();  ?> ">

下面是我的一些Ajax代码

xmlHttp.onreadystatechange=function(){ 
    if(xmlHttp.readyState==4){ 
    document.getElementById('connExcel').innerHTML=xmlHttp.responseText;
        setTimeout('AutoRefresh()',100); // JavaScript function calls AutoRefresh() every 3 seconds
    }
}
xmlHttp.open("GET","<?php if( isset( $isAdmin ) &&  $isAdmin == TRUE ){ echo  '../../library/tosloader.php?page='. $pageID; } else {  echo  ../library/tosloader.php?page='. $pageID; }  ?>",true);

"tosloader.php"只包括platinum.php来刷新表。

在设置隐藏输入值的代码中执行此

$('#myHiddenID').val(myValue).trigger('change');

然后只需像这个一样使用更改事件

$('#myHiddenID').change(function(){
     var OnOff = $(this).val();
     if (OnOff == "ON") { // play clap}
     if (OnOff == "OFF) { //play boo}
})

听起来像是在从DOM中完全添加和删除元素，因此需要观看DOMNodeInserted事件。幸运的是，我们可以绑定到它。我们假设隐藏的输入有一个hiddenInput类。然后，我们需要获取我们的源元素，恰当地命名为<source id="yesAudio"..../>和<source id="noAudio".../>。我们将使用jquery的.get()方法，然后使用HTML5音频api的.play();来调用它们。

$(document).on('DOMNodeInserted', function(e){
    if(e.srcElement.className == 'hiddenInput'){
        if(e.srcElement.value == 'yes'){
            $('#yesAudio').get().play();    
        }else{
            $('#noAudio').get().play();
        }
    }        
});

我想这就是你想要的。

jsBin演示

HTML:

<input id="inp" type="text" value="NO" />

JS:

function checkInputValue(){
    var files = { "YES": "Clap.wav", "NO": "boo.wav" };
    var sound = new Audio( files[ $('#inp').val() ] );
    sound.play();
}
checkInputValue(); // USE WHEREVER YOU LIKE

或者你可以这样做：

将文件命名为：yes.wav和no.wav

function checkInputValue( snd ){
    var sound = new Audio( snd+'.wav');
    sound.play();     
}
var AJAXval = ("YES").toLowerCase() ; // the returned value to lowercase
checkInputValue( AJAXval );