Shader 艺术编程音乐1 基础乐理与 Shader 写小星星

在听音乐的时候唱唱会看到一些音频可视化，比如下图从 b 站 UP 主的一个可视化作品 我看不懂每个柱状图表示的含义，但是看起来好像是属于这首音乐的, 因为图形的变化和音乐能建立起联系，也许是声音的大小，也是是频率。总之是符合直觉的， 一直以来我对此都非常好奇，但是没有进一步的行动。 直到看到https://www.shadertoy.com/user/and 的一系列作品，哇，好神奇呀。 怎么用一堆代码就可以编写出这么动感的曲子，结合他自己设计的图像，并且让图像随着曲子的节奏变化而变化就觉得很酷。 所以今天也尝试去从头理解起原理是什么， 这篇文章是我理逻辑的一个过程，文中的一些截图源一些值得阅读的资料都留在文尾。

基础乐理

声音的本质

不平则鸣， 鸣就是震动，震动产生波，波可以通过空气传播，波震动的频率就如上图所示，可以产生一个波形。 波是有频率的，其单位为 Hz, 波是有高低振幅的，振幅的平方为声音的响度，其单位为 dB

声音的数字化

而计算机是 0,1 的世界，需要将模拟信号转化为数字信号，这个过程叫做采样。

这里我产生了一个疑问，在颜色中因为人眼对于颜色的感知与机器显示不一样，所以会做一次颜色矫正，让颜色做一些非线性变换，声音是不是也有类似的操作

声音三特性

就像颜色可以用 RGB组成任何颜色，区分声音有三个原子特性，

• 响度Amplitude： 响度是指声音的强弱程度，通常与声波的振幅（Amplitude）有关。振幅越大，声音听起来就越响；反之，振幅越小，声音听起来就越轻。响度是人耳感知声音强度的感受。
• 频率Frequency： 频率是指声波每秒钟振动的次数，单位为赫兹（Hz）。频率决定了声音的高低（音高），频率较高的音听起来较尖（如高音），而频率较低的音则听起来较沉（如低音）。人耳通常可以感知的频率范围为20Hz到20kHz。
• 音色Timber： 这个最复杂了，例如钢琴和小提琴哪怕响度和频率一样，也能很容易分辨出不同，同样是吉他不同价格的音色也不一样。 例如下图为一个吉他的拨动之后各波的形态，有多个波组成，最上面成为基波

音色是数字音乐最复杂的东西，在数字音频处理中，音色的组成可以从以下几个方面进行理解和分析：

1. 波形：声音的波形是决定音色的基本因素。不同的声音有不同的波形特征，正弦波、方波、三角波和锯齿波等都有各自独特的音色。
2. 频谱：音色的数字化表示往往通过频谱分析来实现。频谱显示了声音中包含的各种频率成分及其强度。复杂音色通常包含多个频率的和谐和非和谐成分。
3. 谐波：音色由基频及其上多个谐波组成。谐波的数量、相对强度和相位关系都会影响音色的感知。例如，钢琴和小提琴的音色就因其谐波特性而不同。
4. 包络：音色的包络（通常由攻击、衰减、维持和释放四个阶段组成）对音色的感知也有重要影响。不同的乐器在这些阶段的表现各不相同，从而影响最终的音色。
5. 动态范围：音色会受到音量变化的影响，音量的动态范围（弱音到强音的变化）也能影响听感。
6. 空间感：音色的感知还包括空间因素，如立体声的宽度、深度感和混响效果等，这些都能影响声音的音色。 以上在用 shader实现中都会变成一段简洁的代码

听感与乐感

拍子、节奏和律动是音乐中相关但不同的概念，下面是它们之间的区别：

1. 拍子：拍子是指音乐中规律重复的时间单位，通常由一系列的强拍和弱拍构成。它是音乐的基本结构，可以用来计量音乐的时间。比如，在4/4拍的乐曲中，每四个拍子构成一个完整的循环。
2. 节奏：节奏是指音乐中不同音符和休止符的时间长度和排列方式。它是音乐运动的组织形式，包括音符的长短、强弱和组合作用。节奏可以是简单的（如均匀的四分音符）或复杂的（如切分音和变速），它赋予音乐动感和生命。
3. 律动：律动是一种更为抽象的概念，通常指音乐在整体上所传达的感觉和流动性。它是由拍子和节奏结合而成的，是听众在听音乐时感受到的“动感”或“脉动”。律动可以被认为是音乐的情感表达，包括其在演奏时所营造的氛围和气氛。 总结来说，拍子是时间的框架，节奏是音符的组织形式，而律动则是通过拍子和节奏所传达的整体感觉。三者相辅相成，共同构成了音乐的结构和表现。

而在数字音乐中，拍子是速度，节奏是曲谱，律动是噪音（我觉得）

十二平均律

十二平均律是一种音律系统，广泛应用于西方音乐中。它将一个八度的音程分为十二个相等的半音，每个半音之间的频率比大约为2的1/12次方（约等于1.0595）。这种体系使得在不同的调之间演奏时能够保持和谐，因此非常适合于现代西方音乐的创作和演奏。

