Skip to content

drumsmidi/DrumMidiEditorApp

Repository files navigation

実行環境

image

使用ライブラリ(WinUI3対応)

使用パッケージ メモ
Microsoft.Windows.SDK.BuildTools
Microsoft.WindowsAppSDK
Microsoft.Graphics.Win2D Canvasの描画に使用
Microsoft.ML 機械学習に使用(活用できてません)
NAudio BGM再生、周波数解析に使用
OpenCvSharp4.Windows MP4の動画出力に使用

Actions によるビルド設定

署名の作成

[証明書の選択]より、証明書の作成を行う。 image

Githubへの署名登録

  1. Visual Studioで[ツール]-[コマンドライン]-[開発者用 PowerShell]をクリックしてPowerShellを起動
cd '.\DrumMidiEditorApp\DrumMidiEditorApp (Package)\'

$pfx_cert = Get-Content '.\DrumMidiEditorApp (Package)_TemporaryKey.pfx' -Encoding Byte
[System.Convert]::ToBase64String($pfx_cert) | Out-File 'DrumMidiEditorApp (Package)_TemporaryKey.txt'
  1. Githubの [Settings] - [Secrets] - [Actions] の [New repository secret]ボタンより下記2つの設定を登録

1個目

  • Name:「Base64_Encoded_Pfx」
  • Value:1で作成した「DrumMidiEditorApp (Package)_TemporaryKey.txt」の中身

2個目

  • Name:「Pfx_Key」
  • Value:署名のパスワード

Workflowの追加

image

参考:WinUI 3 アプリの継続的インテグレーションをセットアップする
https://docs.microsoft.com/ja-jp/windows/apps/package-and-deploy/ci-for-winui3?pivots=winui3-packaged-csharp

設定メモ

    strategy:
      matrix:
        configuration: [Release]
        #configuration: [Debug, Release]
        platform: [x64]

    env:
      Solution_Name: DrumMidiEditorApp.sln
      Test_Project_Path: none
      Wap_Project_Directory: DrumMidiEditorApp\DrumMidiEditorApp (Package)
      Wap_Project_Path: DrumMidiEditorApp\DrumMidiEditorApp (Package)\DrumMidiEditorApp (Package).wapproj

    # Install the .NET Core workload
    - name: Install .NET Core
      uses: actions/setup-dotnet@v3
      with:
        dotnet-version: 8.0.x

    # Execute all unit tests in the solution
    # - name: Execute unit tests
    #   run: dotnet test

    # Create the app package by building and packaging the Windows Application Packaging project
    - name: Create the app package
      run: msbuild $env:Wap_Project_Path /p:Configuration=$env:Configuration /p:UapAppxPackageBuildMode=$env:Appx_Package_Build_Mode /p:AppxBundle=$env:Appx_Bundle /p:PackageCertificateKeyFile=GitHubActionsWorkflow.pfx /p:PackageCertificatePassword=${{ secrets.Pfx_Key }}
      env:
        Appx_Bundle: Never
        #Appx_Bundle: Always
        Appx_Bundle_Platforms: x64
        #Appx_Bundle_Platforms: x86|x64
        Appx_Package_Build_Mode: SideloadOnly
        #Appx_Package_Build_Mode: StoreUpload
        Configuration: ${{ matrix.configuration }}
        Platform: ${{ matrix.platform }}

インストール&アンインストール

テーマ設定

各PCのテーマ設定によって配色が変わります。
アプリごとに Dark / Light の設定が可能らしいのですが、未対応です。

image

image

テーマの変更は、デスクトップ上で [右クリック]-[個人用設定]-[テーマ] から設定できます。
image

メニューバー

image

  • File

    • New
       編集中の情報を破棄し、新しいデータを作成します。
    • Open
       DMSファイルを開きます。
    • Save
       DMSファイルを上書きします。
    • SaveAs
       DMSファイルを別名で保存します。
    • Export
       - Midi
        MIDIファイルを出力します。
       - Video
        シーケンスを動画として保存します。
        再生ウィンドウの設定と [Config]-[Video] の設定を元に動画を作成します。(対応形式:MP4)
    • Import
       - Midi
        MIDIファイルを取込みます。 ※未サポート
  • Ch選択
     編集対象のチャンネルを切替えます。
     ※非推奨:試しに追加しましたがチャンネル切替に対する考慮ができていません。

  • Bgm
     BGM再生のON/OFFを切替えます。

  • Midi-Out
     ノート再生(MIDI-OUTイベント)の ON/OFF を切替えます。

  • 再生
     最初から再生します。

  • 停止
     再生を停止します。

  • ループ再生
     小節開始番号~終了番号までの区間をループ再生します。

  • 小節開始番号
     ループ再生の開始小節位置を指定します。 (0~999)

  • 小節終了番号
     ループ再生の終了小節位置を指定します。 (0~999)
     CONボタンを ON に設定している場合、変更できません。

  • 小説連結
     ループ再生の小節連結 ON/OFFを切替えます。
     ONに設定した場合、[小節終了番号] = [小説開始番号] + [小説連結数] を自動で設定します。

  • 小説連結数
     小節連携数を指定します。(0-100)

  • Player
     プレイヤーの表示 ON/OFF を切替えます。

