努力したWiki

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

ユーザ用ツール

サイト用ツール


documents:voiceroid:assistantseika:assistantseika-023

HTMLとJavaScriptで呼び出し発声させる例2

概要

クロスドメインアクセスで処理が動かないという利用者が結構いるようなのでサンプルを書いてみました。

このサンプルの前提として、AssistantSeikaとブラウザは同じPCで実行しているものとします。
HTTP機能は有効化され、待ち受けアドレスを localhost にした状態です。

サンプルUI

ボタンを押すと、テキストボックスに入力されたcidの話者で発声させるリクエストがAssistantSeikaに送られます。

ユーザID:
パスワード:
cid:

発声しない 発声する

発声されるか否かは Access-Control-Allow-Origin ヘッダの内容で決まることが分かるかと思います。
具体的には、AssistantSeikaを呼び出すコードをダウンロードしたサーバ 「 https://hgotoh.jp 」を指定した時に発声しています。

ブラウザのセキュリティにより、サーバA から取得したコンテンツ内からスクリプトで他のサーバ(例えばサーバB)へのアクセスはかなり制限が課されます。この制限を突破できるとクロスサイトスクリプティングと言われる話になっていきます。

ですが、サーバBに「サーバAのコンテンツからの参照を許す」と許可をしてもらう事でブラウザのセキュリティは制限を解除します。このあたりの記事を参照してみてください。
※これはブラウザのセキュリティのため、ブラウザじゃないプログラムでは有効ではありません。

つまり、
AssistantSeikaのAccess-Control-Allow-Origin に “https://hgotoh.jp” を設定することで、「AssistantSeika は “https://hgotoh.jp” のコンテンツから参照されることを許可します」と宣言するようになります。
結果、ブラウザは このページ「 https://hgotoh.jp/wiki/doku.php/documents/voiceroid/assistantseika/assistantseika-023 」 からスクリプトによるAssistantSeikaへのアクセスを許可します。

ボタン押下時の実行コード(サンプルコード)

ボタンを押した際に実行されるスクリプトは以下のようになっています。

async function calltts()	
{
  var bodyJson    = {"talktext":"アカネチャンカワイイヤッター"};
  var headers     = {
                      'Authorization' : 'Basic ' + btoa(unescape(encodeURIComponent( document.getElementById('uid').value + ":" + document.getElementById('pass').value ))),
                      'Content-Type'  : 'application/json'
                    };
  var fetchopt    = { mode: 'cors', credentials: 'include', method: 'POST', body: JSON.stringify(bodyJson), headers: headers};
  var res  = await fetch("http://localhost:7180/PLAY2/" + document.getElementById('cid').value , fetchopt);
  var json = await res.json();
}
 

fetch APIで直接AssistantSeikaを叩くので、ブラウザによっては認証情報入力のタイミングがありません。なのでfetchのリクエストヘッダに認証ヘッダ(Authorizationヘッダ)を追加しています。
……UID+Passじゃない方法を考えたほうが良さげかな。

documents/voiceroid/assistantseika/assistantseika-023.txt · 最終更新: 2020/11/23 05:47 by k896951

ページ用ツール