努力したWiki

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

ユーザ用ツール

サイト用ツール


documents:voiceroid:assistantseika:assistantseika-022

文書の過去の版を表示しています。


HTMLとJsvsScriptで音声を発声させる例

概要

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

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

  • いわゆる onloadのイベントもaddEventListenerを使えば動いてます。
  • alert()の表示はデバッグ対象ウインドウ側に出てきますね。デバッグコンソール側には出ません。
  • どちら側でもボタンは押せました。
  • /app/index.htmlの読み込み時に認証がかかるのでコードで定義するheadersオブジェクトは空でいいかも。
  • OBSブラウザの場合は、URLにユーザID、パスワードを含めることで実行できました。

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


OBSブラウザ利用



AssistantSeikaの設定

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

HTML+JavaScript

JavaScriptをHTML内に記述しました。

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>
documents/voiceroid/assistantseika/assistantseika-022.1595874777.txt.gz · 最終更新: 2020/07/27 18:32 by k896951

ページ用ツール