180222 Learning Log | 00 的学习记录

Summary

• p5.sound 的例子
• 优化了情人节小动画
• Treble + Bass clef 组合练习
• Music Theory 101 Model 4
• 知识大融通 ch12

p5.sound 对象和方法学习

补充昨天 SawOsc/TriOsc 的波形图像

昨天看了半天文档和例子，发现效率还是比较低。今早搜了一下 youtube，发现丹叔也有讲 p5.sound！17.1: Loading and Playing - p5.js Sound Tutorial 开心地刷完了 11 个视频。

Loading and Playing

17.1: Loading and Playing - p5.js Sound Tutorial

加载声音：loadSound()，必需在 setup() 或 draw() 函数内使用。在 p5.js 里一般会用两种方式加载声音文件：

• preload() : 用于在 setup() 之前加载文件，加载成功才开始运行其他部分
• callback() ：如果不想完全加载才运行程序，可以用

var song, slider, button;

function setup() {
    createCanvas(200, 200);
    background(127);
  song = loadSound('song.mp3', loaded);
    button = createButton('play');
    button.mousePressed(togglePlaying);
  slider = createSlider(0, 1, 0.5, 0.01);
}

function loaded() {
  console.log('loaded');
}

function draw() {
  song.setVolume(slider.value());
  // song.pan(slider.value()); //set right or left channel, -1~1
  // song.rate(slider.value()); //set play speed
}

function togglePlaying() {
    if (!song.isPlaying()) {
        song.play(); // or song.loop();
        button.html('pause');
    } else {
        song.pause();
        button.html('play');
    }
}

Add cue

addCue(time,callback,[value]) ：在设定的时间点(a playback cue point)触发事件。 p5.js | addCue

比如可以在游戏中加载音效：17.5: Adding Sound Effects - p5.js Sound Tutorial

Sound Synthesis

17.6: Sound Synthesis - p5.js Sound Tutorial

wave = new p5.Oscillator();

wave.setType('sine');
wave.start();
wave.amp(0.5);
wave.freq(440);

ADSR Envelope

补充昨天的 env 对象。17.7: ADSR Envelope - p5.js Sound Tutorial

A-Attack
D-Decay
S-Sustain
R-Release

优化情人节小动画

查看

• 裁剪音频
• 用 preload 函数预先加载音频
• 增加 play/pause 按钮控制播放
• 调整频谱视觉效果，尝试渐变

拾遗

• sindresorhus/awesome: Curated list of awesome lists：Github 超全索引！
• Basic Electronics Tutorials and Revision：电路电子教材
• Free SFX：免费音效