2014-04-24 109 views
-2

我想弄清楚如何获得一个Javascript键盘来触发播放与该代码对应的特定音轨。我发现下面的代码打开了在键盘上输入的扩展名的新窗口,但是如何让它触发播放具有相同代码的音轨(即输入“0001”播放名为“0001”的文件?Javascript代码播放音频

资源和技巧感谢!非常感谢!

<body onload="emptyCode();"> 

<script type="text/javascript"> 
function addCode(key){ 
    var code = document.forms[0].code; 
    if(code.value.length < 4){ 
     code.value = code.value + key; 
    } 
    if(code.value.length == 4){ 
     document.getElementById("message").style.display = "block"; 
     setTimeout(submitForm,1000);  
    } 
} 

function submitForm(){ 
    document.forms[0].submit(); 
} 

function emptyCode(){ 
    document.forms[0].code.value = ""; 
} 
</script> 
<style> 
body { 
    text-align:center; 
    background-color:#333333; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
} 
#keypad {margin:auto; margin-top:20px;} 

#keypad tr td { 
    vertical-align:middle; 
    text-align:center; 
    border:1px solid #000000; 
    font-size:18px; 
    font-weight:bold; 
    width:40px; 
    height:30px; 
    cursor:pointer; 
    background-color:#666666; 
    color:#CCCCCC;} 
#keypad tr td:hover {background-color:#999999; color:#FFFF00;} 

.display { 
    width:130px; 
    margin:10px auto auto auto; 
    background-color:#000000; 
    color:#00FF00; 
    font-size:18px; 
    border:1px solid #999999; 
} 
#message { 
    text-align:center; 
    color:#009900; 
    font-size:14px; 
    font-weight:bold; 
    display:none; 
} 
</style> 

<form action="code.htm" method="get"> 
<table id="keypad" cellpadding="5" cellspacing="3"> 
    <tr> 
     <td onclick="addCode('1');">1</td> 
     <td onclick="addCode('2');">2</td> 
     <td onclick="addCode('3');">3</td> 
    </tr> 
    <tr> 
     <td onclick="addCode('4');">4</td> 
     <td onclick="addCode('5');">5</td> 
     <td onclick="addCode('6');">6</td> 
    </tr> 
    <tr> 
     <td onclick="addCode('7');">7</td> 
     <td onclick="addCode('8');">8</td> 
     <td onclick="addCode('9');">9</td> 
    </tr> 
    <tr> 
     <td onclick="addCode('*');">*</td> 
     <td onclick="addCode('0');">0</td> 
     <td onclick="addCode('#');">#</td> 
    </tr> 
</table> 
<input type="text" name="code" value="" maxlength="4" class="display" readonly="readonly" /> 
<p id="message">HOLD PLEASE</p> 
</form> 
</body> 

回答

0

首先,建议使用库如Buzz,这也需要jQuery的。

例如,你可以有一个名为0001.mp3音频文件并点击按钮获取键盘上的值($("button").val()),其中哟然后你可以传入一个新的Buzz对象并从那里控制它。