TTS Subtitle Voice Maker 説明

概要

音声合成

動作OS

ダウンロード

本ツールの制限

利用シーン

簡単チュートリアル

今日は私は音声合成です。
今日から字幕は簡単です。
楽々です。

Makerの機能

• 文章の文節への分割
  • 文章入力エリア
  • デリミタ複数指定
  • 最大長指定
• 文節のMP3ファイルへの変換
  • 言語選択(英語、日本語)
  • 声選択
  • 複数文節の全選択、反転選択、個別選択、シフト選択
  • 文節挿入、削除
  • 表示用テキスト、音声用テキスト編集
  • テキスト検索・置換
  • 指定声での変換、変換済み声での変換
  • 変換済み声表示
  • MP3ファイルへのリンク
  • オーディオコントローラでの再生
• プロジェクト
  • プロジェクトID表示
  • 新規
  • セーブ
  • ロード
  • 作成プロジェクトのエクスポート(ZIP化)
  • 作成日より指定時間でのプロジェクト自動削除
• その他
  • ヘルプへのリンク
  • Player一覧へのリンク
  • 月ごとの変換文字数制限
  • 月ごとの現在までの変換文字数表示
  • 文章の文字数制限表示
  • 文節の文字数制限表示
  • プロジェクト自動削除までの時間表示

Playerの機能

• 一覧
  • ttsshow01.html(normal) 標準、文節の表示、文章全体の表示
  • ttsshow11.html(normal+background image) 上記に加えて文節ごとに背景画像を表示
  • ttsshow02.html(move X) 文節の横移動表示
  • ttsshow03.html(move Y) 文節の縦移動表示
  • ttsshow04.html(auto loop start with closed panel and muted)自動ループ再生（編集パネル閉じている、音声ミュート状態）
  • ttsshow05.html(3d fly) 文章全体を手前下から奥上へ3次元的に移動する表示
  • ttsshow06.html(vertical texts) 縦書き文章表示
  • ttsshow07.html(vertical focus) 縦書き文節表示
• Player画面上部
  • 設定の各Playerごとの、さらに各任意番号ごとのセーブ、ロード
  • 音声のミュート
  • 一覧へのリンク
• Player全体設定（上部）
  • Base:ベース色(Color)、幅(Width)、高さ(Height)、画像（サポートされているPlayerのみ）
  • Rectangle:背景有無、色(Color)、グラデーション種類(Gradation)、グラデーション色(Color)、幅(Width)、高さ(Height)、横マージン(Margin X)、縦マージン(Margin Y)
• Player全体設定、操作部（下部）
  • 再生位置への自動スクロール有/無（文章表示時）(Scroll Auto)
  • 再生文節フレームだけの表示/文章全部の表示切り替え(設定後,リソースロードが必要）(Display focus text only)
  • 音声用テキストの表示/非表示(Display Voice Text)
  • テキストのはみ出し部分表示/非表示(Display Overflow)
  • ループ再生の有/無(Loop)
  • ポーズボタン(Pause)、ポーズ解除ボタン(Resume)
  • スライダー位置の文節フレーム表示(<---)、文節フレーム位置をスライダーへ表示(--->)
  • 文節フレームとスライダーの同期有/無(<--->)
  • リソースロードボタン(Load resource)
  • 再生ボタン(Play)
  • 再生速度表示(x1.00)
  • 再生文節フレーム数、現在文節フレーム位置表示(1/99)
  • 停止ボタン(Stop)
  • 1文節フレーム移動（マイナス移動(<),プラス移動(>)）
  • 開始文節フレーム位置スライダー,フレーム位置入力
• 設定レベル
  • ALL（全体),Voice(声の種類ごと),Frame（文節フレームごと)
• レベルごと設定操作
  • レベル表示(Level ALL/Voice/Frame)
  • レベルごと設定/クリア(Set/Clear,Set for frames/Clear for frames)
  • Voiceレベルでの声選択
  • レベルごと設定項目のコピー、ペースト、コピーペーストデータ表示(Copy,Paste)
  • Frameレベルでの文節フレーム番号複数指定（カンマ区切り、未指定の場合は現在フレーム）(Frame Numbers)
