クライアントサイド JavaScript から AWS サービス Amazon Polly を使って音声データを生成する

AWSにはいろいろなサービスがあります。いままでサーバーサイドが必要であった機能の実装もAWSだけで構築できるようになりました。

サーバーサイドがあったほうがセキュリティは向上しますが、クライアントサイドだけで構築できるとかなり効率化につながりますよね。

この記事では、クライアントサイドJavaScriptだけでAWSサービス Amazon Polly を実行する方法を紹介します。

1 Amazon Cognito から IDプールを作成する

AWS Console にログインし、Amazon Cognito からIDプールの管理をクリックします。

注意事項を読み、「新しいIDプールの作成」をクリックします。

IDプール名を入力し、「認証されていないIDに対してアクセスを有効にする」にチェックを入れます。

認証されたロール(Auth_Role)と認証されていないロール(Unauth_Role)を作成しますので、「許可」をクリックします。

IDプールが作成されます。

2 AWS認証情報を取得する

プラットフォームに「JavaScript」を選択し、AWS認証情報の取得に表示されている以下の情報をメモします。この認証情報は、クライアントサイドJavaScriptのソースコードとして使用します。

AWS.config.region = 'XXXXXXXXXX'; // リージョン
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: 'XXXXXXXXX:YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY',
});

3 認証されていないロールにAmazon Pollyのアクセス権を許可する

さきほど作成したUnauth_Roleに、以下のアクセス権を許可します。

  • AmazonPollyReadOnlyAccess

4 クライアントサイドJavaScriptおよびHTMLのコーディング

以下がコーディング例になります。Javascriptオンコーディング部分の先頭に、「2 AWS認証情報を取得する」で取得した、Cognitoから生成されたAWS認証情報を貼りつけてください。

    <div id="textToSynth">
      <input autofocus size="23" type="text" id="textEntry" value="こんにちは、Useful Edge ブログへようこそ"/>
      <button class="btn default" onClick="speakText()" id="SynthesizeButton">音声データ生成</button>
      <p id="result">テキストを入力して、「音声データ生成」ボタンをクリックしてください</p>
    </div>
    <audio id="audioPlayback" controls>
      <source id="audioSource" type="audio/mp3" src="">
    </audio>
    <!\-\- (script elements go here) -->
       
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.657.0.min.js"></script>

        <script type="text/javascript">

// Initialize the Amazon Cognito credentials provider
// Cognito から生成されたAWS認証情報を貼りつけ

        
        // Function invoked by button click
        function speakText() {
            // Create the JSON parameters for getSynthesizeSpeechUrl
            var speechParams = {
                OutputFormat: "mp3",
                SampleRate: "16000",
                Text: "",
                TextType: "text",
                VoiceId: "Mizuki"
            };
            speechParams.Text = document.getElementById("textEntry").value;
    
                // Create the Polly service object and presigner object
            var polly = new AWS.Polly({apiVersion: '2016-06-10'});
            var signer = new AWS.Polly.Presigner(speechParams, polly)
        
            // Create presigned URL of synthesized speech file
            signer.getSynthesizeSpeechUrl(speechParams, function(error, url) {
            if (error) {
                document.getElementById('result').innerHTML = error;
            } else {
                document.getElementById('audioSource').src = url;
                document.getElementById('audioPlayback').load();
                document.getElementById('result').innerHTML = "再生可能になりました";

                document.getElementById("SynthesizeButton").disabled = true;
            }
          });
        }
    </script>

5 懸念事項

この記事の実装方法では、ウェブページのドメインを制限する機能がありません。そのため、安易に公開すると、AWSサービスをタダ乗りされてしまう可能性があります。

ユーザープールを作成してドメインを制限することができるようですので、こちらで実装確認ができたらブログで公開したいと思います。

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