【質問】sdk web sampleのLappLive2DManagerの仕様について

Cubism SDK 制作の質問やTips紹介
1

sdk for webのsampleを使ってリップシンクと音声再生を行いたいです。
1．SDK/Samples/TypeScript/Demo/srcで新しくTSファイルを作成し、subdelegateのインスタンスを作成
2．インスタンスからlapplive2dmanagerを取得
3．イベントリスナで呼び出す

上記のようなことを行いましたが、
関数を呼び出すと再読込され、肝心のリップシンク・音声再生が行われません。

1度読み込んだ後再読込せず、playVoiceを実行できる方法はあるのか知りたいです。
また、代替案についても、もし良ければご教授願いたいです。

何卒よろしくお願いします。

以下、コードです

------------------------------------------------
//script.ts

import { LAppLive2DManager } from "./lapplive2dmanager";
import { LAppSubdelegate } from "./lappsubdelegate";

const lappsubdelegate = new LAppSubdelegate;
const lapplive2dmanager = lappsubdelegate.getLive2DManager();

var onProcessCompleted = function () {
    lapplive2dmanager.playVoice()
}

button.addEventListener('click', () => {
    onProcessCompleted()
})

------------------------------------------------
//lapplive2dmanager.ts

export class LAppLive2DManager {

/* 省略 */

public playVoice() {
    for (let i = 0; i < this._models.getSize(); i++) {

      let filePath = "./Resources/Haru/sounds/haru_Info_04.wav";
      const myRequest = new Request(filePath);
      fetch(myRequest)
        .then((response) => response.blob())
        .then((myBlob) => {
          const url = window.URL.createObjectURL(myBlob);
          const voice: any = document.getElementById("voice");
          voice.src = url;

          if (i == 0) {
            voice.play();
          }

          this._models.at(i)._wavFileHandler.start(url);
        });
    }
  }
}
------------------------------------------------
2

@saikoro 様

いつも弊社製品をご愛顧のほど誠にありがとうございます。
Live2D スタッフでございます。

sdk for webのsampleを使ってリップシンクと音声再生を行いたいとの事ですが、音声再生につきましてはSDKの機能としてサポートしておらず、独自実装していただく必要がございます。ご了承ください。

リップシンクにつきましては、SDK for WebのSample内、lappmodelクラスにて実装がありますのでご参照ください。
「LipSync」でファイル内検索をしていただくと処理に関連するコードがでてくるかと思います。

クラス内では
・setupModel() から呼び出される setupLipSyncIds() にてモデルからリップシンクの情報を取得
・startMotion() リップシンクが有効であればモーションとしてセット
・update() セットされたモーションを1フレーム再生
といった処理の流れとなります。

参考になりましたら幸いです。
以上、よろしくお願いいたします。

3

回答いただき誠に感謝です！！！！

説明不足で申し訳ないです。

SDKチュートリアルの「wavファイルの音量に基づくリップシンク」の項目に近いことを実装したいのです。それもSDK内部のイベントではなく、独自実装のtypescriptのボタンのクリックイベントから呼び出したいのです。実は貼り付けてあるコードのpublic playVoice()が「wavファイルの音量に基づくリップシンク」の実装部分で、問題は、WEBページ全体の更新処理が入ってしまうことです。

おそらくsubdelegateクラス、lapplive2dmanagerクラス、lappmodelクラスまたは他のクラスやFrameworkに更新処理があると思うのですが、typescriptファイルの数が膨大で実態を掴めていません。

もしよろしければ、何か参考になる資料をお教え願えないでしょうか？

4

ご返信が遅くなってしまい誠に申し訳ございません。

問題は、WEBページ全体の更新処理が入ってしまうことです。

こちらについて、SDKforWebではlappdelegate.tsのrun()関数が更新処理の起点となっており、subdelegateごとの描画処理を更新し、requestAnimationFrame(loop);でループしております。

以上ご確認のほどよろしくお願いいたします。

5

とんでもないです！ご返信頂き本当にありがとうございます！！

ご提示頂いた該当部分を参照して、コードを少しいじくってみます！！

重ねて感謝を申し上げます！！

「いいね！」 1