在十二平均律中，每一个音符都可以用它在基音（通常是C音）的相对位置来表示，形成一个循环的音阶。它的主要优点在于乐器的调音相对简单，并且允许在不同的调性之间自由转调，而不会产生显著的音质变化。

十二平均律的标准音高为A4（即乐器中的“拉”音）设定在440 Hz，这一标准在20世纪中期得到了广泛认可和推广。具体来说， 国际标准化组织（ISO）在1955年正式确立了A4的频率为440 Hz。这一标准为音乐演奏和乐器调音提供了统一的参考，成为现代音乐中普遍使用的标准。

上图钢琴键盘可以看到 7 个白键和 5 个黑键构成一个循环，白黑交替就是频率不断乘上 2的1/12次方

MIDI (Musical Instrument Digital Interface)

以上不同乐器的音色， 在不同拍子下以不同节奏进行组合，就可以形成曲子。如果我们想要对某个乐器的响度进行调整，或者节奏发声变化，在传统的 Mp3格式是办不动的。 而 midi就可以做到。

midi与 mp3有点类似于图形中 svg与 png的关系， 当拿到一个 svg，我们可以通过 svg编辑器对 svg元素进行修改，midi也一样

MIDI 文件（Musical Instrument Digital Interface）是一种用于存储和传输音乐信息的文件格式。它不存储音频信号，而是存储演奏音乐所需的指令和参数，例如音符的音高、持续时间、音量以及乐器类型等。MIDI 文件广泛应用于音乐制作、合成器、电子乐器和计算机音乐创作中。

以下是一些关于 MIDI 文件的基本知识：

1. 文件格式：MIDI 文件通常以 .mid 或 .midi 为后缀。它们可以包含多个通道，每个通道可以独立处理不同的乐器声音。
2. 数据结构：MIDI 文件由多个事件（如音符开、音符关、控制器变化等）构成，还有时间戳信息，告诉设备何时执行这些事件。
3. 编辑与制作：可以通过各种 MIDI 编辑软件（例如 FL Studio、Ableton Live、Logic Pro 等）创建和编辑 MIDI 文件。这些软件允许用户安排音符、调整参数并最终制作音乐。
4. 兼容性：MIDI 文件在不同的设备和软件中通常具有良好的兼容性，因为 MIDI 协议是一个公开标准。
5. 应用场景：除了音乐制作，MIDI 也被用于电影配乐、游戏音乐、教育和其他多种场合。

这个是一个在线 midi 的解析网站 cifkao.github.io/html-midi-p…

编一个小星星

这是一个小星星的乐谱，说实话作者现在也看不懂， 但是能够知道 一闪一闪亮晶晶，满天都是小星星， 这上面的数字其实就是音调，音调就是频率， 然后每个竖线就是一个固定的时间段，这个时间段内两个数字相对来说间隔会短一些。

对就这些文盲乐理已经可以通过 shadertoy完成这个曲子的播放... 就是这么简单，打开 shadertoy新建一个 shader，增加 sound

代码如下，at表示什么时候播放， tone表示音调是多少。可以看到不同的音调其实就是 440hz乘上 2的1/12次方 。 由于我们什么也不懂， i表示谱子中竖线时间间隔， j表示竖线内音符的间隔，每个音符就是一个平率， 贴入以下代码，最起码能听出来是《小星星》

#define repeat 8.0
#define at(t) exp(-3.0*mod(time-t, repeat)) 
#define tone(x) sin(6.2831 * 440.*exp2((float(x))/12.) * time)



vec2 mainSound( int samp, float time )
{


    float sig;
    float i = 1.0;
    float j = 0.28;
    
    
    sig += tone(1) * at(i*0. + j*0.);
    sig += tone(1) * at(i*0. + j*1.);

    sig += tone(5) * at(i*1. + j*0.);
    sig += tone(5) * at(i*1. + j*1.);

    sig += tone(6) * at(i*2. + j*0.);
    sig += tone(6) * at(i*2. + j*1.);
    
    sig += tone(5) * at(i*3. + j*0.);
    
    sig += tone(4) * at(i*4. + j*0.);
    sig += tone(4) * at(i*4. + j*1.);

    sig += tone(3) * at(i*5. + j*0.);
    sig += tone(3) * at(i*5. + j*1.);

    sig += tone(2) * at(i*6. + j*0.);
    sig += tone(2) * at(i*6. + j*1.);
    
    sig += tone(1) * at(i*7. + j*0.);
    

    
    return vec2( sig);
}

Material

1. Learning About Sound: www.bilibili.com/video/BV1C7…
2. 声音的本质： www.bilibili.com/video/BV1T7…
3. 声音数字化： www.bilibili.com/video/BV1tT…
4. 扬声器原理： www.bilibili.com/video/BV1h3…
5. 琴弦弹出的音为什么会存在多个频率： www.bilibili.com/video/BV1dr…
6. 李永乐傅立叶变换： www.youtube.com/watch?v=0Lu…
7. 李永乐音律系统： www.bilibili.com/video/BV124…
8. 拍子，节奏，律动的区别： www.bilibili.com/video/BV1mM…
9. Ring : www.bilibili.com/video/BV1Aw…
10. Amplitude Modulation: www.bilibili.com/video/BV14b…
11. Frequency Modulation: www.bilibili.com/video/BV1XD…