[JavaScript] AWSのサービスをブラウザから使ってみる

2018/10/6

こんにちは。きんくまです。
AWSのサービスをブラウザからJavaScriptで使ってみるのをやったことがなかったので調べてみました。
ほとんど公式ドキュメントのここに書いてあるままです、、。すみません。
>> Getting Started in a Browser Script

サンプルだとAmazon Pollyという文字情報から音声を合成するサービスを使うまでを取り上げています。

JSを使うのに、ブラウザから使うのと、Node.jsから使うのとチュートリアルがあったのですが、今回はブラウザから使うパターンです。

AWSの各サービスをJSから使う基本パターンはこんな感じみたい。

1. Amazon Cognito Identity Poolを作成
2. 1で自動生成されたIAM Roleにポリシーを追加
3. コードを書く

1と2はチュートリアル通りにやれば良いので割愛します。

コードの部分

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello aws</title>
</head>
<body>
<div id="textToSynth">
    <input autofocus size="23" type="text" id="textEntry" value="今日は良いお天気ですね！"/>
    <button class="btn default" onClick="speakText()">生成！</button>
    <p id="resultText">上のところにテキスト入力してね</p>
</div>
<audio id="audioPlayback" controls>
    <source id="audioSource" type="audio/mp3" src="">
</audio>

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.283.1.min.js"></script>
<script src="sample.js"></script>
</body>
</html>

サンプルのコードだとp#resultが2つあったので、audioタグの中の方を削りました。

sample.js

//Cognitoに資格情報を問い合わせ
AWS.config.region = 'XXXXXXXXXX'; 
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: 'XXXXXXXXXX'
});

function speakText() {

    var speechParams = {
        OutputFormat: "mp3",
        SampleRate: "16000",
        Text: "",
        TextType: "text",
        VoiceId: "Takumi" //日本語男性
    };
    speechParams.Text = document.getElementById("textEntry").value;

    //Polly作成
    var polly = new AWS.Polly({apiVersion: '2016-06-10'});

    var signer = new AWS.Polly.Presigner(speechParams, polly);
    var audioSource = document.getElementById('audioSource');
    var resultText = document.getElementById('resultText');
    resultText.innerText = 'Now generating...';

    //リクエストして、生成した音声が入っているURLが返ってきたらaudioエレメントのソースに入れる
    signer.getSynthesizeSpeechUrl(speechParams, function(error, url) {
        if (error) {
            resultText.innerHTML = error;
        } else {
            audioSource.src = url;
            var audio = document.getElementById('audioPlayback');
            audio.load(); //これがないとChromeで動かなかったです、、
            audio.onloadeddata = function(){
                resultText.innerHTML = "再生できますよー";
            };
        }
    });
}

一番上のCognitoのところはCognitoの Identity pool のページの Sample code のところをそのままコピペしました。こいつが流出するとマズいやつだと思われ。上では適当にXXXにしています。

Pollyはいろんな言語を話せるみたいです。
どの言語が誰（VoiceId）なのかは、APIドキュメントを読んだところこんなメソッドを使えば良いみたい。

>> describeVoices

日本語なら ja-JPなので

polly.describeVoices({
    LanguageCode: "ja-JP"
}, function(err, data) {
    if(err){
        console.error(err);
    }else{
        console.log(data);
    }
});

返ってきたjson

{
    "NextToken": null,
    "Voices": [
        {
            "AdditionalLanguageCodes": null,
            "Gender": "Male",
            "Id": "Takumi",
            "LanguageCode": "ja-JP",
            "LanguageName": "Japanese",
            "Name": "Takumi"
        },
        {
            "AdditionalLanguageCodes": null,
            "Gender": "Female",
            "Id": "Mizuki",
            "LanguageCode": "ja-JP",
            "LanguageName": "Japanese",
            "Name": "Mizuki"
        }
    ]
}

VoiceIdとしては、男性が Takumi で、女性が Mizuki となってました。
なので、上のサンプルとしてはTakumiにしてあります。

あとつまったところとしては、audioタグ内のsourceのsrcにURLを入れただけだとChromeではうまく動かなかったので、load() を呼んであげる必要がありました。

少ないコードで、入力したテキストが音声として自動生成できるのはちょっと驚きました。