在这篇文章中，我们将检查什么是音频精灵，以及如何通过howler.js音频库创建它们以在我们的项目中使用。
什么是AudioSprite
音频精灵是一个包含多个声音的音频文件，一个包含定义每个音频开始时间及其长度的对象的json文件。 它与带有图像的Spritesheet或Atlas具有相同的概念，但在音频环境中。
面向声音艺术家的JavaScript：学习使用Web Audio API进行编码
了解如何在使用JavaScript为声音艺术家创建交互式音频应用程序的同时对JavaScript进行编程：学习…
www.amazon.com
我什么时候应该使用AudioSprites
如果您的项目中包含一堆很小的声音（例如1到5秒钟的声音效果），并且将它们打包在一起不会产生很大的文件大小，则可以考虑使用audiosprite。
这样，当用户访问网站并由浏览器下载它们时，它与服务器的连接较少，并且可能节省了一些时间。 但是，正如我之前说的，请注意最终Audiosprite文件的大小，否则文件会变大，然后下载速度变慢。
如何生成AudioSprite
通过使用tonistiigi https://github.com/tonistiigi/audiosprite的’audiosprite’库，我们可以生成一个包含所有声音效果和json的mp3的完整过程，其中包括声音长度和适应于howler.js格式的开始时间需要。
AudioSprite库设置
1.）安装Node https://nodejs.org/es/download/
2.）安装Git Bash并将其用作控制台/终端，在其他终端（如IntelliJ Idea或Webstorm的终端）中，此按钮将不起作用。
https://gitforwindows.org/
3.）下载ffmpeg https://ffmpeg.zeranoe.com/builds/，并按照以下步骤逐步进行操作：
- 如何在Windows上安装FFmpeg： https ： //www.wikihow.com/Install-FFmpeg-on-Windows
- 重要说明 ：在指南的第2部分：在第6步的命令行中启用FFmpeg时，我们需要这样做：
如果要为此计算机上的所有用户启用FFmpeg，则可以在窗口底部附近的“系统变量”部分中双击“路径”。 - 否则，该库仅对管理员用户可用。
- 在指南的最后一步，您检查库是否已正确安装以及是否可以通过Git Bash上的ffmpeg -version命令访问， 如果您已打开Git Bash，请关闭它并再次打开它，因为Git Bash不会。无法更新已设置了新的环境变量，因此如果未正确安装库，它将崩溃。
- 如果一切顺利…恭喜！ ffmpeg已经安装并且可以访问🙂
4.）最后，安装audiosprite ：
npm install -g audiosprite
了解Pixi.js
创建和显示交互式图形，构建场景和动画过渡，制作跨平台的响应式游戏……
www.amazon.com
使用AudioSprite库
1.）打开Git Bash并浏览包含要使用的mp3文件的文件夹。
2.）编写以下命令，更改路径和文件名：
audiosprite --path'C：/ MyProject / audiosprites'--output myAudioSpriteFinalFile -f howler --export mp3 audio1.mp3 audio2.mp3
- path- >保存生成文件的路径。
- 输出 ->生成文件的名称（myAudioSpriteFinalFile.mp3和myAudioSpriteFinalFile.json）
- f- > json格式。
- 导出->这是为了限制仅以mp3格式导出。
3）在添加到路径的文件夹中，我们将找到包含所有音频的myAudioSpriteFinalFile.mp3 嵌入到一个myAudioSpriteFinalFile.json文件中，并将每个声音定义为具有长度和初始位置的对象：
{“ urls”：[“ C：\ MyProject \ audiosprites \ myAudioSpriteFinalFile .mp3“]，” sprite“：{” audio1“：[0，600.8163265306123]，” audio2“：[2000，522.4489795918367]}}
在howler.js上使用AudioSprites
根据项目需求以及如何使用howler.js，现在由项目结构决定如何添加此支持，官方文档提供了以下示例：
var sound = new Howl（{
src：['sounds.webm'，'sounds.mp3']，
雪碧：{
爆炸：[0，3000]，
激光：[4000，1000]，
赢家：[6000，5000]
}
}）;
//发射激光！
sound.play（'laser'）; https：//github.com/goldfire/howler.js#documentation
这是使用自定义AudioSprites的基本示例：https://www.nomisoft.co.uk/articles/audio-sprites-with-howler-js
而且我们到了帖子的结尾，最棘手的部分是与AudioSprite相关的库设置，因此请耐心等待并仔细执行所有步骤。 当您做到这一点时，其余的应该会顺利进行🙂
