Music Visualizer

​

let song;

let fft; 

//サウンドファイルをプリロード

function preload() {

song = loadSound("The_Chainsmokers_Bebe_Rexha_-_Call_You_Mine_Official_Video.mp3");

}

function setup() {

createCanvas(windowWidth, windowHeight); //画面いっぱいを使う

colorMode(HSB, 255);//カラーモードをHSBにする

fft = new p5.FFT(0.8, 64);//FFTを初期化にする

fft.setInput(song);//サウンドファイルをFFTの入力にする

}

//画面クリックで音楽が始まり、もう一度クリックすると止まる

function mousePressed() {

  if (song.isPlaying()) {

    // .isPlaying() は再生中ということ

    song.stop();

  } else {

    song.play();

  }

}

function draw() {

blendMode(BLEND); //ブレンドすることによって色が混ざって綺麗に見える

background(0);//背景が黒だとブレンドがよりわかりやすい

noStroke();

//FFT解析　spectrumは波形のこと

let spectrum = fft.analyze(256);

//分析結果を円の大きさで表現する

blendMode(ADD); //ADDで色の交わるところを白くする

for (i = 0; i < spectrum.length; i++) { 

let hue = map(i, 0, spectrum.length - 0, 255, 0);////周波数色相を変化させる

let diameter = map(spectrum[i], 0, 255, 0, height);//スペクトラムのレベルで円の直径を変化させる　hueは色のこと

fill(hue, 255, 10);　// HSBから色を生成する　10は透明感

let x = map(i, 0, spectrum.length - 1, width / 2, width);// 過去の授業のスライド参考

ellipse(x, height/2, diameter, diameter);//

x = map(i, 0, spectrum.length - 1, width / 2, 0);//

ellipse(x, height/2, diameter, diameter);//

}

  var wave = fft.waveform(256);// amplitudeを表現する

  // draw frequencies

  fill('yellow'); //棒の色

  var x = 0; //ぼうがx軸のどこから始まるか

   for (freq of spectrum) {

    rect(x, 600, 5, -freq*2); //-がfrecの前についてるとぼうが上に伸びる。＋だと下に伸びるよ。　５は一本一本のぼうの太さ。*2をfrequenciesにすることによって棒の長さを長くする

     x += 30;//棒とぼうの間隔 -にすると逆方向に行っちゃう

   }

  // draw amplitude

  fill('yellow');　//丸の色

  var x =0; //x軸のどこから線が始まるか

   for (amplitude of wave) {

    ellipse(x, 600-amplitude*200,30); //２００は上下にどれだけ行くか　５は丸の大きさ。 600はy軸。30は一つの丸の大きさ。

     x += 25;　 //丸と丸の間隔

   }

}