「TAURI」で「ピアノ音楽」アプリを作ろう

開発言語

技術解説

連載 [第8回] :

「TAURI」＋「Rust」ではじめるデスクトップアプリ開発

2024年1月16日(火)

大西武 (オオニシタケシ)

第8回の今回は、「TAURI」でピアノのUIを演奏するとピアノのサウンドが鳴るデスクトップアプリを開発していきます。

ドの音を再生するだけのサンプル

まずはRustで1音出すだけの実装をしてみます。ピアノの鍵盤は「HTML5＋JavaScript＋CSS」を使ってWebページをデザインします(後述)。本当は、見た目だけ先に作り、後から音を出すようにプログラミングしても良かったのですが、今回は1音鳴らせるようになればWebページの鍵盤に合わせてそれぞれ音が鳴らせるようになれば良いので、このような順番の解説にしました。

今回のTAURIでは、図4のような「State(ステート)」という機能を使います。この機能は「TAURIコマンド」「TAURIセットアップハンドラ」「Windowイベントハンドラ」からState変数を共有できます。つまりグローバル変数のように、3つの機能からState変数にアクセスできます。なぜこのようなやり方をするかと言うと、Rustはグローバル変数を使わないように推奨されているからだと思われます。

図4：「TAURIステート」について

Sound構造体のコーディング

次のように「src」→「sound.rs」ファイルを作成し、コーディングしてサウンドを扱う部分を「Sound」構造体にまとめます。と言っても、今回は「コンストラクタ」の「new」メソッドと、サウンドを再生する「play」メソッドしかありませんが。

図4で見たようにTAURIでステート機能を使うのですが、State変数は「イミュータブル(変更不可)」です。そこで「Mutex型」という機能でラップすれば、「ミュータブル(変更可能)」にデータを死守してくれます。

なお、サウンドの読み込みと再生についての詳細は、kiraクレートを使った第5回の内容が参考になると思います。ただし、今回はMutex型で2つのプロパティをラップしています。

・「src-tauri」→「src」→「sound.rs」サンプルコード

01//Mutexのクレート
02use std::sync::Mutex;
03//サウンドクレート
04use kira::{
05  manager::{
06    AudioManager, AudioManagerSettings,
07    backend::cpal::CpalBackend,
08  },
09  sound::static_sound::{StaticSoundData, StaticSoundSettings},
10};
11//tauriクレート
12use tauri::App;
13//サウンド構造体
14pub struct Sound {
15  sound_manager: Mutex<AudioManager>,
16  sound_data: Mutex<Vec<StaticSoundData>>,
17}
18//サウンド構造体のメソッド
19impl Sound {
20  //コンストラクタ
21  pub fn new(
22    app:&mut App,
23    path:Vec<String>
24  ) -> Self {
25    let snd_manager = AudioManager::<CpalBackend>::new(
26      AudioManagerSettings::default()
27    ).expect("Error");
28    let mut data = Vec::new();
29    for p in path {
30      let resource_path = app.path_resolver()
31      .resolve_resource(p)
32      .expect("failed to resolve resource");
33      let d = StaticSoundData::from_file(
34        resource_path,
35        StaticSoundSettings::default()
36      ).unwrap();
37      data.push(d);
38    }
39    Sound {
40      sound_manager: Mutex::new(snd_manager),
41      sound_data: Mutex::new(data),
42    }
43  }
44  //サウンド再生
45  pub fn play(
46    &self,
47    index:usize
48  ) {
49    let mut snd_manager = self.sound_manager.lock().unwrap();
50    let snd_data = self.sound_data.lock().unwrap();
51    snd_manager.play(snd_data[index].clone()).expect("Error play");
52  }
53}

【サンプルコードの解説】
Mutex型を扱うクレートとサウンドクレート、TAURIクレートを読み込みます。
Mutex型でラップしたオーディオマネージャー変数とサウンドデータ配列で構成されたSound構造体を宣言します。
「impl Sound」でSound構造体のメソッドを定義します。
コンストラクタの「new」メソッドでサウンドファイルパス配列からサウンドを読み込みます。その際「tauri.conf.json」のリソースで指定した"sounds"フォルダ内のoggファイルのパスを「path_resolver」メソッドの「resolve_resource」メソッドでリソースパスを取得します。
「play」メソッドでサウンドを再生します。その際Mutex型でラップしたオーディオマネージャーとサウンドデータを「lock」メソッドで「ロック」してからそれぞれ使えるようになります。

メインファイルのコーディング

次のように「src」→「main.rs」ファイルをコーディングしたら、ターミナルで「$ cargo-tauri dev」コマンドを実行してください。最初に「ド」の音が1度だけ再生されます。図5のように、まだピアノの鍵盤もなくデフォルトのWebページなのでピアノは弾けません。

