p5.Amplitude でサウンドの振幅を分析します。振幅は振動の大きさです。音は振動であるため、その振幅は音量/ラウドネスと密接に関連しています。getLevel() メソッドは、短期間(1024サンプル)に収集された振幅値の配列を取得し、これらの値の二乗平均平方根(RMS)を返します。
amplitude RMS visualization
Sound Analysis
View Source Code
/**
* @name Measuring Amplitude
* @arialabel Grey circle that increases and decreases in size based on the amplitude of the music playing
* @description <p>Analyze the amplitude of sound with
* p5.Amplitude.</p>
*
* <p><b>Amplitude</b> is the magnitude of vibration. Sound is vibration,
* so its amplitude is is closely related to volume / loudness.</p>
*
* <p>The <code>getLevel()</code> method takes an array
* of amplitude values collected over a small period of time (1024 samples).
* Then it returns the <b>Root Mean Square (RMS)</b> of these values.</p>
*
* <p>The original amplitude values for digital audio are between -1.0 and 1.0.
* But the RMS will always be positive, because it is squared.
* And, rather than use instantanous amplitude readings that are sampled at a rate
* of 44,100 times per second, the RMS is an average over time (1024 samples, in this case),
* which better represents how we hear amplitude.
* </p>
* <p><em><span class="small"> To run this example locally, you will need the
* <a href="http://p5js.org/reference/#/libraries/p5.sound">p5.sound library</a>
* a sound file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.</span></em></p>
*/
let song, analyzer;
function preload() {
// song = loadSound('assets/lucky_dragons_-_power_melody.mp3');
song = loadSound('../../../../p5js-website-legacy-examples/assets/lucky_dragons_-_power_melody.mp3');
}
function setup() {
// createCanvas(710, 200);
createCanvas(windowWidth, windowHeight);
song.loop();
// create a new Amplitude analyzer
analyzer = new p5.Amplitude();
// Patch the input to an volume analyzer
analyzer.setInput(song);
}
function draw() {
background(255);
// Get the average (root mean square) amplitude
let rms = analyzer.getLevel();
fill(127);
stroke(0);
// Draw an ellipse with size based on volume
ellipse(width / 2, height / 2, 10 + rms * 200, 10 + rms * 200);
}
License
Source code is available on GitHub p5.js website legacy.
All examples are licensed under CC BY-NC-SA 4.0.