MusicInfoページ

耳コピ対象のBGM情報を設定する画面です。

image

  • BGMファイルパス
     BGMのファイルパスを指定します。(対応形式:MP3、WAV)

  • BPM
     ベースとなるBPMを設定します。

  • BGM再生開始位置
     BGMの再生開始位置(秒)を設定します。

  ※小節番号0の先頭位置を基準に、入力した秒数後にBGMを再生します。

  • BGM音量
     BGMの音量を設定します。(0~100)

  • 自由入力欄
     自由入力欄です。

  • イコライザ設定
     BGMのイコライザを設定します。
     (左クリックで入力、右クリックで削除、左ドラッグ&ドロップで移動)

  X軸:Hz(20~20000Hz)
  Y軸:音量(db)の増減値(-60db~10db)

  ※譜面保存時/アプリ終了時にイコライザの設定は保存されません。

  • リセット
     Equalizer の入力をリセットします。

  • イコライザ
     Equalizer ON/OFFを切替えます。

  • 波形
     Equalizer 波形の表示ON/OFFを切替えます。 ※未サポート

MidiMapページ

MidiMapSet を設定する画面です。
image

適用ボタン

編集中の MidiMapSet の内容を正本に反映します。

インポートボタン

取込対象のテンプレートファイル(.dms)を選択後
『既存⇒インポート先へのMidiMap置換』と『インポートMidiMapSet』を表示します。

image

『既存⇒インポート先へのMidiMap置換』

既存MidiMapSetでノートの入力があるMidiMapの一覧を表示します。
 image

  • 上部
     既存MidiMapSetでノートの入力があるMidiMap

  • 下部
     インポートMidiMapSetのMidiMap(ノート置換先)
     初期値として、置換先のMidiMap で同一のMIDI番号が設定されているアイテムの情報を設定します。

『インポートMidiMapSet』 のアイテムをドラッグし
『既存⇒インポート先へのMidiMap置換』へドロップすることで、置換先のMidiMapを設定できます。

エクスポートボタン

出力先ファイルを指定し、MidiMapSetのテンプレートファイル(.dms)を保存します。
(現在編集中の情報を保存)

出力ファイルの中身(サンプル)

<DMS VERSION="1.0">
  <MIDIMAPSET CHANNEL="0">
    <MIDIMAPGROUP DISPLAY="0" KEY="0" NAME="[Cowbell]" VOLUME="27">
      <MIDIMAP DISPLAY="1" KEY="0" NAME="Hit" MIDI="56" VOLUME="0" COLOR="#FFFFFF00" SCALE="" />
    </MIDIMAPGROUP>
    <MIDIMAPGROUP DISPLAY="1" KEY="1" NAME="[Hi-Hat]" VOLUME="27">
      <MIDIMAP DISPLAY="1" KEY="3" NAME="Open 3" MIDI="26" VOLUME="0" COLOR="#FF6FFFFF" SCALE="" />
      <MIDIMAP DISPLAY="1" KEY="2" NAME="Open 2" MIDI="25" VOLUME="0" COLOR="#FF00FFFF" SCALE="" />
      <MIDIMAP DISPLAY="1" KEY="1" NAME="Open 1" MIDI="24" VOLUME="0" COLOR="#FF80FFFF" SCALE="" />
    </MIDIMAPGROUP>
    <PLAYER MODE="Sequence">
      <PLAYERGROUP KEY="0" X="100" Y="100" MAGNIFICATION="1" />
      <PLAYERGROUP KEY="1" X="100" Y="100" MAGNIFICATION="1" />
    </PLAYER>
    <PLAYER MODE="SequenceVertical">
      <PLAYERGROUP KEY="0" X="100" Y="100" MAGNIFICATION="1" />
      <PLAYERGROUP KEY="1" X="100" Y="100" MAGNIFICATION="1" />
    </PLAYER>
    <PLAYER MODE="Score">
      <PLAYERGROUP KEY="0" X="100" Y="100" MAGNIFICATION="1" />
      <PLAYERGROUP KEY="1" X="100" Y="100" MAGNIFICATION="1" />
    </PLAYER>
    <PLAYER MODE="Simuration">
      <PLAYERGROUP KEY="0" X="100" Y="100" MAGNIFICATION="1" />
      <PLAYERGROUP KEY="1" X="100" Y="100" MAGNIFICATION="1" />
    </PLAYER>
  </MIDIMAPSET>
