Pomodify：p5.jsで作るAudio Visualizer🔊 × Pomodoro Timer🕰️

この記事は、Sun* Advent Calendar 2024 7日目の記事です。

0. 成果物

こんにちは、クリエーターの皆さま！
今回ご紹介するのは...こちら↓

オーディオ・ビジュアライザーとポモドーロタイマーを組み合わせた「Pomodify」を制作しました！

「ビジュアライザー？ポモドーロ？」と聞いてピンとこない方もご安心ください。
まずはデモ動画をぜひご覧ください！きっと「ああ、これね！」と納得していただけるはずです。

デモ映像
https://youtu.be/cKWXDa_HSEo

WEBサイトへのリンク
https://pomodify-beta.vercel.app/

1. はじめに

自己紹介

株式会社Sun Asterisk（以下、Sun*）にてフロントエンドエンジニアをしています「ゆ〜でぃ」です。
Sun*には22卒として入社し、Shopifyを用いたECサイト構築のほか、現在はHR系サービスのフロントエンドの設計・実装を担当しています。
今回は業務で使う機会の少ない「p5.js」を用いて、オーディオ・ビジュアライザーを作成することに挑戦しました。

きっかけ

オーディオ・ビジュアライザーといえば、専用ソフトや映像編集ソフトで作成するのが一般的であり、制作には専門的な知識が必要です。。しかし、Web上で手軽にオーディオ・ビジュアライザーを制作できれば、より多くの人が映像制作やアプリ制作を気軽に楽しめるのではと考えました。その第一歩として、今回はオーディオ・ビジュアライザーと相性抜群のポモドーロタイマーを制作しました。

🔊 オーディオ・ビジュアライザー？

オーディオ・ビジュアライザーとは、音響信号の波形やリズムなどを視覚的なアニメーションやグラフィックとして表現するツールのことです。

🕰️ ポモドーロタイマー？

ポモドーロタイマーとは、25分を1つの作業時間として区切るためのタイマーのことです。このタイマーを使った時間管理術は「ポモドーロ・テクニック」と呼ばれます。

「ポモドーロ (Pomodoro)」はイタリア語で「トマト」を意味します。この名前は、時間管理術の考案者であるフランチェスコ・シリロ氏が、トマト型のキッチンタイマーを使用していたことに由来しています。

2. 技術スタック

使用した技術スタックは以下の通りです。

• 👑 p5.js
• 👑 Web Audio API
• React：コンポーネントベースのUI構築を行うためのライブラリ。
• TypeScript：JavaScriptのスーパーセット。静的型付けにより、型エラーを事前に検出できるため、開発の信頼性を向上させます。
• styled-components：コンポーネントごとのスタイル管理に使用できるCSS in JS ライブラリ。
• Vite：高速にワンコマンドで開発環境を提供するための次世代フロントエンドツール。

p5.jsとは

p5.js は、クリエイティブなビジュアル表現を簡単に実装できるJavaScriptライブラリです。Processingの流れを汲むライブラリであり、アートやビジュアライゼーションに適した豊富な機能を提供しています。

Web Audio APIとは

Web Audio API は、Webブラウザ上で音声の処理や解析を行うためのAPIです。リアルタイムの音声解析やエフェクトの適用など、さまざまな音響処理が可能です。

3. 実装

前章までで、Pomodifyを作ったきっかけと使用した技術スタックについてお伝えしました。
ここからはいよいよ、Pomodifyの実装に入ります！

本章では、Pomodifyで利用した主な実装ポイントについて説明します。特に、p5.jsを使ったグラフィック制御やWeb Audio APIを利用した音響処理、そしてそれらを組み合わせる方法について解説します。

グラフィックや音響処理には数学的な要素も含まれますが、詳細な数式の解説は省略します。「こんな感じで数学的な計算を使っているのか」と軽く理解していただければ十分です！

ビジュアライザー

Pomodifyでは、音楽に合わせてグラッフィックが動的に変化し、色や形が変わる仕組みになっています！音楽には、周波数や振幅など時間によって変化する様々な値があります。

これらの値を利用して、グラデーションや斜め線の描画（斜め線の伸縮）を実現しています。本章では、どのようなに実装しているかを説明していきます。

グラデーションの設定

• mapメソッドは、第1引数の値を第2引数から第3引数の範囲を、第4引数から第5引数の範囲にスケーリングするためのメソッドです。
  • 例）p.map(4, 0, 10, 0, 100)の場合は、第1引数の4の値を0~10から0~100の範囲にスケーリングする処理になり、結果は40となります。
• strokeメソッドは、図形の色の明るさを調整するためのメソッドです。
  今回は、描画する図形の色をRGB値として引数で指定し、その値をstrokeメソッド内で周波数の振幅に合わせて適切に変動させる仕組みを実装しています。
• mapメソッドで指定する色(RGB)を決定していますが、スケールさせる最小値をテーマカラーに指定することで、どんな音楽でもPomodifyの世界観を壊さないように工夫しています！
  • テーマカラー：rgb(133,73,152)
• Pomodifyでは、mapメソッドとstrokeメソッドを活用し、音楽の周波数の振幅などの変数をもとに色や明暗を変動させることで、動きのあるグラフィックを実現しています。具体的には、mapメソッドを使ってRGBの値を特定の範囲内に収めつつ変化させ、strokeメソッドで図形の色を決定しています。