• レベルごと設定項目
  • フォーカスなし項目
    • フォントサイズ(Font Size)
    • 文字間(Letter Spacing)
    • 行間(% Line Height)
    • マージン(Margin)
    • 文字色(Text Color)
    • 文字太さ(Weight)
    • フォント名(Font Name)
    • フォント例一覧リンク(Font Name sample)
    • 再生速度(Play Speed)
    • 再生前インターバル(msec Before Interval)
    • 再生後インターバル(msec After Interval)
    • 横位置(X Align)
    • 縦位置(Y Align)
  • フォーカスあり項目(Focus:)
    • 背景色有/無
    • 背景色(Color)
    • 文字色(Text Color)
    • 文字ふち色(Stroke Color)
    • 文字ふち太さ(Stroke Width)
    • 下線色(UnderLine Color)
    • 下線太さ(UnderLine Width)
    • ボックス影有/無(Box Shadow)
    • テキスト影有/無(Text Shadow)
    • テキスト影を縁取り風(Outer)
    • 影横位置(Shadow X)
    • 影縦位置(Shadow Y)
    • 影ぼかし大きさ(Blur)
    • 影色(Shadow Color)
• その他の設定項目(標準以外Player）
  • アニメーション(Animation)
    • 時間(Time(msec))
    • 開始横位置(StartX(%))
    • 終了横位置(EndX(%))
    • 開始縦位置(StartY(%))
    • 終了縦位置(EndY(%))
    • テキスト幅を計算に含める(calculate text width)
  • 3D
    • 背景色(Background Color)、高さ(Height)
    • 回転角(Rotation)
    • 縦位置(Y)
    • 奥位置(Z)
    • 視野(Perspectivve)
    • 速度(Speed)

Maker操作説明


1.テキストエリアでの編集
　下部のテキストエリアで文章を記述します。テキストエリアをクリアするには[Clear text in area below]ボタンを押します。
　文節を最大文字数で区切るにはテキストエリア上の入力欄に数値を入力してから[Split text in area below with fixed length]ボタンを押します。
　区切った場所に^記号が入ります。この記号は非表示となります。デリミタを指定している場合はデリミタ区切りが考慮されて処理されます。
　テキストエリアは入力文字数制限があります。Maximum NNNNNcharsという部分です。この制限はカスタマイズできます。

2.デリミタでの区切り設定
　文章を文節に区切るデリミタを選択します。複数選択可能です。
　半角文字と全角文字があります。
　ENTERとは改行のことです。TABとはタブのことです。SPACEとはスペースのことです。
　非表示記号として、|記号がありますので、任意の場所で区切るにはこの|記号を利用しましょう。
　カッコの閉じる記号を選択した場合は、カッコの閉じる記号までが文節となります。
　カッコの始まり、閉じるの意味が分かりにくい記号については(start,end)と記されてます。

3.文節への変換
　[Upload and split with delimiter]ボタンを押すと、Webサーバーへ文章が送信され、文節に区切られます。
　新規プロジェクトの場合は、この時点で、プロジェクトが開始されます。Webサーバーにはプロジェクトのフォルダが作成されます。
　テキストエリア上のProject will be automatically deleted NN hours after created.NN hours left.という表示は、プロジェクト開始からの時間によって、プロジェクト全体が自動削除される制限を表示してます。
　この制限時間はカスタマイズできます。無制限の場合は、Project will not be automatically deleted.と表示されます。 　プロジェクトは固有のプロジェクトIDを持ってます。自動的に発行されます。画面上部のproject idの32文字の数値です。

4.文節の編集 　文節に区切られてリスト表示されますので、必要な編集を行います。
　１列目のNo.には文節フレーム番号とチェックボックス表示されてます。音声変換を行うためには各行のチェックが必要です。
　Noの一番上には２つのチェックボックスがあります。上が全体にチェックを入れる機能。下がチェックを反転させる機能です。押した時点で各行のチェックボックスの状態が変化します。
　チェックボックスのチェック/非チェックを行ったのちに、Shiftキーを押しながら、別の行をチェック/非チェックすることで複数行のチェック/非チェックが可能です。
　2列目には文節のテキストが上下2段で表示されてます。上段が表示用で、下段が音声用です。テキストボックス内でそのまま編集できますが、
　幅を広げたい場合は、左横の[Text](上段用）または[Voice]（下段用）ボタンを押すと、広い幅で編集可能です。
　再度、ボタンを押すか、もしくは、テキストボックス内からフォーカスを外すと、元の幅に戻ります。幅を戻す戻さないは音声変換に影響ありません。
　２列目の上部にmaximum:NNNchars per lineと記述があります。これは1文節の文字数制限です。これはカスタマイズできます。
　文節の表示用（上段）テキストは１行で表現されてますが、改行は\n、タブは\tという記号に変換されてます。Playerでは改行、タブとみなされます。
　文節の表示用（上段）テキストにはHTMLタグを挿入可能です。例えば、<span style="color:red">テスト</span>のようなstyle指定も可能です。これによりかなり汎用性が広がります。
　文節を検索するには最上部のsearchテキストボックスに入力して[search]ボタンで検索が実行されて、ヒット数が表示されます。ヒットした文節は黄色に反転します。
　また、ヒットした黄色反転した文節のテキストボックスを一度クリックしてからフォーカスを外すと色は戻ります。
　検索でヒットした行へスクロールするには、Shift+矢印キーの上（上方へ検索）または下（下方へ検索）を押します。複数回押すことで、次にヒットした行へスクロールします。
　検索でヒットした全ての行にチェックを入れるにはShift+矢印キーの左を押します。チェックを外すにはShift+矢印キーの右を押します。
　検索文字の置換を行うには検索後にtextまたはvoiceテキストボックスが表示されますので、置換文字を入力して、その横の[replace all]ボタンを押します。
　textに対して置換した場合は、文節の編集行だけでなく、元の文章のほうの該当部分も同時に置換されます。
　文節の編集行を新たに挿入するには、行右端の[Insert]ボタンを押します。文節の編集行を消去するには行右端の[Delete]ボタンを押します。

5.文節の音声変換
声の指定は、文節リスト下で設定可能です。言語選択がLanguage、声選択がVoiceの項目です。WeveNetと書かれているものが、滑らかな声とされるWeveNet音声です。
２列目上部の[Checked text to MP3 using NewVoice]ボタンでチェックしたすべての文節を声選択のVoiceで音声ファイルへと変換します。
変換中は３行目の上部に"変換済数/変換対象数"が表示されます。
[Checked text to MP3 using VoiceName]ボタンもほぼ同様の機能ですが、こちらは、すでに作成済の場合、同じ声設定で再度変換する時に使用します。
ただし、未作成の文節の場合は、新規作成と同じく声選択のVoiceを使用します。
以前のVoice名は４列目に表示されてます。
１文節だけ音声変換を行いたい場合は、３列目の[NewVoice]または[VoiceName]ボタンで変換できます。こちらも先ほどと同様に、声選択のVoiceを使用するか、以前と同じ声設定で変換するかの違いがあります。
画面上部にThe number of characters this month : NNNN / (limit)NNNNNと表示がありますが、こちらは月初から現在までの変換文字数と月の変換制限文字数です。
月の変換制限文字数を超えた場合、本ツールは変換を実行させません。通常は、変換はGoogle Cloud Platformのサーバーに転送して実行されますが、制限を超えた場合は、転送自体を行いません。制限数はカスタマイズできます。
この制限はGoogle Cloud PlatformでのTTS無料枠を利用する場合に便利ですが、あくまで目安と考えてください。本ツールは一切の責任を持ちません。Google Cloud Platform側で同様の設定が可能であれば、行っておくことをおすすめします。（2021/12月現在、それらしい設定項目はあるようですが、動作未確認です。）
以下Google Cloud Platformサイトからの抜粋(2021/12月現在）です。


Text-to-Speech の料金は、音声への合成のためにサービスに送信された文字数に基づいて、月単位で請求されます。
WaveNet 音声の最初の 100 万文字は、毎月無料です。
標準（WaveNet 以外の）音声では、最初の 400 万文字が毎月無料です。
Text-to-Speech は無料枠以降 100 万文字ごとに課金されます。
標準（非 WaveNet）音声	0〜400 万文字	1 文字あたり $0.000004 米ドル（100 万文字あたり $4.00 米ドル）
WaveNet 音声	0〜100 万文字	1 文字あたり $0.000016 米ドル（100 万文字あたり $16.00 米ドル）


6.音声確認
　４行目には声のVoice名と、MP3ファイルへのリンクが表示されます。MP3のダウンロードはリンク右クリックメニューから行えます。
　５行目に[Audio Player]ボタンがあります。このボタンを押すことでオーディオプレーヤーが表示されますので、再生ボタンで再生できます。

7.エクスポート
　すべての文節の音声変換がされた状態で、５列名上部の[Export]ボタンが有効になります。ボタンを押すことで、プロジェクトのZIPファイル化ができます。
　ボタン下にZIPファイルへのリンクが表示されますので、右クリックメニューから保存できます。
　ZIPファイルを解凍したものを動作させるにはWebサーバーが必要です。簡易Webサーバーの解説は後述します。

8.プロジェクト
　画面上部にはproject idが表示されてます。これが現在のプロジェクトIDです。メモしておくことをおすすめします。
　[New]ボタンを押すと、新規プロジェクトとなり、project idも更新されます。
　[Load]ボタンを押すと、project id欄で指定されたプロジェクトの設定ファイルを読み込み、プロジェクトが切り替わり、編集画面に反映させます。
　[Save]ボタンを押すと、編集画面の設定を、project id欄で指定されたプロジェクト内へ保存します。
　別名での設定ファイル保存は行えません。（Playerのほうは複数設定が可能です。）
　player indexリンクを押すと、Player一覧画面が表示されます。
　HELPリンクを押すと、ヘルプ画面が表示されます。



Player操作説明

1.一覧
　Makerのplayer indexリンクからPlayerの一覧を表示できます。１つのプロジェクトでロードできるリソース(字幕テキストや音声ファイル）は共通ですが、Player設定ファイルやPlayerでの表示は異なります。
　目的に合ったPlayerを選択するとよいでしょう。カスタムのPlayerも作成可能です（後述）。Playerのhtmlファイル(javascript含む）はオリジナルのものですが、著作権は放棄しますので、ご自由にご利用ください。
　
　
• ttsshow01.html(normal) 標準、文節の表示、文章全体の表示
　
• ttsshow11.html(normal+background image) 上記に加えて文節ごとに背景画像を表示
• ttsshow02.html(move X) 文節の横移動表示
• ttsshow03.html(move Y) 文節の縦移動表示
• ttsshow04.html(auto loop start with closed panel and muted)自動ループ再生（編集パネル閉じている、音声ミュート状態、リソース自動読み込み、1番の設定の自動読み込み）
• ttsshow05.html(3d fly) 文章全体を手前下から奥上へ3次元的に移動する表示※全体の動きを止めないで再生するには、文節フレームとスライダーの同期有/無(<--->マーク)のチェックはOFFで再生位置を1にしてから[Play]して下さい。
• ttsshow06.html(vertical texts) 縦書き文章表示
• ttsshow07.html(vertical focus) 縦書き文節表示
　

2.Player画面構成
　Player画面は上部が編集パネルで、下部が表示パネルとなってます。編集パネルは左横の２つの+/-ボタンで開閉できます。

3.Player表示パネル構成
　Playerによって異なりますが、標準Playerの初期設定では、緑のベース背景の上に、白の背景が表示されており、黄色背景の字幕が表示されます。
　緑背景は別途動画編集ソフトで字幕と映像を合成する場合に、クロマキー合成で使用すると緑部分を透明化できるので便利です。

4.編集パネル構成
　全体に関わる設定と、レベルに関わる設定があります。
　再生するためのボタン類があります。

5.レベルの説明
　３つの設定レベルがあります。ALL,Voice,Frameです。
　ALLが全体の文節フレームに影響します。
　Voiceが指定された声名で変換された文節フレームに影響します。
　Frameが現在表示されている文節フレームまたは、指定された番号の複数の文節フレームに影響します。
　各レベルの適用優先度はFrame,Voice,ALLの順です。Frameが一番優先度が高いため、編集順序はALL,Voice,Frameの順で行ったほうがいいでしょう。
　各レベルの設定/クリアはALL,Voiceレベルの場合は[Set]/[Clear]ボタン、Frameレベルの場合は[Set for frames]/[Clear for frames]ボタンで行います。
　ALLとVoiceの切り替えはグレー背景１列目で選択できます。その下には現在文節フレームのレベルが白反転されて表示されます。また、現在文節フレームのVoice名も表示されます。
　Voiceレベルで設定する場合は、現在文節フレームのVoice名と同じVoice名を選択する必要があります。
　Frameレベルで設定する場合は、Frame Numbersにカンマ区切りの文節フレーム番号を複数入力するか、無指定で[Set for frames]/[Clear for frames]ボタンを押します。無指定の場合は現在文節フレームだけへの設定となります。
　現在フレーム番号は[Stop]ボタン左に表示されてます。

6.各設定項目
　基本的な操作方法はチュートリアルをご参照ください。
　各設定の詳細は「Playerの機能」で一覧がありますので、そちらをご参照ください。ここでは補足の説明をします。
　Playerによって機能があるものとないものがあります。以下は標準的な動作の場合の説明です。
　背景の大きさは変更できます。
　背景の有無はチェックボックスで切り替えが可能です。
　白背景はフラット(Flat)とグラデーション(GradationN)が選択できます。
　フォントの指定はフォント名を記載する必要があります。参考資料としてFont Name sampleのリンク先に一覧表があります。
　文字にふちを付けるには、Stroke Widthを1以上に設定します。
　文字に下線を付けるには、UnderLine Widthを1以上に設定します。
　影にはBox Shadowと、Text Shadowがあり、両方同じ色となります。各チェックボックス有効化できます。
　Text Shadowの応用としまして、Outerにチェックを入れてShadowXとShadowYに同じ数字を入れますと（例：1)、Text Shadowがテキスト輪郭の外側への縁取りのようになります。
　文節の再生速度は1が通常スピードです。例えば、1.5とすると早くなり、0.5とすると遅くなります。
　再生前のインターバルは、文節を表示する前の時間の設定です。この間は表示も音声の再生もされません。msecで指定ですので、1秒の場合は1000となります。
　同様に再生後のインターバルもmsecの設定ですが、こちらは、再生後に、文字を表示したままの状態でのインターバルです。文節を音声終了後にも表示させておく場合に利用するとよいでしょう。
　編集パネルでグレー背景の項目が各レベルで設定されるものです。また、Focus:の薄いグレーの部分は現在文節フレームの表示に関する項目です。
　現在文節フレーム以外も表示させるには、Display focus text onlyチェックボックスをOFFにしてから再度、[Load resource]ボタンを押します。
　Playerによってはうまく表示されない場合もありますし、逆にチェックがOFFでしか正しく表示されないPlayerもあります。各Playerの初期設定に従います。
　標準Playerの場合は、どちらも正しく表示されます。文章全体を表示する場合に使用します。
　文章全体を表示する場合、画面スクロールを自動化するには、ScrollAutoをチェックしておきます。
　音声用のテキストを参照するには、Display Voice Textをチェックします。

7.ショートカット
　Pause/Resumeは{Alt]+[B]キーです。トグルで切り替えになります。再生の一時停止/解除が簡単に出来ます。
　Display Overflowは[Alt+N]キーです。文字がはみ出しの有無を切り替えます。プレーヤーによっては動作しません。

8.音声ミュート
　画面上部のMute soundで切り替えできます。ttsshow04.htmlのPlayerで自動再生する場合、初期設定でミュートされてます。
　これは、手動で操作が無い場合は、ミュート状態でしか再生できないブラウザの制限のためです。

9.設定のロード、セーブ
　Playerごとに設定はファイルとして保存できます。また、さらに指定番号で別ファイルとして保存できます。
　保存するには、画面上部の欄に番号を入力して[Save Config]ボタンを押します。
　読み込むには、画面上部の欄に番号を入力して[Load Config]ボタンを押します。
　他Playerの設定や、他プロジェクトの設定は基本的には利用できません。
　ただし、同一プロジェクトで他Playerの設定を利用したい場合は、設定ファイルを複製して適切なファイル名にすることで可能です。
　例えば、ttsshow01.htmlの3番の設定ファイルは、dataフォルダ下のsaveplayer01_3.jsonというものです。これを複製してttsshow04.html用にするには、saveplayer04_3.jsonと名前変更すれば、ttsshow04.htmlで3番の設定で読み込めます。
　設定ファイルに記載される項目数はPlayerの種類に関わらず同じですので、ある程度の互換性はあります。
　また、後述のコピーペースト機能では、異なるプロジェクトのPlayer間でも同じ設定を流用できます。

10.設定のコピーペースト
　異なる文節フレームで同じ設定を適用したい場合にコピーペースト機能は便利です。
　グレー背景部分の設定項目はコピーペースト可能です。[Copy]ボタンでCopyボタン上の枠に情報文字列がコピーされます。また、同じ内容がクリップボードへコピーされます。
　[Paste]ボタンでCopyボタン上の枠の情報文字列からグレー背景部分の設定項目に反映されます。ペーストしても[Set]/[Set for frames]ボタンを押さないと文節フレームには反映されません。
　Copyボタン上の枠はドラッグすると広がります。その情報文字列を手動でコピーすれば、[Copy]ボタン同様にクリップボードにコピーできます。
　この機能を利用して、情報文字列を別途エディタ等で管理して、同じ設定を保存しておくことも可能です。保存しておいた設定をCopyボタン上の枠に記述して[Paste]ボタンを押すと反映します。



フォルダ構成

本ツールのフォルダ構成を説明します。


tts
   --ttsmonth（月ごとの音声変換文字数ファイル）
   --ttsshowtemplate（PlayerおよびPlayer indexファイルのテンプレート）
   --documentroot（通常のドキュメントルート）
                  --ttstop（Python簡易Webサーバの場合のドキュメントルート）
                           --cgi-bin（PythonのCGIファイル、Google Cloud PlatformのAPIキー設定、各制限の定義）
                           --ttscontents
                                         --32文字数値（プロジェクトID、プロジェクトごとにフォルダが生成されます。)
                                                      --data（設定関連ファイル）
                                                      --resource（文節関連ファイル、MP3ファイル）
                                                      --ttsshow（ttsshowtemplateフォルダからコピーされたファイル)

Webサーバーのドキュメントルートが２種類あります。通常はdocumentrootフォルダがドキュメントルートです。最上位フォルダのttsと、このdocumnetrootフォルダ名だけは変更可能です。
WebサーバーとしてPythonの簡易Webサーバーを利用する場合はドキュメントルート下にcgi-binフォルダがあることが必須ですので、その場合は、ttstopフォルダをドキュメントルートとします。
ローカルでWebサーバーを起動していたとして、ブラウザからアクセスする場合、Makerを表示するには、通常はhttp://localhost/ttstop/となりますが、Python管理Webサーバーの場合はhttp://localhost/となります。
レンタルサーバー上で動作させた場合は、例えばhttps通信の場合のデモサイトですと、https://cooyou.org/ttstop/となります。
プロジェクト下のttsshowフォルダは単純にトップ下のttsshowtemplateフォルダの中身が全てコピーされるだけです。したがいまして、カスタムPlayerを含めるにはttsshowtemplate内にファイルを配置して同フォルダのindex.htmlにリンクを追加記載すればよいのです。



Google Cloud PlatformのAPIキー設定、各制限の定義

Google Cloud Platformを利用するにはGoogle Cloud Platform Text-to-Speechでの登録が必要です。
APIキーがTTSを利用するために必要です。
登録には無料枠だけの利用であってもクレジットカード登録が必要でした。(2021/12月現在）

cgi-binフォルダ内のuserdefine.pyファイルをテキストエディタで編集してください。
中身はの例は以下です。


ttskey="Google Cloud Platform APIキーを記載"
removelimithours=24*1
limittextpermonth =300000
limittextareacount=20000
limittextlinecount=300

ttskeyにはTTSを利用するためのGoogle Cloud Platformサイトで発行されたAPIキーを半角のダブルクォーテーションで囲って記載します。
removelimithoursにはプロジェクトの自動削除時間を設定します。半角数値で記載します。*は掛け算の意味です。例えば、24*1の場合は24時間です。24*30の場合は30日間です。無期限の場合は0を記載します。
limittextpermonthはMakerで音声変換する場合の、月の変換制限文字数です。半角数値で記載します。この制限は本ツールの月の全プロジェクトでの変換文字数合計と比較されます。
limittextareacountはMakerで文章を入力するテキストエリアの制限文字数です。半角数値で記載します。
limittextlinecountはMakerでの文節の制限文字数です。半角数値で記載します。



Pythonのインストール

MakerおよびPlayerから利用するCGIはcgi-binフォルダ内のtts.pyファイルです。これはPython言語で記載されてます。
動作確認されているPythonのバージョンは、3.4と3.7.0と3.8.10です。
Windows10およびmacOS,次のLinuxで動作確認されてます。WSL2上のUbuntuとraspberry piのRaspberry Pi OS上。
デモサイトは、ロリポップレンタルサーバーのライトプランで動作しました。別途モジュールのイントールは不要でした。
Pythonのインストール方法は省略します。”Python インストール”のキーワードで検索してみてください。難しくはないと思います。
環境によってはPython実行パスによってcgi-binフォルダ内のtts.pyファイル１行目を変更する必要があります。
#!/usr/bin/python3
という部分のパスを変更してください。例えば、ロリポップレンタルサーバーの古いタイプのサーバー環境では#!/usr/local/bin/python3.4とする必要がありました。
ロリポップレンタルサーバーの新しいタイプのサーバー環境では#!/usr/local/bin/python3.7とする必要がありました。
macOSではパスがかなり違うと思いますので、which python3コマンドでパスを調べてください。
macOSでは音声ファイル変換エラーとなる場合、SSL: CERTIFICATE_VERIFY_FAILEDのエラーが原因かもしれません。そのような表示の場合はpython3のアプリのフォルダ内に"install Certificates.command"というものがあるので、ダブルクリックすると良いようです。
Windowsの場合、PythonへのPATHが通っていれば、１行目は無関係で実行できますが、フルパス記述の場合は、以下のような形です。例を示します。


#!C:\Users\myname\AppData\Local\Programs\Python\Python38\python

ブラウザでMakerの画面を表示できて、それでも、MP3の変換だけうまくいかない場合は、Google Cloud Platformの設定が失敗しているのか、CERTIFICATE_VERIFY_FAILEDのエラーが原因かもしれません。対応方法は色々ですので、調べてみてください。
ブラウザでMakerの画面が表示できない場合、ページのタイトルだけブラウザタブに表示される場合は、Webサーバーは動作していて、CGI(Python)が実行できてません。１行目の記載が間違いか、macOSやLinuxの場合は権限の見直しが必要かもしれません。



Webサーバー

Apache等の本格的なWebサーバーでも結構ですが、インストールが少々手間かもしれませんので、簡易Webサーバーを２つご紹介します。
1.pythonの簡易Webサーバー
Windows10の場合、スタートボタンから"Windowsシステムツール"-"コマンドプロンプト"を右クリックして"その他"-"管理者として実行"を行うと、黒い画面がでますので、


c:
cd tts/documentroot/ttstop

などとドライブ移動とcdコマンドでttstopフォルダへ移動します。(Cドライブ直下にttsというフォルダで配置した場合）


python -m http.server 80 --cgi

とコマンドを実行すると起動します。ここで、pythonというのは環境によってはpython3であるかもしれません。他のOSでも起動コマンドは同じです。


python --version

または

python3 --version

でpython３系が起動しているほうが正しいです。
ポートを変更するには80の数字を変更してください。
正しく起動すれば、http://localhost/をブラウザで表示できるはずです。

2.cooyou.orgオリジナルのWindows用簡易Webサーバー
Windows限定ですが、documentrootフォルダ内にtanjunwsv.exeファイルがあります。右クリックして”管理者として実行”すると、なにも表示されませんが、バックグラウンドで動作してます。
正しく起動すれば、http://localhost/ttstop/をブラウザで表示できるはずです。
終了するにはPCをシャットダウンするか、タスクマネージャからtanjunwsv.exeタスクを終了させてください。
こちらの注意点としましては、ブラウザで表示する時にフォルダで終了するパスを記載する場合に最後に/が必須であることです。http://localhost/ttstopではだめで、http://localhost/ttstop/とします。
また、セキュリティソフトに誤検知されがちなので、セキュリティソフトで例外指定しておいていただいたほうが確実です。（なにも悪いものは入っておりません。）

上記２つのどちらでも、LAN環境でWebサーバーを起動した場合、セキュリティの関係で他PCからアクセスできないことがあります。Windows10での設定例を参考にしてください。

Windowsのスタートボタンから設定を開きます。「更新とセキュリティ」で「Windowsセキュリティ」を開きます。
「ファイアウォールとネットワーク保護」を開きます。
画面下のあたりにある「詳細設定」のリンクを開きます。確認ダイアログが出ると思いますので、OKします。設定ウインドウが表示されます。
ウインドウ左側の「受信の規則」をクリックして、ウインドウ右側の「新しい規則」をクリックします。
規則の種類のダイアログが出るとか思います。「ポート」を選択して、[次へ]ボタンをクリックします。
TCPが選択されていることを確認して、特定のローカルポートに80（または設定変更したポート番号）を入力して、[次へ]ボタンをクリックします。
"接続を許可する"を選択して、[次へ]ボタンをクリックします。"プライベート"のみにチェックをつけて[次へ]ボタンをクリックします。
分かりやすい名前を記載して[完了]ボタンをクリックすると他PCからアクセスできるようになります。




ライセンス

本ツールは独自ライセンスです。本ツール利用は商用可です。本ツール自体を組み込んだ製品を販売することは許可しません。本ツールやデモサイト、ヘルプページをホームページやブログやYoutube等で紹介するのは自由です。
cgi(.pyファイル）の著作権はcooyou.orgが保持します。
本ツールが含むcooyou.org作成のその他のhtmlファイル等の著作権は放棄します。自由にカスタマイズしてください。ただしGoogle Cloud Platformサービスに入出力する部分はGoogle Cloud Platform側の規約に従う必要があります。




TIPs




文節の区切りで|と^の違いは？

どちらも非表示記号ですが、最大長で自動的に区切る記号が^となりますので、手動で区切るには、テキストエリアでは|記号のほうをご利用ください。


文節の区切りで開始のカッコの処理が他の記号と違いますがなぜでしょうか？

（のような開始のカッコにつきましては、カッコを文節の先頭に含めます。そのほうが文節として適切だからです。



文節の音声やテキストを修正するには？

Maker画面で、該当する文節を編集して、再度その文節だけMP3ファイルを再作成すると簡単です。
Player画面では、音声のみ変更の場合は、[Play]ボタンで再生するだけで、更新が確認できます。
表示テキストを変更の場合は、[Load resource]で再読み込みすると更新が確認できます。



プロジェクトIDを知る方法は？

Playerを表示しているブラウザのURLに３２文字の数値が含まれている場合はそれがプロジェクトIDです。
または、ttstop/ttscontensフォルダ下に３２文字の数値のフォルダがありますので、それがプロジェクトIDです。
プロジェクトIDの先頭から作成日時がyyyymmddhhmmssの形式で含まれてますので、参考にしてください。



Playボタンを押してから時間を空けて再生したい場合は？

１文節フレーム目の"before interval"の時間をmsecで設定します。
<-->の同期チェックは外して再生してください。チェックがあると、文節が表示されたまま、時間を待ちます。



音声が無い文節を表示するには？

文節フレームの"after interval"の時間をmsecで設定します。



文章全体を表示するには？

ttsshow01.htmlなどのPlayerで、[Display focus text only]をチェックして、[Load resource]で再読み込みすると表示されます。



水平移動するアニメーションにするには？

ttsshow02.htmlのPlayerを使います。アニメーションの移動速度と文節の再生終わりタイミングは同期しませんので、アニメーションの速度を調整してください。
関連する設定はここです。calculate text widthとは文節の幅を考慮して移動するかどうかの設定です。




垂直移動するアニメーションにするには？

ttsshow03.htmlのPlayerを使います。アニメーションの移動速度と文節の再生終わりタイミングは同期しませんので、アニメーションの速度を調整してください。
関連する設定はここです。calculate text heightとは文節の高さを考慮して移動するかどうかの設定です。




矢印のようなマークの意味は？


<-->にチェックがある場合は、スライダーと現在文節フレームが同期します。チェックが無い場合は同期しませんので、手動で行うには、
<--ボタンでスライダーの位置を現在文節フレームとして設定します。-->ボタンで現在文節フレームをスライダーに設定します。スライダーの位置は、再生開始位置となります。
before intervalの設定がある場合は<-->のチェックはOFFにして再生してください。チェックがあると、文節が表示されたまま、時間を待ちます。



再生がカクつきます。止まります。


<-->のチェックを外してみてください。同期処理が無ければスムーズになると思います。
ttsshow05.htmlで表示する場合は、チェックを外さないと止まります。ttsshow05.htmlは3D処理を行うので処理は重いです。



3D表示のttsshow05.htmlのプレーヤーの設定は？

関連する設定はここです。画面下の枠外の位置が初期位置ですので、Y位置をマイナスにすると見える位置になるかと思います。垂直移動のアニメーション設定項目がありますがその部分は未使用ですので無視してください。
文章全体が長い場合は、RectangleのHeightも大きくして文章全体がRectangleに入るようにしてください。一時的にカラーのチェックをONにして色を変更すると大きさが見えて分かりやすいです。また、移動速度と再生位置は同期してません。




縦書き表示はできますか？

ttsshow06.htmlまたはttssshow07.htmlのプレーヤーを使います。ttsshow06のほうは文章全体を表示します。ttsshow07のほうは１つの文節のみを表示します。こちらは左右の位置変更や上下の位置変更が設定で可能です。



すでにある動画に対して字幕追加はできますか？

OBS Studio等の他のソフトでPlayer画面の再生をキャプチャして、字幕のみの動画ファイルを作成後、別途AviUtl等の動画編集ソフトで、すでにある動画と作成した字幕動画をクロマキー合成して、タイムライン上で字幕動画を文節ごとに分割して再生タイミングを合わせると良いと思います。



画像は表示できますか？

ttsshow11.htmlのプレーヤーを使います。Imageという横のボタンで画像ファイルを選択すると、現在文節フレームのBaseの背景画像として表示されます。
Base背景にフィットするように引き伸ばされますので、Base背景の縦横サイズと同じサイズで画像は作成しておくとよいでしょう。
文節フレームごとに登録できますが、画像を非表示にはしませんので、登録された文節フレーム以外でもそのまま表示され続けます。


お問い合わせメール admininfo@cooyou.org
https://cooyou.org
cooyou.org