作成したアプリケーションは以下のように動作します。
APEXアプリケーションのアプリケーション定義の置換文字列G_REQUEST_URLを、新しく作成した音声を返すRESTサービスの完全なURLに置き換えます。
写真の選択を変更したときに、応答の文章であるページ・アイテムP1_RESPONSEをクリアする代わりに、音声要素を非表示にします。
ORDSのREST APIにテンプレートとしてanimal-speechを作成し、POSTハンドラに以下のコードを記述します。パッケージUTL_OPENAI_VISIONに、OpenAIのspeechエンドポイントを呼び出すプロシージャとしてSPEECHを追加し、それをコード中で呼び出しています。
リージョンResponseに音声要素を埋め込みます。
ソースのHTMLコードに以下を記述します。
<audio controls id="my-audio"></audio>
写真の選択を変更したときに、応答の文章であるページ・アイテムP1_RESPONSEをクリアする代わりに、音声要素を非表示にします。
TRUEアクションのクリアを非表示に変更し、影響を受ける要素の選択タイプにJavaScript式を選択し、JavaScript式として以下を記述します。
document.getElementById("my-audio")
選択タイプにjQueryセレクタを選択し、jQueryセレクタとして#my-audioを指定することもできます。
ボタンSUBMIT（ラベルは問い合わせる）を押した時に、音声要素を表示するTRUEアクションを追加します。
TRUEアクションは表示、影響を受ける要素は先ほどの非表示のアクションと同じです。ページが最初に表示されるときは音声要素は表示しないため、初期化時に実行はオフにします。
TRUEアクションのJavaScriptコードの実行の設定のコードを、以下に記述に変更します。macOSのChromeで実行するとelem.play()を呼び出した時点で再生が開始されますが、iPhoneのSafariでは、elem.play()では再生されないようです。再生ボタンをクリックする必要がありました。
影響を受ける要素の選択タイプを- 選択 -に戻し、無指定にします。
ページ・アイテムP1_RESPONSEを削除します。
以上で写真の説明を音声として読み上げる実装ができました。
少しだけAPEXアプリケーションを改良します。
ページ・アイテムP1_IMAGEに表示されているアイコンを変更してみます。
FontAPEXのページを開きます。
cameraのアイコンを検索します。fa-cameraを開きます。
表示したいアイコンを修飾し、HTMLまたはCSSとしての記述を取得します。今回は、SizeはLarge、Scaleは5xを選択します。Iconの記述は以下になります。
fa-camera fa-5x fa-lg
Iconの記述をコピーします。
ページ・アイテムP1_IMAGEの外観のアイコンに、コピーした文字列を設定します。
以上でアプリケーションは完成です。実行すると記事の先頭のGIF動画のように動作します。
OpenAIのText-to-speechのドキュメントに記載があるように、現在は英語に最適化されているようです。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/text-to-speech.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
