sound.js # pixi辅助插件 — 中文翻译教程
本篇博客为中文翻译博客，转载请注明出处
sound.js-pixi的交互性插件【版本3.0.11】
- 安装配置
- 加载声音文件
- 初始化加载的声音
- 播放和控制加载的声音
- 更改回放速率
- 添加回声
- 添加混响
- 产生音效和音乐
- 射击音
- 跳跃声
- 爆炸声
- 制作音乐
- 高级声音加载和解码配置
Sound.js是辅助pixi.js的一个微型库，允许你为游戏和交互式应用程序加载、播放和生成音效和音乐。它非常小——不到800行代码，没有依赖关系。
它的核心是由两个简短独立的功能组成的:makeSound和soundEffect。makeSound功能帮助您加载和播放声音文件(mp3、wav、ogg和webm)。soundEffect函数帮助您从纯代码中生成各种各样的声音和音乐效果。这两个函数是完全模块化的，没有依赖关系，因此您可以将它们的任何部分复制并粘贴到您自己的项目中。事实上，你可以在不到150行的代码中，通过单独使用soundEffect函数，为你的项目创建所有的声音和音乐。
如果需要，sound.js还有一个sounds对象，它有一个有用的load方法，可以很容易地加载和访问声音文件。
安装配置
只需要链接到带有< script >标记的sound.js文件:
<script src="sound.js"></script>
或者只是将sound.js文件中您需要的任何函数复制/粘贴到您自己的项目代码中。
加载声音文件
加载声音文件的最佳方式是使用sounds对象的load方法。在sound.load方法的数组中列出每个声音文件的路径和名称。然后给sounds.whenLoaded分配一个回调函数。
//加载音效
sounds.load(["sounds/shoot.wav", "sounds/music.wav","sounds/bounce.mp3"
]);//设置加载音效文件的回调函数
//每次加载一个文件，就像PIXI.js加载资源文件一样
sounds.onProgress = function (progress, res) {console.log('Total ' + progress + ' file(s) loaded.');console.log('File ' + res.url + ' just finished loading.');
};//音效何时运行
sounds.whenLoaded = setup;
声音加载后，setup功能将运行。使用setup功能初始化您的声音。
function setup() {//此处初始化声音
}
当然，你可以给这个函数取任何你喜欢的名字，不是非要叫setup。
初始化加载的声音
使用sounds.load方法加载声音文件后，您可以将其作为sounds对象的属性进行访问，如下所示:
sounds["sounds/music.wav"]
为变量赋你想要使用的声音的值，方便以后引用:
var shoot = sounds["sounds/shoot.wav"],music = sounds["sounds/music.wav"],bounce = sounds["sounds/bounce.mp3"];
你现在有三个声音对象，shoot ，music 和bounce ，你可以播放和控制。
播放和控制加载的声音
您可以播放、暂停、循环和重新启动声音，以及设置它们的音量和扬声器声相设置。你也可以淡入或淡出声音。方法如下:
//播放声音
music.play();//声音循环
music.loop = true//设置音量
//1是全音量，2是双倍音量，0.5是半音量，等等。
music.volume = 0.7；//暂停声音。要恢复暂停的声音，请再次调用`play`
music.pause();//从特定时间开始播放(秒)
music.playFrom(10)//-1是全左扬声器，0是中间扬声器，1是全右扬声器
//扬声器
music.pan = -0.8；//在3秒内淡出声音
music.fadeOut(3);//在2秒内淡入声音
music.fadeIn(2);//在1秒钟内将声音淡化到“0.3”的音量
music.fade(0.3, 1);
更改回放速率
使用playbackRate来更改声音播放的速度。值为0.5将使声音以半速播放。值为2将使它以双倍速度播放。1是正常速度。
music.playbackRate = 0.5
改变声音的回放速度不会影响其音高。
添加回声
使用setEcho方法设置声音的可选回声效果。setEcho有三个参数:delay、feedback和filter。
bounce.setEcho(0.2,0.3,1000);
delay、feedback是以秒为单位的时间。delay决定声音重复之前需要多长时间。feedback决定了每次重复的强度——feedback值越高，回声持续的时间越长。filter是一个可选的赫兹值，用于滤除高于该值的频率。它通过每次重复来改变回声的音调，以获得更加有机的效果。将filter设置为0以禁用它。如果您需要关闭声音的回声效果，请将声音的echo属性设置为false
bounce.echo = false
添加混响
使用setReverb设置声音的混响效果。setReverb接受3个参数:duration、decay和reverse。
music.setReverb(2,2,false);
duration、decay是决定混响效果有多明显的时间，以秒为单位。给他们大数值来模拟大空间，给他们小数值来模拟小空间。第三个参数reverse是一个布尔值，它确定混响效果是否应该反转。对于正常混响设置为false，或者对于怪异的反向混响设置为true。如果以后需要禁用混响效果，请将声音的reverse属性设置为false。
这就是声音文件的工作方式。但是Sound.js也可以让你从头开始制作自己的音乐和音效。
产生音效和音乐
使用多功能soundEffect功能，使用十三个低级别参数创建几乎无限多样的音效。这里有一个使用它的模型，包括每个参数的描述。
soundEffect(frequencyValue, //声音的频率音调，单位为赫兹attack, //淡入声音的时间，以秒为单位decay, //声音消失的时间，以秒为单位type, //波形类型:“正弦”、“三角形”、“正方形”、“锯齿”:"sine", "triangle", "square", "sawtooth"volumeValue, //声音的最大音量panValue, //扬声器声相。左:-1，中间:0，右:1wait, //播放声音前等待的时间(秒)pitchBendAmount, //将声音的音调降下来的赫兹数reverse, //如果“反向”为真，音高将向上弯曲randomValue, //一个范围，单位为赫兹，在此范围内可以随机化音高dissonance, //以赫兹为单位的值。在目标音高上下创建2个不和谐的频率echo, //一个数组:[延迟时间秒，反馈时间秒，过滤值秒]reverb, //一个数组:[持续时间秒，十亿分之一秒，反向]timeout //声音的最大持续时间，以秒为单位
);
(注意:由于浏览器的特性，音效混响目前是实验性的。在未来，它可能会稳定下来，但在此之前，使用它会给你带来危险！)使用soundEffect函数的策略是修改所有这些参数，并为游戏开发自己的自定义音效库。把它想象成一个巨大的音板，上面有14个彩色闪烁的拨号盘，你可以玩玩。把自己想象成一个疯狂的科学家，14是你的幸运数字！
(注意:最后一个参数timeout是声音的最大持续时间。它的默认值是2 (2秒)，这对于大多数声音效果来说通常是足够长的，但是如果您要创建更长的声音，请将其设置为更高的数字。)
译者注：在调试这14个参数的时候，注意调试幅度小一些，因为播放一些极端参数的音效会伤害你电脑的扬声器！亲测血泪史……
射击音
这里有一个如何使用soundEffect功能来创建一个典型的激光射击声音的例子。
function shootSound() {soundEffect(1046.5, //frequency0, //attack0.3, //decay"sawtooth", //waveform1, //Volume-0.8, //pan0, //wait before playing1200, //pitch bend amountfalse, //reverse bend0, //random pitch range25, //dissonance[0.2, 0.2, 2000], //echo array: [delay, feedback, filter]undefined //reverb array: [duration, decay, reverse?]);
}
“sawtooth”波形设置使声音变得尖锐刺耳。音高pitchBendAmount是1200，这意味着声音的音高下降1200赫兹。从头到尾。这听起来就像你看过的每部科幻电影里的每一束激光。25的不协调值dissonance意味着两个额外的泛音被添加到声音中，高于和低于主频率25赫兹。那些额外的弦外之音给音调增加了一种尖锐的复杂性。
因为soundEffect函数被封装在一个自定义的shootSound函数中，所以您可以在应用程序代码中随时播放该效果，如下所示:
shootSound();
它将立即播放。
跳跃声
让我们看看另一个例子。这里有一个jumpSound函数，它可以产生一个典型的平台游戏角色跳跃声音。
function jumpSound() {soundEffect(523.25, //frequency0.05, //attack0.2, //decay"sine", //waveform3, //volume0.8, //pan0, //wait before playing600, //pitch bend amounttrue, //reverse100, //random pitch range0, //dissonanceundefined, //echo array: [delay, feedback, filter]undefined //reverb array: [duration, decay, reverse?]);
}
jumpSound的jumpSound为0.05，这意味着声音会很快淡入。它太快了，以至于你听不到，但是它稍微减弱了声音的开始。reverse的值为true，这意味着音调向上弯曲而不是向下。(这很有意义，因为跳跃的角色会向上跳。)randomValue是100。这意味着音调将在目标频率上下100赫兹的范围内随机变化，因此声音的音调每次都略有不同。这增加了声音的有机趣味性，让游戏世界充满活力。
爆炸声
你可以通过调整这些相同的参数来创造一个完全不同的爆炸音效。
function explosionSound() {soundEffect(16, //frequency0, //attack1, //decay"sawtooth", //waveform1, //volume0, //pan0, //wait before playing0, //pitch bend amountfalse, //reverse0, //random pitch range50, //dissonanceundefined, //echo array: [delay, feedback, filter]undefined //reverb array: [duration, decay, reverse?]);
}
制作音乐
但这不仅仅是为了音效！您可以使用soundEffect创建音符，并以设定的间隔播放它们。这里有一个叫做bonusSound的函数，它在一个升调序列中演奏三个音符(D、A和高D)。这是典型的音乐主题，当游戏角色获得一些奖励点数时，你可能会听到，比如拿起星星或硬币。(当你听到这个声音时，你可能会想起1985年！)
译者注：说起85年，那必然是超级玛丽
sound.js # pixi辅助插件 — 中文翻译教程相关推荐
- tink.js # pixi辅助插件 — 中文翻译教程
本篇博客为中文翻译博客,转载请注明出处 tink.js-pixi的交互性插件[版本3.0.11] 安装配置 通用指针 指针与精灵的交互 拖放精灵 按钮 制作按钮 制作互动精灵 键盘控制 Tink是Pi ...
- PS网页设计教程——30个优秀的PS网页设计教程的中文翻译教程
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 下面是本系列的30个优秀PS网页设计教程的翻 ...
- Notepad++的第三方插件介绍中文翻译
最近发现Markdown编辑器Typora的内测免费版也过期不能使用了,不过这个问题最后通过下载更早的版本解决了. 但是也因此,我彻底了解了一下各大编辑器对Markdown支持的情况,其中了解了一下N ...
- python网页填表教程_PythonSpot 中文系列教程 · 翻译完成
原文:PythonSpot Python Tutorials 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远. 在线阅读 ApacheCN 学 ...
- JavaBeginnersTutorial 中文系列教程·翻译完成
原文:JavaBeginnersTutorial 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远. 在线阅读 ApacheCN 学习资源 目录 ...
- PythonSpot 中文系列教程 · 翻译完成
原文:PythonSpot Python Tutorials 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远. 在线阅读 ApacheCN 学 ...
- JS导出PDF插件（支持中文、图片使用路径）
JS导出PDF插件(支持中文.图片使用路径) 原文:JS导出PDF插件(支持中文.图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfma ...
- Unity EasySave3中文图文教程详解-万能数据保存插件多平台支持
Chinar blog :www.chinar.xin Unity插件 - EasySave中文详解 本文提供全流程,中文翻译. Chinar 的初衷是将一种简单的生活方式带给世人 使有限时间 具备无 ...
- 《Swift编程语言教程》中文翻译及读书笔记page21
<The Swift Programming Language>中文翻译及读书笔记,附件中为英文原版教程 因21页之前内容和技术关系不大,不做翻译整理,从第21页开始 第21页 1 swi ...
最新文章
- matlab 实例均命名为,MATLAB复习题
- java final修饰符_java final修饰符详解，final修饰方法
- (转)json-lib 的maven dependency
- IFE JavaScript Task0002-1 小练习1：处理用户输入
- vs2008使用技巧
- 理解搜索引擎并且善用google
- 华为路由器防火墙配置命令总结（上）
- TensorFlow2.0:数据统计
- Google+ 为什么会死？
- 一些基本的数学概念，LDA的表述
- JavaScript中this关键字的使用比较
- 在ThemeForest上销售的利弊
- Python操作word插入对象
- RHEL7升级内核版本
- 4H5样式控制CSS1-美化网页元素
- JavaScript闭包的粗浅理解
- 2023系统分析师---系统规划
- 软件生命周期模型优缺点
- epson打印机设置方法
- EC6108V9／V9C-Hi3798MV100-当贝纯净桌面-卡刷固件包
热门文章