🎹

【Flutter】flutter_virtual_pianoの話

2024/01/10に公開

flutter_virtual_pianoというものの使い方を勉強メモ

https://pub.dev/packages/flutter_virtual_piano

https://github.com/InvisibleWrench/flutter_virtual_piano/

このレポジトリの中にあるexampleのファイルをコードリーディングした

https://github.com/InvisibleWrench/flutter_virtual_piano/blob/main/example/lib/main.dart

main.dart
body: Padding(
        padding: const EdgeInsets.all(18.0),
        child: SizedBox(
          height: 80,//ピアノ鍵盤のタテの長さ
          child: VirtualPiano(
            noteRange: const RangeValues(61, 78),//横幅いっぱいにどの音からどの音まで表示するか
            // noteRange: const RangeValues(60, 90),
            highlightedNoteSets: const [
              // HighlightedNoteSet({44, 55, 77, 32}, Colors.green),//指定した鍵盤を色付きで表示
              // HighlightedNoteSet({34, 45, 67, 32}, Colors.blue)
            ],
            onNotePressed: (note, pos) {
              print("note pressed $note pressed at $pos");
            },//noteはmidiの音番号と同じ数値、posは押した鍵盤のタテ位置の数値(一番上がゼロで一番下が1)
            onNoteReleased: (note) {
              print("note released $note");
            },
            onNotePressSlide: (note, pos) {
              print("note slide $note pressed at $pos");
            },
            elevation: 0,
            showKeyLabels: true,
          ),
        ),
      ),

このflutter_virtual_pianoだけでは鍵盤を表示するだけで音は出ません

押した鍵盤の数値が返るので、それを利用してサウンドフォントに繋いで音を出すよう自分でプログラミングするためのもの

このnoteの数値は例えば白鍵の場合、下記のような計算で作られている

flutter_virtual_piano.dart
      var firstWhiteKey = _whites.indexOf(_whites.firstWhere((value) => value > minValue)) - 1;
      var lastWhiteKey = max(_whites.lastIndexWhere((value) => value <= maxValue), lastBlackKey + 1);
      var whiteKeyCount = lastWhiteKey - firstWhiteKey + 1;

鍵盤の数を変更できるようになっているので、上のようなややこしい計算をして、

flutter_virtual_piano.dart
static const _whites = [
    0,
    2,
    4,
    5,
    7,
    9,
    11,

このような配列からindexを取り出し

flutter_virtual_piano.dart
var note = _whites[firstWhiteKey + index];

最終的に上のようにnoteの数値を計算している

Discussion