努力したWiki

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

ユーザ用ツール

サイト用ツール


documents:voiceroid:assistantseika:assistantseika-022

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

概要

URL http://localhost:7180/app/index.html で表示させます。
画面表示直後とボタン押下時にcidが2000の話者で発声します。

色々ありChromeのリモートデバッグ機能を使ってみたのですが、

  • いわゆる onloadのイベントもaddEventListenerを使えば動いてます。
  • alert()の表示はデバッグ対象ウインドウ側に出てきますね。デバッグコンソール側には出ません。
  • どちら側でも“アカネチャンカイワイイヤッター”ボタンは押せました。
  • /app/index.htmlの読み込み時に認証がかかるのでコードで定義するheadersオブジェクトは空でいいかも。

OBSブラウザの場合は、

  • URLにユーザID、パスワードを含めることで実行できました。
  • しかしURLに記載した認証情報は引き継がれないためスクリプト内で明示的に認証情報を含める必要があります。

Chromeのリモートデバッグ機能利用

/app/index.html を取得する時にBASIC認証のダイアログが出て、入力した情報はfetch APIにも引き継がれます。認証用のリクエストヘッダを付与せずとも問題ないです。


OBSブラウザ利用

/app/index.html を取得する時にBASIC認証のダイアログがでません。なのでURLに認証情報を書いて利用します。 しかしfetch APIには引き継がれないので、認証用のリクエストヘッダを付与する必要があります。



AssistantSeikaの設定

D:\Work\app に index.htmlを格納しています。

HTML+JavaScript

JavaScriptをHTML内に記述

これを AssistantSeikaのドキュメントルートのフォルダにコピーします。

index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
 
    <script>
      async function calltts()	
      {
        var bodyJson    = {"talktext":"アカネチャンカワイイヤッター"};
        var headers     = {
                            'Authorization' : 'Basic ' + btoa(unescape(encodeURIComponent( "SeikaServerUser" + ":" + "SeikaServerPassword" ))),
                            '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/2000", fetchopt);
        var json = await res.json();
 
        alert("Very Cute!");
      }
 
      window.addEventListener('load', calltts);
 
    </script>
  </head>
 
  <body>
     <button id="kawaii">アカネチャンカイワイイヤッター</button>
     <script>
       document.getElementById('kawaii').addEventListener('click', calltts);
     </script>
  </body>
</html>

JavaScriptを集約するならこんな記述になります。前者と振る舞いは変わりません。

index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
 
    <script>
      async function calltts()	
      {
        var bodyJson    = {"talktext":"アカネチャンカワイイヤッター"};
        var headers     = {
                            'Authorization' : 'Basic ' + btoa(unescape(encodeURIComponent( "SeikaServerUser" + ":" + "SeikaServerPassword" ))),
                            '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/2000", fetchopt);
        var json = await res.json();
 
        alert("Very Cute!");
      }
 
      function init()
      {
        document.getElementById('kawaii').addEventListener('click', calltts);
        calltts();
      }
 
      window.addEventListener('load', init);
 
    </script>
  </head>
 
  <body>
     <button id="kawaii">アカネチャンカイワイイヤッター</button>
  </body>
</html>

HTMLとJavaScriptを分離

HTMLとJavaScriptを分離するならこんな記述になります。 index.js、index.htmlを AssistantSeikaのドキュメントルートのフォルダにコピーします。

index.js
async function calltts()	
{
    var bodyJson    = {"talktext":"アカネチャンカワイイヤッター"};
    var headers     = {
                        'Authorization' : 'Basic ' + btoa(unescape(encodeURIComponent( "SeikaServerUser" + ":" + "SeikaServerPassword" ))),
                        '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/2000", fetchopt);
    var json = await res.json();
 
    alert("Very Cute!");
}
 
function init()
{
  document.getElementById('kawaii').addEventListener('click', calltts);
  calltts();
}
 
window.addEventListener('load', init);
index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script src="index.js"></script>
  </head>
 
  <body>
     <button id="kawaii">アカネチャンカイワイイヤッター</button>
  </body>
</html>
documents/voiceroid/assistantseika/assistantseika-022.txt · 最終更新: 2020/11/23 05:46 by k896951

ページ用ツール