Merge pull request #2 from Live2D/develop

Update to Cubism 5 SDK MotionSync Plugin for Web R1

CHANGELOG.md

@@ -4,6 +4,29 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [5-r.1] - 2024-05-30
+
+### Added
+
+* Add microphone input sample.
+
+### Changed
+
+* Update to follow the changes in `Cubism 5 SDK for Web R1`.
+* Change development environment from webpack to Vite.
+* Change the usage part of function `MotionSyncUtil.fmod()` to function `CubismMath.mod()`.
+* Change function `MotionSyncUtil.fmod()` to deprecated.
+* Change the Japanese sound file to one with a sampling frequency of 48 kHz.
+* Change to adjust model size to fit mobile device.
+* Rename `LAppPlaySound` to `LAppAudioManager`.
+  * Correspondingly, renamed `lappplaysound.ts` to `lappaudiomanager.ts`.
+* `_audioLevelEffectRatio` has been marked as `Unused`.
+
+### Removed
+
+* Remove `AudioWorklet` process that was no longer needed in `LAppMotionSyncAudioManager`.
+* Remove the unnecessary processing for the mobile device Apple Webkit of `LAppMotionSyncAudioManager`.
+* Remove `CubismMotionSync.SetAudioLevelEffectRatio` function.
 
 ## [5-r.1-beta.2] - 2024-01-30
 
@@ -38,4 +61,5 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 * New released!
 
 
+[5-r.1]: https://github.com/Live2D/CubismWebMotionSyncComponents/compare/5-r.1-beta.2...5-r.1
 [5-r.1-beta.2]: https://github.com/Live2D/CubismWebMotionSyncComponents/compare/5-r.1-beta.1...5-r.1-beta.2

Framework/src/cubismmodelmotionsyncsettingjson.ts

