Webラジオ３号機（5） VUメーター追加

Webラジオ３号機を作っている。こないだ、アルバムアートワークを大きく表示する版を作って、もうそろそろ完成版にしようかな？と思っていた。

『Webラジオ３号機（4）アルバムアート最大化版』3.5インチLCDでアルバムアートを表示するWebラジオを作っていて、現在は、こんな感じで表示している。アルバムアートは240x240ドットで表示していて、そ…

ameblo.jp

ところが、Google Geminiに別件で色々訊いていたら、ESP32-audioI2SにVUメーターを表示するための機能が備わっていることが判明した。

この機能については、ESP32-audioI2SのGitHubを見ても特に何も書いてないので、知らない人は多いと思う。もちろん、おじさんは全く知らなかった。

使い方は簡単で、audio.getVUlevel()を呼ぶと直近の音量の平均値？が符号なし16ビットの値として返ってくる。上位8ビットがL側の音量、下位8ビットがR側の音量がセットされている。

以下のようなプログラムでloop()の中でVU_meter()を呼んで100msごとにaudio.getVUlevel()で音量を取得して表示させる。

今回は、昔のカセットデッキ（今どきの若者は知らないか・・）なんかに付いていたLED VUメーター風に16段階に表示させてみた。

なお、audio.getVUlevel()で返ってくる値は最大で180くらいだったので、そのくらいで最大表示となるようにした。

// VUメーター用変数
unsigned long lastUpdate = 0;
const int updateInterval = 100; // 100ms

//----------------------------
//100msごとにVUメーターを更新
//----------------------------
void VU_meter(){
  // 100ms毎に画面更新
  if (millis() - lastUpdate >= updateInterval) {
    uint16_t vum = audio.getVUlevel();
    uint8_t rawL = vum >> 8;
    uint8_t rawR = vum & 0x00FF;
    // あとは16段階に変換して表示
    int levelL = (rawL > 0) ? (rawL / 11)  : 0; // 175/16 ≒ 11
    int levelR = (rawR > 0) ? (rawR / 11)  : 0;
    tft.setFont(&fonts::FreeSansBold12pt7b);
    // Rチャンネル 
    tft.setCursor(0,110);
    tft.setTextColor(TFT_RED);
    tft.print("R");
    drawVUMeter(21, 110, levelR);
    // Lチャンネル 
    tft.setCursor(0,132);
    tft.setTextColor(TFT_YELLOW);
    tft.print("L");
    drawVUMeter(21, 132, levelL);
    lastUpdate = millis();
  }
}
//----------------------------
// VUメーター描画関数 
//----------------------------
void drawVUMeter(int x, int y, int level) {
    if (level > 16) level = 16;
    // 2. 描画処理 (16個のセグメントを描く)
    int segW = 9; // セグメントの幅
    int segH = 18; // セグメントの高さ
    int gap  = 2;  // 隙間
    for (int i = 0; i < 16; i++) {
        uint16_t color;
        if (i < 8)  color = TFT_GREEN;  // 低域
        else if (i < 12) color = TFT_YELLOW; // 中域
        else color = TFT_RED;           // ピーク域
        if (i < level) {
          tft.fillRect(x + (i * (segW + gap)), y, segW, segH, color);
        } else {
          tft.drawRect(x + (i * (segW + gap)), y, segW, segH, TFT_DARKGREY);
          tft.fillRect(x+1 + (i * (segW + gap)), y+1, segW-2, segH-2, TFT_BLACK);
        }
    }
}