Javascript代码播放音频

Javascript Code Plays Audio

本文关键字：音频 播放 代码 Javascript      更新时间：2023-09-26

我正试图弄清楚如何让Javascript键盘触发播放与该代码对应的特定曲目。我发现下面的代码为键盘中输入的扩展打开了一个新窗口，但我如何让它触发播放具有相同代码的音轨（即输入"0001"播放名为"0001"的文件？

感谢资源和提示！非常感谢！

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

首先，建议使用Buzz这样的库，它也需要jQuery。

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

相关文章：