Aframe A帧：如何提供声音衰减以消除声音终止时的音频点击

A-frame通过其

提供了易于使用和强大的音频功能

在为我的游戏（进行中）使用了各种声音选项（如原生html5）后，我得出结论，A帧声音是最好的选择，因为它自动提供空间化声音（例如，随着头部旋转而变化），当你靠近声源时，声音的强度也会发生变化——这会增加虚拟现实的存在感，而这一切都是为了定义一个简单的html标记

不幸的是，A-frame没有提供衰减实用程序来在停止时逐渐减弱声音，因此可以在某些波形上产生清晰可听且恼人的咔嗒声，尤其是长度可变且波形本身没有逐渐减弱的声音（例如，太空船的推力）。这是一个有电脑音频的游戏

我能找到一些非常好的three.js音频，但我找不到特定于a-frame的音频

减少/消除a帧声音的最佳方法是什么？

简介 A-frame

sound

audio包装API，API反过来包装原生HTML5音频。大多数解决方案都是为纯html5或纯three.js量身定制的。由于A-frame是两个API的混合体，所以提供的解决方案中没有一个非常适合A-frame

在两次错误的开始后，我发现了一些东西，它不仅内置于A帧中（甚至不需要下载库），而且是一个对其他形式的计算机动画有用的API。我在这里提供了主要的解决方案，也希望其他人能找到有用的东西

请注意，您不需要这样做，因为短脉冲听起来像子弹发射。这些声音有一个固定的寿命，所以可能无论是谁创造了波形，都会确保它们逐渐变细。此外，我只处理淡出，而不是淡入，因为我需要的声音只有淡出的问题。一个普遍的解决方案也将包括fadein

解决方案 1） 我们首先创建一个真实的基本场景，我们可以在其中播放音频：

<a-scene>
  <a-assets>
    <audio id="space-rumble" src="https://raw.githubusercontent.com/vt5491/public/master/assets/sounds/space-rumble.ogg" type="audio/ogg"></audio>
    crossorigin="anonymous"
    type="audio/ogg"></audio>
  </a-assets>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"
  sound="src: #space-rumble; volume: 0.9"
  ></a-box>
</a-scene>

分析 以下是一些需要注意的相关事项

混合API 我正在调用一些本机A帧级别的调用：

sound.playSound()
sound.stopSound()

this.sound.pool.children[0].setVolume(initVol);

还有一个html5级别的调用：

this.sound.currentTime = 0.0;

但大多数“工作”都是在三个.js级别的调用中完成的：

sound.playSound()
sound.stopSound()

this.sound.pool.children[0].setVolume(initVol);

这确实让人有点困惑，但没有一个api是“完整的”，因此我不得不使用这三个api。特别是，我们必须在a型框架包裹的层面上做很多工作。我通过看照片了解了大部分情况

声场 一个框架允许每个声音有多个线程，这样您就可以在前一个声音完成之前发出相同的声音。这由声音组件上的

poolSize

属性控制。我只处理第一个声音。我可能应该像这样循环池元素：

this.pool.children.forEach(function (sound) {
  ..do stuff
  }
});

但到目前为止，做第一个已经足够好了。时间会证明这是否可持续

“这个”绑定 我选择使用factory对象模式实现所有功能，而不是将所有方法和变量放在全局文档空间中。这模拟了在Angular2中实现或作为本机a帧组件实现时的环境。我之所以提到这一点，是因为我们现在有嵌套在包装“main”函数中的函数中的回调。因此，请注意，“此”绑定可以发挥作用。我将大多数支持函数绑定到工厂对象，但不绑定tween回调，因为它们是在“this”上下文中传递的信息，而不是通过parms传递的。我不得不对回调使用闭包来访问包含类的实例变量。这只是标准的javascript“回调地狱”内容，但请记住，如果不小心，它可能会变得混乱

取消动画 如果您已经有了一个tick函数，请使用该函数调用

TWEEN.update（）

。如果只是淡出声音，那么让动画循环一直运行就太过分了，所以在本例中，我动态地启动和停止动画循环

吐温可以用铁链锁住。 Tween也可以用jQueryFluentAPI样式链接

结论

---

使用tween.js逐步消除声音感觉绝对是正确的解决方案。它考虑了大量的开销和设计考虑。它也感觉比我以前使用的原生html5调用更快、更流畅、更健壮。然而，很明显，让它在应用程序级别工作并不是件小事。在Tween.js中实现的淡出属性似乎应该是A帧声音组件本身的一部分。但在那之前，也许有些人会发现我在这里提供的一些东西在某种形式上是有用的。我现在才开始学习html音频，所以如果我让它看起来比实际更难，我深表歉意

原来a-frame应用程序“a-blast”有一个“声音衰减”组件，看起来比我的解决方案简单一点。我要是早点知道这事就好了。哦，好吧。