代码之家 › 专栏 › 技术社区 › Rounin

我怎么才能(非常)短呢。每次按键都要播放mp3音频文件?

html5-audio html javascript

Rounin · 技术社区 · 8 年前

我正在建立一个网络应用程序,其中包括一个形式和(作为一个渐进的增强/用户体验效果),我想一个按键发射击键声音效果。

然而,当我在笔记本电脑上的Firefox上测试我的设置时,似乎有声音延迟(并不是每个按键都能发出声音效果)。

我是在试图实现使用当前网络技术无法实现的事情,还是我只是以错误的方式实现了这一点?

var myInput = document.getElementsByTagName('input')[0];
var keypress = document.getElementsByClassName('keypress')[0];

function playSoundEffect() {
    keypress.play();
}

myInput.addEventListener('keydown', playSoundEffect, false);

/* I've also tried...
myInput.addEventListener('keyup', playSoundEffect, false);
myInput.addEventListener('keypress', playSoundEffect, false);
*/

input {
width: 90vw;
}

<input type="text" placeholder="Type to hear the sound effect..." />

<audio class="keypress">
<source src="http://handsoffhri.org/.assets/theme/elements/mp3/keypress.mp3" type="audio/mpeg">
</audio>

第二次尝试:

var myInput = document.getElementsByTagName('input')[0];

function playSoundEffect() {
    var jsKeypress = new Audio('http://handsoffhri.org/.assets/theme/elements/mp3/keypress.mp3');
    jsKeypress.play();
}

myInput.addEventListener('input', playSoundEffect, false);

输入{
}

<input type="text" placeholder="Type to hear the sound effect..." />

这绝对是一个进步——创造一个新的 Audio 音频 物体。

2 回复 | 直到 8 年前

zero298 8 年前

我看了一下你的第二次尝试,似乎听起来不错(请原谅这个双关语)。然而,我只是试了一下,我能用这个得到很好的结果:

Freesound.org: UI Confirmation Alert, C4.wav .

这将创建一个 AudioContext Audio 并反复使用相同的、已加载的缓冲区。我还在试着看看是否有性能提升。

一 AudioBufferSourceNode start() 再次发声。幸运的是,这些节点的创建成本非常低, 和实际情况 AudioBuffers 可重复用于的多个播放声音事实上,您可以使用这些节点的方式是“开火后忘记”: 创建节点,调用 开始() 开始播放声音甚至懒得提及它。它将自动声音播放结束后的某个时间。

/*jslint browser:true, esversion:6, devel:true*/
/*global AudioContext*/

(function() {
  "use strict";

  function main() {
    let ctx = new AudioContext();

    fetch("/res/audio/twinkle.wav")
      .then(res => res.arrayBuffer())
      .then((buffer) => {
        return new Promise((resolve, reject) => {
          ctx.decodeAudioData(buffer, (audioBuffer) => {
            resolve(audioBuffer);
          });
        });
      })
      .then((audioBuffer) => {
        document.addEventListener("keydown", (e) => {
          console.log(e.keyCode);
          if (e.keyCode === 37) { // The "left arrow" key
            let source = ctx.createBufferSource();
            source.buffer = audioBuffer;
            source.connect(ctx.destination);
            source.start(0);
          }
        });
      });
  }
  document.addEventListener("DOMContentLoaded", main);
}());

Cristyan 8 年前

howler.js 这是 example

 var myInput = document.getElementsByTagName('input')[0];
  var sound = new Howl({
    src:['http://handsoffhri.org/.assets/theme/elements/mp3/keypress.mp3']
  });

  sound.play();


  function playSoundEffect() {
    sound.play();
   }

  myInput.addEventListener('keydown', playSoundEffect, false);