努力したWiki

推敲の足りないメモ書き多数

ユーザ用ツール

サイト用ツール


documents:voiceroid:seikacenter:seikacenter-008

SeikaCenterをWebブラウザで操作する例

SeikaCenterをWebブラウザのJavaScriptで操作してみる。

概要

SeikaCenter 20190427/gでの説明です。

SeikaCenterのHTTP機能を使い、Webブラウザから制御してみます。

実験

実験1 HTMLを直接使う

以下のHTMLをsample.htmlの名前でUTF-8で保存します。保存先は C:\Work\app フォルダにします。
URLはcidが1000の話者に発声させるためのものです。自分の環境に合わせて“1000”を書き換えてください。

sample.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script>
        var callurl = "http://localhost:7180/PLAY2/1000";
        var sscid   = "SeikaServerUser";
        var sscpass = "SeikaServerPassword";
        var json = {
            talktext: "これはブラウザのJavaScriptで使用した例です"
        };
 
        function ttscall()
        {
            var headers = new Headers();
            headers.set('Authorization', 'Basic ' +  btoa(unescape(encodeURIComponent( sscid + ":" + sscpass ))) );
            headers.set('Content-Type',  'application/json');
            fetch(callurl, {
                mode: 'cors',              //CORSモードにする
                credentials: 'include',    //認証情報を含める指定
                method: 'POST',
                body: JSON.stringify(json),
                headers : headers
            });
        }
    </script>
  </head>
  <body>
    <button id="btn">呼ぶよ!</button>
    <script>
          document.getElementById('btn').addEventListener('click',ttscall);
    </script>
  </body>
</html>

次にSeikaCenterの設定2タブへ以下の設定を行いHTTP機能を有効にしてサービスを始動します。

設定値は上記と同じ値にしてください。

そしてWebブラウザでC:\Work\app\sample.htmlを表示させます。ボタンが表示されているので押してみましょう。発声できたと思います。
Firefox 66.0.3 とChrome 74.0.3729.108 で確認しました。

ただし、少々残念な事にChromeでは内部的にCORBの警告が出ています。

実験2 簡易Webサーバ機能を利用

次にSeikaCenterの設定2タブへ以下の設定を行いHTTP機能を有効にしてサービスを始動します。

Access-Control-Allow-Origin の設定値は “http://localhost:7180/” ではなく “http://localhost:7180” です。

WebブラウザでURL http://localhost:7180/app/sample.html を開きます。
パスワードを聞かれたら設定2タブと同じものを入力します。
実験1の時と同様にボタンが表示されるので押してみましょう。発声できたと思います。

実験1のChromeで出ていたCORBの警告は今回出ていません。favicon.ico の404エラーはアイコン favicon.ico が用意されていないので出ます。

まとめ

CORBの警告を避けたければHTTP機能に追加した簡易Webサーバ機能を使うのが良いかと。

documents/voiceroid/seikacenter/seikacenter-008.txt · 最終更新: 2019/09/16 23:32 by k896951

ページ用ツール