</DMS>

キー変更

既存MidiMapSetでノートの入力があるMidiMapの一覧を表示します。

  • キー変更対象の MidiMap を選択し、キー変更ボタン押下
     image

  • 変更後の MidiMap を選択し、OKボタン押下
     image

  • 確認画面が表示されるので、Yesボタン押下でキー変換実行
     image

  • キー変換完了
     image

Editerページ

image

シート操作

小節移動

選択した小節番号の位置へ移動します。
image

シート移動

シート移動を左クリック
image

ポップアップされた領域をマウス左でスライドさせ、シート位置を移動
(ドラッグ開始位置を基準に、スライドした位置までの差分を等間隔で移動させます)
image

小節分割数

1小節内の分割数を指定することで、指定した間隔でノート入力を行えます
image

128分割で入力
image

16分割で入力
image

サポート線

[Measure no] の赤枠の範囲内で、マウス左でスライドさせるとスライドした分の等間隔のサポート線を表示します
(マウス右クリックで、サポート線を解除)
image
image

シートの行列の幅調整

1セルのサイズを指定します
image

image

image

ノート編集

入力音量

ノートON の音量を指定します。
image

指定後、ノートONを設定すると指定した音量でノートONが登録されます。
image

ノート入力・削除

ノートON/OFF の入力切替を行います。
image

指定位置で

  • マウス左クリックでノート入力
  • マウス右クリックでノート削除

image

ノートOFF は試しに作成したので、使用はお勧めしません

範囲選択

image

マウス左押下後、マウスを移動させることで範囲選択モードとなります。
image

タイプ イメージ
Normal 入力した範囲内を選択
image
Split 範囲内の左 または 右側の全てを選択します
image
All 範囲内の行全てを選択します
image

範囲選択 機能

範囲選択を

  • マウス左 ドラッグ&ドロップで、ノート/BPMの移動
  • マウス右クリックで範囲選択内のノート/BPMを削除
  • Ctrl + マウス左クリックで、範囲選択内のノート/BPMをコピー
    再度、Ctrl + マウス左クリックすることで、その位置を基準にコピーした情報を貼り付けます

BPMは、[範囲選択にBPMノートを含める] を ON にしている場合のみ対象となります

MidiMap選択

選択した MidiMapGroup or MidiMap の音量を Volume 領域に表示します。
image

音量編集モード

音量編集モードを指定します。
image

Volumeエリアで音量編集モード別の操作で対象ノートONの音量変更を行います。
image

モード イメージ
FreeHand フリーハンド
image
StraightLine 直線
image
Curve1 ベジエ曲線
image
Curve2 ベジエ曲線
image }
Curve3 ベジエ曲線
image
Curve4 ベジエ曲線
image
UpDown 始点と終点間の音量差を加算
image
image
IntonationHL 始点と終点間の音量差を加算
但し、始点より高い音量は+、始点より低い音量はーで加算
image
image
IntonationH 始点と終点間の音量差を加算
但し、始点より高い音量のみ加算
image
image
IntonationL 始点と終点間の音量差を加算
但し、始点より低い音量のみ加算
image
image

Undo/Redo

ノート/BPM 入力の Undo/Redo を実行します。

検証不十分で不具合も多いかも

WaveForm

自動採譜とか自作できないかなと思って、試作した機能。非推奨

周波数解析 試作
image

Scoreページ

1画面内で全小節の情報を表示します。
(今の所、機能拡張の予定はありません)

image

  • 音量によるノートサイズ変更
     音量による ノートサイズ縮小 ON/OFF 切替

  • 音量0のノート表示
     音量=0 のノート表示 ON/OFF 切替

  • ノート高さ
     ノートサイズの高さ

  • ノート横幅
     ノートサイズの横幅

Player

Editで入力したノート情報のシーケンスを表示する機能です。

プレイヤー表示

プレイヤー表示スイッチ 押下で、プレイヤーの表示/非表示を切り替えます。
また、プレイヤーウィンドウを右クリックすることでも非表示にできます。

image

プレイヤー表示位置移動

プレイヤーをマウス左でドラッグすることでプレイヤーの位置を移動できます。

現状、アプリ内の範囲でのみ移動可能です。
(別ウィンドウの作成が出来ない為)

プレイヤー表示タイプ

現在、3種類作成しています。(Sequence以外は使い物になりません)

種類 概要
Sequence ノートを右から左へ または 上から下へ流す作り
Score 譜面表示を目標とした作り
Simuration ドラムを上から見たような構図の作り
ScoreType2 譜面表示を目標とした作り

Sequence

image

image

Score

image

Simuration

image

ScoreType2

image