ここでステート機能を使います。ステート機能を使わないと、バックエンド内の大部分からアクセスできるState変数が保持できません。

図5：デフォルトのWebページ

・「src-tauri」→「src」→「main.rs」サンプルコード

01#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
02//TAURIクレート
03use tauri::{State,Manager};
04//サウンドモジュール
05mod sound;
06//サウンド再生コマンド
07#[tauri::command]
08fn playpiano(
09  note: usize,
10  snd: State<'_, sound::Sound>,
11) {
12  snd.play(note);
13}
14//メイン関数
15fn main() {
16  //サウンドデータ
17  let files = vec![
18    String::from("sounds/C3.ogg"), //白鍵
19    String::from("sounds/D3.ogg"),
20    String::from("sounds/E3.ogg"),
21    String::from("sounds/F3.ogg"),
22    String::from("sounds/G3.ogg"),
23    String::from("sounds/A3.ogg"),
24    String::from("sounds/B3.ogg"),
25    String::from("sounds/C4.ogg"),
26    String::from("sounds/D4.ogg"),
27    String::from("sounds/E4.ogg"),
28    String::from("sounds/F4.ogg"),
29    String::from("sounds/G4.ogg"),
30    String::from("sounds/A4.ogg"),
31    String::from("sounds/B4.ogg"),
32    String::from("sounds/C5.ogg"),
33    String::from("sounds/D5.ogg"),
34    String::from("sounds/E5.ogg"),
35    String::from("sounds/F5.ogg"),
36    String::from("sounds/G5.ogg"),
37    String::from("sounds/A5.ogg"),
38    String::from("sounds/B5.ogg"),
39    String::from("sounds/Df3.ogg"), //黒鍵
40    String::from("sounds/Ef3.ogg"),
41    String::from("sounds/Gf3.ogg"),
42    String::from("sounds/Af3.ogg"),
43    String::from("sounds/Bf3.ogg"),
44    String::from("sounds/Df4.ogg"),
45    String::from("sounds/Ef4.ogg"),
46    String::from("sounds/Gf4.ogg"),
47    String::from("sounds/Af4.ogg"),
48    String::from("sounds/Bf4.ogg"),
49    String::from("sounds/Df5.ogg"),
50    String::from("sounds/Ef5.ogg"),
51    String::from("sounds/Gf5.ogg"),
52    String::from("sounds/Af5.ogg"),
53    String::from("sounds/Bf5.ogg"),
54  ];
55  //デスクトップアプリのセットアップ
56  tauri::Builder::default()
57  .setup(|app| {
58    let snd = sound::Sound::new(app,files);
59    snd.play(0);
60    app.manage(snd);
61    Ok(())
62  })
63  .invoke_handler(tauri::generate_handler![playpiano])
64  .run(tauri::generate_context!())
65  .expect("error while running tauri application");
66}

【サンプルコードの解説】
TAURIクレートのState構造体とManager構造体を読み込みます。
「sound.rs」ファイルを使えるようにするために「mod sound;」でsound.rsファイルをモジュールとして読み込みます。
「playpiano」関数はTAURIコマンド関数で、フロントエンドの同名のメッセージから呼ばれて実行できます。「note」引数はピアノ音のインデックス番号です。「snd」引数はsoundモジュールのSound構造体のState変数で、TAURIのバックエンドの大部分で使いまわせるState変数です。
「main」関数で「files」配列に白鍵7×3オクターブ、続いて黒鍵5×3オクターブの相対パスを指定します。相対パスはリソースのsoundsフォルダ内のoggサウンドファイルを指しています。
TAURIビルダー(「Builder」構造体)のデフォルト(「default」メソッド)のセットアップ(「setup」メソッド)でsound.rsファイルのSound構造体のインスタンスを生成し「snd」変数に代入します。サウンドの0インデックスを再生(playメソッド)します。TAURIマネージャー(「manage」メソッド)でsnd変数をState変数に登録します。「invoke_handler」メソッドで「playpiano」をTAURIコマンド関数にセットしてTAURIを走らせます(「run」メソッド)。

著者

大西武 (オオニシタケシ)

この著者の記事一覧この著者の
記事一覧

1975年香川県生まれ。大阪大学経済学部経営学科中退。プログラミング入門書など30冊以上を商業出版する作家。Microsoftで大賞やNTTドコモでグランプリなど20回以上全国区のコンテストに入賞するアーティスト。オリジナルの間違い探し「3Dクイズ」が全国放送のTVで約10回出題。
https://profile.vixar.jp