// src/components/Visualizer.tsx
const r = p.map(value * 1.6, COLOR_MIN_VALUE, COLOR_MAX_VALUE, RED_MIN_VALUE, RED_MAX_VALUE);
const g = p.map(value * 1.6, COLOR_MIN_VALUE, COLOR_MAX_VALUE, GREEN_MIN_VALUE, GREEN_MAX_VALUE);
const b = p.map(value * 1.6, COLOR_MIN_VALUE, COLOR_MAX_VALUE, BLUE_MIN_VALUE, BLUE_MAX_VALUE);
p.stroke(r, g, b);

斜め線の描画

• 円状に配置されたビジュアライザーの線を表現するために、線の始点と終点を三角関数を用いて算出しました。
  • sin()やcos()をはじめとした多くの算術演算がp5.jsに用意されているため、様々な図形を容易に表現することができます。
• また、角度を回転させるためのangleOffsetを各引数に追加することで、線を回転させてます。

// src/components/Visualizer.tsx
p.draw = () => {
  for (let i = 0; i < CIRCLE_DEGREES; i += CIRCLE_DIVISION_ANGLE) {
    const radius = p.map(value, 0, 255, CIRCLE_RADIUS, 200); // 半径
    const x1 = radius * p.cos(i + angleOffset);
    const y1 = radius * p.sin(i + angleOffset);
    const x2 = (radius + LINE_LENGTH) * p.cos(i + angleOffset);
    const y2 = (radius + LINE_LENGTH) * p.sin(i + angleOffset);
    p.line(x1, y1, x2, y2);
  }
};

Web Audio APIで音楽とビジュアライザーの連動

音楽の再生

• 以下の図は、音楽再生までの簡易フローチャートを示しています。
• まず、ブラウザがAudioContextをサポートしているかどうかを確認し、サポートしていた場合に音声ファイルをバイナリーのオブジェクトに変換し、デコードしたものをaudioBufferRefに保存します。
• また、再レンダリング時にAudioContextが再生成されないようにuseRefを利用しています。

// src/components/Timer.tsx
const audioContextRef = useRef<AudioContext | null>(null); // 再生成しないためのuseRef

useEffect(() => {
  const AudioContextClass = getAudioContext();

  if (AudioContextClass) {
    audioContextRef.current = new AudioContextClass();
    analyserNodeRef.current = audioContextRef.current.createAnalyser();
    fetch('/audio/sound.mp3')
      .then((response) => response.arrayBuffer()) // 音声データをArrayBufferとして取得
      .then((arrayBuffer) => audioContextRef.current!.decodeAudioData(arrayBuffer))
      .then((audioBuffer) => {
        audioBufferRef.current = audioBuffer;
      })

フーリエ変換

• AnalyserNodeインターフェースは、音声データに対してフーリエ変換を行います。

analyserNodeRef.current!.connect(audioContextRef.current.destination);

• サンプリングビット数の半分に対応する周波数帯域の数が配列のサイズとなり、getByteFrequencyDataメソッドを使用して周波数成分を取得します。

bufferLength = analyserNode.frequencyBinCount;
dataArray = new Uint8Array(bufferLength);
analyserNode.getByteFrequencyData(dataArray);

4. 開発中の課題と解決策

p5.jsとReactの統合

• p5.jsをReactのコンポーネント内で使用する際に、DOM管理手法の違いから描画が正しく行われない問題が発生しました。
• 解決策として、react-p5-wrapperを導入することで、p5.jsをReactと統合しました。

p5.soundの導入エラー

• @types/p5におけるp5.soundの型定義の参照先がp5.jsやreacat-p5-wrapperと干渉して正常に動作しませんでした。
• 解決策として、今回はWEB Audio APIを使うことに決定しましたが、Pomodifyの開発当初は、p5.jsだけで音楽との連携も考えていたのですが、この問題があり断念しました。

ビジュアライザーの描画がチカチカする問題

• rotateメソッド使用したビジュアライザーの回転によって、描画がチカチカする問題が発生した。
• 解決策として、rotateメソッドの代替として、三角関数メソッドの引数にoffsetを追加することで座標上で回転させる工夫を行ないました。

5. まとめ

今回は、オーディオ・ビジュアライザーを使ったポモドーロタイマー「Pomodify」を作成しました。p5.jsの魅力は、他のGUIライブラリと比べて制約が少なく、手軽に実装できる点です。この点については、上記のコードからも理解していただけたかと思います。皆さんもぜひ、フロントエンドの入門としてp5.jsを使ったコンテンツ制作に挑戦してみてはいかがでしょうか。

今後の展望

Pomodifyは、「誰もが気軽に音楽を聴きながらポモドーロタイマーを利用できる」をモットーに、ビジュアライザーのカスタマイズ機能や、再生できる音源の拡充などの機能拡張を行う予定です。

また、今回のきっかけでもあるオーディオ・ビジュアライザーを生成するためのツール制作にも着手したいと考えています。次回はそちらの内容で続編の記事を書ければと思っています。

おわりに

最後まで、ご覧いただきありがとうございました。
以下に、ソースコードと参考資料を添付しておりますので、もし宜しければご一読くださいませ。

6. ソースコードと参考資料

Github

https://github.com/yuuuda1/Pomodify

参考資料

https://editor.p5js.org/paigem/sketches/KLvXoDZZ_

https://www.cresco.co.jp/blog/entry/15653.html

裏話

• 音源は生成AIとgarageBandを用いて作成しました。
• 制作期間が短かったため、ソースコードのリファクタリングが追いついておりませんが、ご容赦ください。