8bit 活结 Psychosocial
8 Bit Universe 众多欧美热歌被 8Bit 化! 你还听得出来吗!! 超级好听!
为什么写这篇文章
忙碌了一整年, 大家都在补充各种工作上需要用到的知识, 却有些忽略了技术的娱乐性
最近在听机核网的一期电台: 我们用 8bit 音乐原理告诉你, FC 的游戏音乐是如何制作的, 原理的部分感觉和 web audio 有很多相似之处, 遂撰写这篇文章, 希望让没有任何音乐基础的同学, 看完之后也能写一段自己的 8bit 音乐
因为是实践篇, 这篇文章可能涉及很多音乐知识, 我会尽可能把需要用到的知识用最简单的方法让大家快速理解, 也会附上相关的学习资料
文章中涉及的代码不多, 如果只对技术感兴趣的小伙伴可以就此止步了具体技术代码的原理部分, 年后我会另开篇写, 这里先挖个坑, 以下是正文
8bit 音乐介绍
什么是 8bit 音乐
8bit 音乐也叫芯片音乐
当时的游戏主机 (例如 FC) 内存很小, 无法存储高分辨率的 PCM 录音所以游戏音乐需要实时合成, 必须将基本的声音合成引擎植入硬件当中, 在游戏芯片中存储音乐编码(相当于乐谱), 芯片音乐由此产生, 并逐渐成为一种风格
8bit 音乐如何创作
我们主要用 FC 的声音系统来讲解在 FC 的声音系统中, 不存在乐器的概念, 只是提供不同的波形供编曲者使用, 作曲的时候分别调用不同的波形, 形成不同的声音效果
FC 提供了以下 5 个声道:
方波(2 声道)
波形如下图所示:
方波占两个声道, 因为有不同的比例的波形, 可以产生不同音调的声音, 可以类比为电声乐队的两把吉他
三角波(1 声道)
三角波, 顾名思义, 就是波峰波谷全为三角形, 如下图:
可以类比为电声乐队的贝司
噪音(1 声道)
噪音占一声道, 在 FC 游戏的音乐和音效中是最常见的, 爆炸声脚步声碰撞声以及音乐的节奏点等等都是用噪音制作的
比起制造音效, 更重要的作用的打节奏因为噪音比起方波三角波更有辨识度, 能够营造比较好的节奏感, 可以类比为电声乐队的鼓
采样(1 声道)
最后还有一个声道是采样声道, 由于采样花样比较多, 相对比较复杂, 所以在这篇文章先不讲
对一个音的修饰
最后, FC 支持对一个音符的修饰, 开发者可以通过音量波封颤音等等, 来修饰一个音符
Web Audio 简介
Web Audio 支持正弦方波三角波和锯齿波你可以听到不同的波形产生不同的声音:
demo
然而, 你可能已经注意到, 这些游戏机中没有一个是正弦波因为正弦波是在游戏主机发布后推出的, 它的音调要温和得多, 实践中我们不会应用
参考了这个 demo, 决定使用 Tone.js 来进行开发, 主要是两个原因:
Tone.js 接受的是音高, 而不是要求它播放 440Hz 频率的声音, 我们可以简单地演奏 A4 音, 而不是 440Hz 音
对 ADSR 中的 Attack 和 Release 做了封装, 方便开发关于 ADSR 有兴趣的可以参考波封
正式实战
先放 demo: link
我们编辑一首 8bit 的音乐, 主要关心的是单声道乐谱和声和声音效果三个部分, 下面分别进行讲解
第一步: 乐谱改造
先看 Tone.js 提供的发声关键函数:
.triggerAttackRelease ()
包含四个参数:
note: 演奏的频率或音符位置
duration: 音符持续时间或音符形状
time: 音符什么时候被触发
velocity: 音符速度(可以理解为音量, 速度越快, 振幅越大, 音量也越大)
可以看出, time 主要 duration 有关, 体现的是音符在乐器中时间轴的位置
而音量一首歌也会相对比较统一, 所以我们改造一个乐谱, 主要关心的是音符和音符的持续时间(即拍子), 举个栗子:
- var synth = new Tone.Synth().toMaster()
- synth.triggerAttackRelease('C4', '4n', '8n', 1)
- synth.triggerAttackRelease('E4', '8n', '4n + 8n', 1)
C4E4 代表声音的频率, 或者是音符在乐谱中的位置, 4n8n 代表声音持续时间, 或者是乐谱中音符的形状, time 参数是累加的, velocity 参数也是固定的
那么 C4E44n8n 这些东东是怎么算出来的呢?
以欢乐颂 (Ode To Joy) 举例, 以下是钢琴谱:
音符位置
先看左上方 1=C, 代表这是 C 大调的歌, 就是以钢琴上的 C 键位作为 do, 再看谱号:
这个乐谱是高音谱号, 那么就是以中央 C 键位, 作为 do 来演奏
何为中央 C 键位? 钢琴上一共 52 个白键, 7 个八度, 第一个键位是 A1, 然后依次是 B1,C1 从左往右数, 第四个八度的 C 键位, 这个 C4 键位即为中央 C, 而这首乐谱的 do, 就是我们在前面代码中看到的 C4
怎么看五线谱? 很简单, 五线谱就是钢琴相对键位的谱, 如下图:
钢琴上还有 36 个黑键, 如下图:
这些黑键怎么表示呢? 很简单, C4``D4 之间的黑键, 可以用 C4# 或者 D4b 来表示, 至于为什么 7 个白键 + 5 个黑键, 12 个键为一组, 感兴趣的可以看看十二平均律
音符形状
我们再来看一下乐谱左上角的 4/4, 代表这是一个 44 拍的乐谱, 什么叫 44 拍? 44 拍是指以四分音符为一拍, 每小节有 4 拍一个竖线区分一个小节, 那四分音符又是什么呢? 看下图:
前面示例代码中出现的 4n8n 其实就代表着四分音符和八分音符
到这大家又会有疑惑了, 虽然音符的形状代表了节拍, 但是这个节拍也是相对的, 怎么对应到现实的绝对时间中呢? 这时要引入一个概念 BPMBPM 是 Beat Per Minute 的简称, 即每分钟有多少个节拍, 以 44 拍乐谱为例, 如果 bpm 设定为 120, 那么意味着每一个四分音符刚好持续 0.5s
实际应用
说了半天音乐知识, 我们还是要回到代码中, 以第一小节举例, 这个小节有四拍, 每一个都是四分音符, 分别是 mimifaso, 在代码中我们怎么写呢? 如下:
- var synth = new Tone.Synth().toMaster()
- Tone.Transport.bpm.value = 120
- synth.triggerAttackRelease('E4', '4n', '0', 1)
- synth.triggerAttackRelease('E4', '4n', '4n', 1)
- synth.triggerAttackRelease('F4', '4n', '2n', 1)
- synth.triggerAttackRelease('G4', '4n', '2n+4n', 1)
这样一个小节的乐谱改造就完成了
第二步: 引入和声
什么叫和声? 和声是两个或两个以上不同的音按一定的法则同时发声而构成的音响组合不同的乐器有不同的音色, 各种乐器之间通过一种和谐的方式搭配到一起, 才能形成很好的音乐, 而音色本质上来说, 其实就是不同的波形
完成了单声道乐谱的改造后, 我们要来 new 几个新的乐器(波形):
- var triangleOptions = {
- oscillator: {
- type: 'triangle'
- }
- }
- var squareOptions = {
- oscillator: {
- type: 'square'
- }
- }
- var squareSynth = new Tone.Synth(squareOptions).toMaster()
- var triangleSynth = new Tone.Synth(triangleOptions).toMaster()
- var noiseSynth = new Tone.NoiseSynth().toMaster()
每个音色应不同的波形, 也对应了不同的乐器, squareSynth 方波主要对应旋律乐器, 例如钢琴吉他, triangleSynth 三角波主要用来模拟贝司, noiseSynth 噪音声道主要模拟打击乐
每一个乐器需要改造各自独特的乐谱
第三部: 声音效果
最后, 大家可以通过波封来改变声音的效果, 例如加入混响回声轻重音等等, 让音乐听起来更加生动, 这部分主要是通过 Tone.Envelope()来控制:
attack: 音量从 0 到最大音量的时间, 单位是时间
decay: 音量从最大音量到 sustain 音量的时间, 单位是时间
sustain: 在 release 执行前持续音量占总音量的百分比, 单位是百分比
release: 音量从 sustain 音量到 0 的时间, 单位是时间
- envelope: {
- attack : 0.01 ,
- decay : 0.1 ,
- sustain : 0.5 ,
- release : 1 ,
- attackCurve : linear ,
- releaseCurve : exponential
- }
通过控制 Attack(起音)Decay(衰减)Sustain(延持)与 Release(释音)的时间, 可以很好的实现各种声音效果, 实际效果怎么样, 需要大家自己去尝试
总结
这篇文章主要讲解了, 利用 Web Audio 技术, 使用 Tone.js 类库, 开发 8bit 音乐的整体步骤, 主要分三步:
单乐器乐谱改造
多乐器和声
增加声音效果
更多内容可以查看我改的 demo, 里面也添加了菊苣们写的超级玛丽和塞尔达传说的乐谱, 我改写的欢乐颂也在里面, 简单改造钢琴谱, 写了个贝斯谱
希望大家都能创作出属于自己的 8bit 音乐!
来源: https://juejin.im/post/5a98f6f5f265da23844005ac