サイドバー
documents:voiceroid:seikacenter:seikacenter-008
SeikaCenterをWebブラウザで操作する例
SeikaCenterをWebブラウザのJavaScriptで操作してみる。
概要
SeikaCenter 20190427/gでの説明です。
SeikaCenterのHTTP機能を使い、Webブラウザから制御してみます。
実験
実験１ 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の警告が出ています。
実験２ 簡易Webサーバ機能を利用
次にSeikaCenterの設定2タブへ以下の設定を行いHTTP機能を有効にしてサービスを始動します。
Access-Control-Allow-Origin の設定値は “http://localhost:7180/” ではなく “http://localhost:7180” です。
WebブラウザでURL http://localhost:7180/app/sample.html を開きます。
パスワードを聞かれたら設定2タブと同じものを入力します。
実験１の時と同様にボタンが表示されるので押してみましょう。発声できたと思います。
実験１のChromeで出ていたCORBの警告は今回出ていません。favicon.ico の404エラーはアイコン favicon.ico が用意されていないので出ます。
まとめ
CORBの警告を避けたければHTTP機能に追加した簡易Webサーバ機能を使うのが良いかと。
documents/voiceroid/seikacenter/seikacenter-008.txt · 最終更新: 2019/09/16 23:32 by k896951
