Javascript 如何与按键同步播放音频元素？

HTML

<textarea id="words" name="words"></textarea>
<audio id="type" src="type.mp3"></audio>

我想让type.mp3在我按下任何键时播放

但是，它不能与键同步播放

---

我正在寻找一个纯JS解决方案。

Javascript是一种异步和事件驱动的语言，因此您无法创建同步函数。

Javascript是一种异步和事件驱动的语言，因此，您无法实现同步功能。

音频媒体元素取决于浏览器的缓冲机制，在调用play时可能不会立即播放

要与按键同步播放声音，您必须使用Web Audio API，该API允许您在内存缓冲区中播放声音并立即播放

下面是一个如何加载和触发声音的示例：

window.AudioContext=window.AudioContext | | window.webkitadiocontext；
var request=new XMLHttpRequest（），
url=”https://dl.dropboxusercontent.com/s/8fp1hnkwp215gfs/chirp.wav",
actx=新的AudioContext（），
阿布弗；
//通过XHR加载文件
打开（“获取”，url，true）；
request.responseType=“arraybuffer”；
request.onload=函数（）{
//异步解码request.response中的音频文件数据
actx.解码音频数据（请求、响应、，
功能（缓冲区）{
if（缓冲区）{
abuffer=buffer；//保留对已解码缓冲区的引用
setup（）；//安装程序处理程序
}
}
)
};
request.send（）；
//设置密钥处理程序
函数设置（）{
document.getElementById（“txt”）.onkeydown=play；
}
//播放示例-每次必须创建一个新的缓冲区源
函数播放（）{
var src=actx.createBufferSource（）；
src.buffer=abuffer；
src.connect（actx.destination）；
src.start（0）；
}

---

音频媒体元素取决于浏览器的缓冲机制，在调用play时可能不会立即播放

要与按键同步播放声音，您必须使用Web Audio API，该API允许您在内存缓冲区中播放声音并立即播放

下面是一个如何加载和触发声音的示例：

window.AudioContext=window.AudioContext | | window.webkitadiocontext；
var request=new XMLHttpRequest（），
url=”https://dl.dropboxusercontent.com/s/8fp1hnkwp215gfs/chirp.wav",
actx=新的AudioContext（），
阿布弗；
//通过XHR加载文件
打开（“获取”，url，true）；
request.responseType=“arraybuffer”；
request.onload=函数（）{
//异步解码request.response中的音频文件数据
actx.解码音频数据（请求、响应、，
功能（缓冲区）{
if（缓冲区）{
abuffer=buffer；//保留对已解码缓冲区的引用
setup（）；//安装程序处理程序
}
}
)
};
request.send（）；
//设置密钥处理程序
函数设置（）{
document.getElementById（“txt”）.onkeydown=play；
}
//播放示例-每次必须创建一个新的缓冲区源
函数播放（）{
var src=actx.createBufferSource（）；
src.buffer=abuffer；
src.connect（actx.destination）；
src.start（0）；
}

---

您假设我们知道/理解问题所在。“同步播放”是什么意思？@charlietfl当我按顺序键入时，直到前一个事件结束，音频才会播放。需要跟踪关键事件计数，如果计数器不为零，则使用“音频结束”事件再次播放。您假设我们知道/理解问题所在。你所说的“同步播放”是什么意思？@charlietfl当我按顺序键入时，直到前一个事件结束时才会播放音频。需要跟踪关键事件计数，如果计数器不为零，则使用音频结束事件再次播放（该漏洞似乎仅与Firefox v.47.0b9相关，应被视为临时性的。在48.0a2中有效，可能在稳定版本中有效）。（该漏洞似乎仅与Firefox v.47.0b9相关，应被视为临时性的。在48.0a2中有效，可能在稳定版本中有效）。

document.getElementById('words').onkeydown = function(){
    document.getElementById('type').play();
}