按键时播放声音

Posted 2023-02-25

【中文标题】按键时播放声音

【英文标题】：Play a sound when a key is pressed

【发布时间】：2012-09-25 07:43:56

【问题描述】：

有人知道是否有任何预定义的方法可以为从键盘输入到 html 表单中的每个字母播放声音？

例如：在文本字段中，如果我输入 Y，网站会显示 Y 等等。

或者，最好的方法是什么？

【参考方案1】：

播放声音很容易，也很容易为按键添加处理程序，但是没有预定义的方式来链接这两个操作，因此您必须键入自己的代码。

1) 按键操作

document.onkeydown = function() 
    ...

2) 播放声音

添加音频元素：

<audio id=alarm>
    <source src=sound/zbluejay.wav>
</audio>

并用

执行它

document.getElementById('alarm').play();

例如，您可以构建一个将键码链接到声音元素 ID 的地图：

var sounds = 
   88 : 'alarm', // key 'x'
   ...

;
document.onkeydown = function(e) 
    var soundId = sounds[e.keyCode];
    if (soundId) document.getElementById(soundId).play();
    else console.log("key not mapped : code is", e.keyCode);

你可能会找到键码here

【讨论】：

我试过了，但显然音频标签中不存在“播放”方法。我收到以下错误：“ Object [object Object] has no method 'play'” 有什么想法吗？

那么您的对象不是音频元素。

是的，我意识到我必须再访问一层才能访问音频对象。谢谢。

不错的完整答案...竖起大拇指！

【参考方案2】：

您必须拥有所有字母的声音文件，并使用 javascript 调用它们在按钮按下事件时播放。

【讨论】：

谢谢..我想我必须编写所有代码..刚刚完成了所有字母的声音文件现在该采取行动了..谢谢队友:)

您好，您能否正确实现它。您是如何管理音频播放延迟的？请分享

【参考方案3】：

我刚刚编写了一个快速脚本，可以为您将工作简化为仅 HTML。

(function()
	var keyElements	= document.getElementsByTagName('keysound'),
		i			= keyElements.length,
		keys		= ;
	while (i--)
		var cur		= (keyElements[i].getAttribute('keys')||"").toString().split(''),
			v		= cur.length,
			audio	= keyElements[i].getAttribute('src'),
			caseinsensitive	= keyElements[i].getAttribute('anycase')!==null?true:false,
			regexp	= keyElements[i].getAttribute('regexp')!==null?true:false;
		if (audio)
			while (v--)
        cur[v] = caseinsensitive ? cur[v] : cur[v].toLowerCase();
        
				var src=!regexp?audio:
				audio.replace('$key', cur[v])
				.replace('$code', cur[v].charCodeAt(0));
				var ele = document.createElement('audio');
				ele.src = src;
				document.body.appendChild(ele);
				(keys[cur[v]] = keys[cur[v]] || []).push(
					ele
				);
				if (caseinsensitive) 
            
					(keys[cur[v].toUpperCase()] = keys[cur[v].toUpperCase()] || []).push(
						ele
					);
				
			
		
	
  console.log(keys);
	window.addEventListener('keydown',function(evt)
		var clist	= keys[evt.key] || [],
			clen	= clist.length;
		while (clen--)
			try  clist[clen].play()  catch(e) 
		
	);
)();

<!-- Demo code example -->
<keysound keys="0123456789abcdefghijklmnopqrstuvwxyz" regexp anycase src="https://the-peppester.github.io/styff/keys/$key.mp3" />
<keysound keys="QWERTY" src="http://soundbible.com/mp3/Fart-Common-Everyday-Fart_Mike-Koenig.mp3" />
<keysound anycase keys="bnm,./;'[]-=+_()*&^%$#@!`~" src="http://soundbible.com/mp3/Iguana_Farts_In_A_Bathtub-Iguana_Farts-1423164123.mp3" />
<keysound anycase keys="asdfgh" src="http://soundbible.com/mp3/Uuuuuu-Paula-1357936016.mp3" />

文档

上面的脚本为 keysound 元素赋予了特殊的含义，让您可以在用户按下某个键时播放声音。这些是特殊属性。

anycase 使键不区分大小写 keys=... 播放此声音的按键 regexp 使每个键的 URL 可以以类似正则表达式的方式不同，如下所示： URL 中的$key 将替换为每个选定键的纯文本表示 URL 中的$code 将替换为每个选定键的基数 10 ASCII 键代码表示 src=... 确定音频文件的 URL。受正则表达式属性影响

有关这些示例，请参阅演示。

【讨论】：

运行演示并尝试按键盘上的随机键，真的很有趣！