@@ -15,7 +15,7 @@ export const MotionSync: string = 'MotionSync';
 export class CubismModelMotionSyncSettingJson extends CubismModelSettingJson {
   public constructor(buffer: ArrayBuffer, size: number) {
     super(buffer, size);
-    this._motionSyncFilePath = this.GetJson()
+    this._motionSyncFilePath = this.getJson()
       .getRoot()
       .getValueByString(FileReferences)
       .getValueByString(MotionSync)

Framework/src/cubismmotionsyncutil.ts

@@ -20,6 +20,8 @@ export enum EngineType {
 
 export class MotionSyncUtil {
   /**
+   * @deprecated 非推奨になりました。代わりにCubismMath.fmodを使用してください。
+   *
    * 浮動小数点の余りを求める。
    *
    * @param x 被除数（割られる値）

Framework/src/live2dcubismmotionsync.ts

@@ -13,6 +13,7 @@ import {
   CubismLogInfo,
   CubismLogWarning
 } from '@framework/utils/cubismdebug';
+import { CubismMath } from '@framework/math/cubismmath';
 import {
   CubismMotionSyncData,
   CubismMotionSyncDataSetting
@@ -21,7 +22,7 @@ import { CubismMotionSyncEngineAnalysisResult } from './cubismmotionsyncenginean
 import { CubismMotionSyncEngineController } from './cubismmotionsyncenginecontroller';
 import { CubismMotionSyncEngineCri } from './cubismmotionsyncenginecri';
 import { CubismMotionSyncProcessorCRI } from './cubismmotionsyncprocessorcri';
-import { EngineType, MotionSyncUtil } from './cubismmotionsyncutil';
+import { EngineType } from './cubismmotionsyncutil';
 import { ICubismMotionSyncEngine } from './icubismmotionsyncengine';
 import { ICubismMotionSyncProcessor } from './icubismmotionsyncprocessor';
 
@@ -331,10 +332,11 @@ export class CubismMotionSync {
       this.analyze(model, processIndex);
 
       // Reset counter.
-      this._processorInfoList.at(processIndex)._currentRemainTime = MotionSyncUtil.fmod(
-        this._processorInfoList.at(processIndex)._currentRemainTime,
-        processorDeltaTime
-      );
+      this._processorInfoList.at(processIndex)._currentRemainTime =
+        CubismMath.mod(
+          this._processorInfoList.at(processIndex)._currentRemainTime,
+          processorDeltaTime
+        );
 
       for (
         let targetIndex = 0;
@@ -509,19 +511,6 @@ export class CubismMotionSync {
     }
   }
 
-  public SetAudioLevelEffectRatio(
-    processIndex: number,
-    audioLevelEffectRatio: number
-  ): void {
-    if (!CubismMotionSync.isInitialized()) {
-      return;
-    }
-    if (processIndex < this._processorInfoList.getSize()) {
-      this._processorInfoList.at(processIndex)._audioLevelEffectRatio =
-        audioLevelEffectRatio;
-    }
-  }
-
   public getData(): CubismMotionSyncData {
     return this._data;
   }
@@ -614,7 +603,7 @@ export class CubismProcessorInfo {
   _blendRatio: number;
   _smoothing: number;
   _sampleRate: number;
-  _audioLevelEffectRatio: number;
+  _audioLevelEffectRatio: number; // Unused
   _sampleBuffer: csmVector<number>;
   _sampleBufferIndex: number;
   _model: CubismModel;

Framework/src/motionsyncconfig_cri.ts

@@ -116,7 +116,7 @@ export class MotionSyncAnalysisConfig_CRI {
 
   public BlendRatio: number;
   public Smoothing: number;
-  public AudioLevelEffectRatio: number;
+  public AudioLevelEffectRatio: number; // Unused
   private _nativeArray: Float32Array;
   private _nativeArrayPtr: number;
 }

NOTICE.ja.md

@@ -4,11 +4,11 @@
 
 # お知らせ
 
-## [制限事項] iOSでのサンプルの動作について (2024-01-30)
+## [制限事項] macOS Safariでのマイクサンプルプロジェクト動作について (2024-05-30)
 
-iOS端末におけるサンプルプロジェクトの動作につきまして、音声が正常に再生されないことがある問題を確認しております。
+macOS端末におけるSafariを利用してのマイクサンプルプロジェクトの動作につきまして、ループバック音声が正常に再生されないことがある問題を確認しております。
 
-この問題は今後のリリースでの修正を予定しております。
+この問題は今後のリリースでの修正を予定しております。ご利用の際はSafari以外のブラウザをご利用ください。
 
 ---
 

NOTICE.md

@@ -4,11 +4,11 @@
 
 # Notices
 
-## [Restrictions] Sample operation on iOS (2024-01-30)
+## [Restrictions] Microphone sample operation on macOS Safari (2024-05-30)
 
-We have identified an issue with the sample project, in which the audio may not play properly on iOS devices.
+We have identified an issue with the microphone sample project, in which the loopback audio may not play properly on macOS Safari.
 
-This matter will be addressed in a future release.
+This matter will be addressed in a future release. Please use a browser other than Safari.
 
 
 ---

README.ja.md

@@ -92,7 +92,9 @@ Samplesの実行を行う場合は、追加で以下のファイル内の該当
 
 * Samples/TypeScript/Demo/index.html
 * Samples/TypeScript/Demo/tsconfig.json
-* Samples/TypeScript/Demo/webpack.config.js
+* Samples/TypeScript/Demo/vite.config.mts
+* Samples/TypeScript/Demo/vite.config.microphone.mts
+* Samples/TypeScript/Demo/copy_resources.js
 
 ディレクトリ構成を任意のものに変更したい場合も、上記のファイルを編集することで適用することが出来ます。
 
@@ -101,26 +103,25 @@ Samplesの実行を行う場合は、追加で以下のファイル内の該当
 #### launch.json の作成
 
  **Cubism SDK for Web 及び本プラグインを配置したディレクトリ** に `.vscode` ディレクトリを作成し、Cubism SDK for Webの`.vscode` ディレクトリから `launch.json` をコピーします。
-コピーが完了したら、`url` キーを以下のように修正します。 `CubismWebMotionSyncComponents` となっている箇所は、本プラグインのルートディレクトリの名称に書き換えてください。
+コピーが完了したら、`webRoot` キーを以下のように修正します。 `CubismWebMotionSyncComponents` となっている箇所は、本プラグインのルートディレクトリの名称に書き換えてください。
 
 ```
-"url": "https://localhost:5000/CubismWebMotionSyncComponents/Samples/TypeScript/Demo/"
+"webRoot": "${workspaceFolder}/CubismWebMotionSyncComponents/Samples/TypeScript/Demo/",
 ```
 
 #### 実行
 
 コマンドパレット（*View > Command Palette...*）で `>Tasks: Run Task` を入力することで、タスク一覧が表示されます。
 
 1. タスク一覧から `npm: install - CubismWebMotionSyncComponents/Samples/TypeScript/Demo` を選択して依存パッケージのダウンロードを行います
-1. タスク一覧から `npm: build - CubismWebMotionSyncComponents/Samples/TypeScript/Demo` を選択してサンプルデモのビルドを行います
-1. タスク一覧から `npm: create-ca - CubismWebMotionSyncComponents/Samples/TypeScript/Demo` を選択して開発用の認証局情報を作成します
-1. タスク一覧から `npm: create-cert - CubismWebMotionSyncComponents/Samples/TypeScript/Demo` を選択して開発用の証明書情報を作成します
-1. タスク一覧から `npm: serve-https - CubismWebMotionSyncComponents/Samples/TypeScript/Demo` を選択して動作確認用の簡易サーバを起動します
-1. ブラウザの URL 欄に `https://localhost:5000/CubismWebMotionSyncComponents/Samples/TypeScript/Demo/` と入力してアクセスします 
+1. タスク一覧から `npm: build - CubismWebMotionSyncComponents/Samples/TypeScript/Demo` を選択してオーディオファイルを利用したサンプルデモのビルドを行います
+1. もしくは、タスク一覧から `npm: build:microphone - CubismWebMotionSyncComponents/Samples/TypeScript/Demo` を選択してマイク入力を利用したサンプルデモのビルドを行います
+1. タスク一覧から `npm: serve - CubismWebMotionSyncComponents/Samples/TypeScript/Demo` を選択して動作確認用の簡易サーバを起動します
+1. ブラウザの URL 欄に `https://localhost:5000/` と入力してアクセスします 
 1. コマンドパレットから `>Tasks: Terminate Task` を入力して `npm: serve-https` を選択すると簡易サーバが終了します
 
 NOTE: `CubismWebMotionSyncComponents` となっている箇所は変更している場合、本プラグインのルートディレクトリの名称
-NOTE: 本サンプルプロジェクトでは、`mkcert` パッケージを利用して自己署名証明書を発行しています。本サンプルプロジェクトを利用した場合に作成される自己署名証明書は一部ブラウザなどでは警告が出ることがあり、開発環境以外での利用は想定していません。
+NOTE: 本サンプルプロジェクトでは、`@vitejs/plugin-basic-ssl` パッケージを利用して自己署名証明書を発行しています。本サンプルプロジェクトを利用した場合に作成される自己署名証明書は一部ブラウザなどでは警告が出ることがあり、開発環境以外での利用は想定していません。
 
 その他のタスクに関してはサンプルプロジェクトの [README.md](Samples/TypeScript/README.ja.md) を参照ください。
 
@@ -147,52 +148,61 @@ NOTE: デバック用の設定は、`.vscode/launch.json` に記述していま
 
 ### Node.js
 
-* 21.5.0
-* 20.11.0
+* 22.2.0
+* 20.13.1
 
 
 ## 動作確認環境
 
 | プラットフォーム | ブラウザ | バージョン |
 | --- | --- | --- |
-| Android | Google Chrome | 120.0.6099.210 |
-| Android | Microsoft Edge | 120.0.2210.115 |
-| Android | Mozilla Firefox | 121.1.0 |
-| iOS / iPadOS | Google Chrome | 120.0.6099.119 |
-| iOS / iPadOS | Microsoft Edge | 120.0.2210.126 |
-| iOS / iPadOS | Mozilla Firefox | 121.2 |
-| iOS / iPadOS | Safari | 17.2 |
-| macOS | Google Chrome | 120.0.6099.216 |
-| macOS | Microsoft Edge | 120.0.2210.121 |
-| macOS | Mozilla Firefox | 121.0.1 |
-| macOS | Safari | 17.2.1 |
-| Windows | Google Chrome | 120.0.6099.217 |
-| Windows | Microsoft Edge | 120.0.2210.121 |
-| Windows | Mozilla Firefox | 121.0.1 |
+| Android | Google Chrome | 125.0.6422.113 |
+| Android | Microsoft Edge | 124.0.2478.104 |
+| Android | Mozilla Firefox | 126.0 |
+| iOS / iPadOS | Google Chrome | 125.0.6422.80 |
+| iOS / iPadOS | Microsoft Edge | 125.0.2535.60 |
+| iOS / iPadOS | Mozilla Firefox | 126.1 |
+| iOS / iPadOS | Safari | 17.4.1 |
+| macOS | Google Chrome | 125.0.6422.113 |
+| macOS | Microsoft Edge | 125.0.2535.67 |
+| macOS | Mozilla Firefox | 126.0 |
+| macOS | Safari | 17.5 |
+| Windows | Google Chrome | 125.0.6422.113 |
+| Windows | Microsoft Edge | 125.0.2535.67 |
+| Windows | Mozilla Firefox | 126.0 |
 
 Note: 動作確認時のサーバの起動は `./Samples/TypeScript/Demo/package.json` の `serve-https` スクリプトを使用して行っています。
 
+### Cubism SDK for Web
+
+[Cubism 5 SDK for Web R1](https://github.com/Live2D/CubismWebSamples/releases/tag/5-r.1)
+
+## サウンドデバイス
+
+入出力用のサウンドデバイスは、既定のデバイスが使用される仕様です。
+
+ご利用の環境によってはハウリングする場合がございますので、サンプルアプリケーションやデバイスの音声再生機器を一度ミュートにするか、マイクとスピーカーの位置を離してご利用ください。
 
 ## プロジェクトへの貢献
 
-プロジェクトに貢献する方法はたくさんあります。バグのログの記録、このGitHubでのプルリクエストの送信、Live2Dコミュニティでの問題の報告と提案の作成です。
+プロジェクトに貢献する方法はたくさんあります。バグのログの記録、このGitHubでのプルリクエストの送信、Live2Dフォーラムでの問題の報告と提案の作成です。
 
 ### フォークとプルリクエスト
 
-修正、改善、さらには新機能をもたらすかどうかにかかわらず、プルリクエストに感謝します。ただし、ラッパーは可能な限り軽量で浅くなるように設計されているため、バグ修正とメモリ/パフォーマンスの改善のみを行う必要があることに注意してください。メインリポジトリを可能な限りクリーンに保つために、必要に応じて個人用フォークと機能ブランチを作成してください。
+修正、改善、さらには新機能をもたらすかどうかにかかわらず、プルリクエストに感謝します。メインリポジトリを可能な限りクリーンに保つために、必要に応じて個人用フォークと機能ブランチを作成してください。
 
 ### バグ
 
-Live2Dコミュニティでは、問題のレポートと機能リクエストを定期的にチェックしています。バグレポートを提出する前に、Live2Dコミュニティで検索して、問題のレポートまたは機能リクエストがすでに投稿されているかどうかを確認してください。問題がすでに存在する場合は、関連するコメントを追記してください。
+Live2Dフォーラムでは、問題のレポートと機能リクエストを定期的にチェックしています。バグレポートを提出する前に、Live2Dフォーラムで検索して、問題のレポートまたは機能リクエストがすでに投稿されているかどうかを確認してください。問題がすでに存在する場合は、関連するコメントを追記してください。
 
 ### 提案
 
-SDKの将来についてのフィードバックにも関心があります。Live2Dコミュニティで提案や機能のリクエストを送信できます。このプロセスをより効果的にするために、それらをより明確に定義するのに役立つより多くの情報を含めるようお願いしています。
+SDKの将来についてのフィードバックにも関心があります。Live2Dフォーラムで提案や機能のリクエストを送信できます。このプロセスをより効果的にするために、それらをより明確に定義するのに役立つより多くの情報を含めるようお願いしています。
 
 
 ## フォーラム
 
-ユーザー同士でCubism SDKの活用方法の提案や質問をしたい場合は、是非フォーラムをご活用ください。
+ユーザー同士でCubism SDKの活用方法の提案や質問をしたい場合は、是非公式クリエイターズフォーラムをご活用ください。
 
 - [Live2D 公式クリエイターズフォーラム](https://creatorsforum.live2d.com/)
-- [Live2D Creator's Forum(English)](https://community.live2d.com/)
+- [Live2D Creators Forum(English)](https://community.live2d.com/)