메뉴
Amazon Translate
개발자 안내서

Amazon Translate과 함께 Amazon Polly 사용

번역된 텍스트를 말로 들으려면 Amazon Polly를 Amazon Translate과 함께 사용합니다. 이 예제에서는 Amazon Translate을 사용하여 텍스트를 번역한 후 Amazon Polly를 사용하여 이 텍스트를 말로 들을 수 있는 웹 페이지를 만들어 보겠습니다. 코드는 다음과 같이 요약할 수 있습니다.

  • 웹 페이지를 만들기 위한 CSS 및 HTML.

  • Amazon Translate 및 Amazon Polly에 대한 컨트롤러를 만드는 초기화 코드.

  • 웹 페이지에서 데이터를 읽고 Amazon Translate을 호출하는 함수.

  • 웹 페이지에서 데이터를 읽고 Amazon Polly을 호출하는 함수.

  • 웹 페이지를 관리하기 위한 유틸리티 함수.

예제를 구성하려면

  1. AWS SDK for JavaScript를 설치하고 구성합니다. SDK for JavaScript를 설치하는 방법은 JavaScript용 SDK 설치를 참조하십시오.

  2. 예제 코드를 복사하여 웹 서버의 HTML 파일에 붙여 넣습니다.

  3. SDK for JavaScript를 설치한 위치로 <script> 태그를 업데이트합니다.

  4. 리전과 엔드포인트를 Amazon Translate 및 Amazon Polly 작업을 실행하려는 리전으로 변경합니다. Amazon Translate을 지원하는 리전의 목록은 지침 및 제한 사항 단원을 참조하십시오. Amazon Polly를 지원하는 리전의 목록은 Amazon Web Services 일반 참조에서 AWS 리전 및 엔드포인트를 참조하십시오.

  5. 이 예제를 실행하는 데 필요한 최소한의 권한을 갖는 IAM 사용자를 만듭니다. IAM 사용자를 만드는 방법은 AWS Identity and Access Management 사용 설명서에서 AWS 계정에 IAM 사용자 만들기를 참조하십시오. 필요한 권한 정책은 Amazon Translate에 대한 자격 증명 기반 정책(IAM 정책) 사용 단원과 Amazon Polly 개발자 안내서Amazon Polly에서 ID 기반 정책(IAM 사용자) 사용를 참조하십시오.

  6. 이전 단계에서 만든 IAM 사용자의 액세스 ID와 비밀 키를 제공합니다.

코드

다음은 예제 웹 페이지의 전체 코드입니다. 이 코드를 HTML 파일로 복사하여 웹 서버에서 이 예제를 실행할 수 있습니다.

<!DOCTYPE html> <html> <head> <title>Amazon Translate</title> <script src="aws-sdk/dist/aws-sdk.js"></script> </head> <body> <h1 style="text-align: left">Amazon Translate Demo</h1> <br/> <table class="tg"> <tr> <th align="left"> Source Language Code: <select id="sourceLanguageCodeDropdown"> <option value="en">en</option> <option value="ar">ar</option> <option value="de">de</option> <option value="es">es</option> <option value="fr">fr</option> <option value="pt">pt</option> <option value="zh">zh</option> </select> </th> <th align="left"> Target Language Code: <select id="targetLanguageCodeDropdown"> <option value="en">en</option> <option value="ar">ar</option> <option value="de">de</option> <option value="es">es</option> <option value="fr">fr</option> <option value="pt">pt</option> <option value="zh">zh</option> </select> </th> </tr> <tr> <th> <textarea id="inputText" name="inputText" rows="10" cols="50" placeholder="Text to translate..."></textarea> </th> <th> <textarea id="outputText" name="outputText" rows="10" cols="50" placeholder="Translated text..."></textarea> </th> </tr> <tr> <th align="left"> <button type="button" name="translateButton" onclick="doTranslate()">Translate</button> <button type="button" name="synthesizeButton" onclick="doSynthesizeInput()">Synthesize Input Speech</button> <button type="button" name="clearButton" onclick="clearInputs()">Clear</button> </th> <th align="left"> <button type="button" name="synthesizeButton" onclick="doSynthesizeOutput()">Synthesize Output Speech</button> </th> </tr> </table> <script type="text/javascript"> // set the focus to the input box document.getElementById("inputText").focus(); /** * Change the region and endpoint. AWS.config.region = 'region'; // Region var ep = new AWS.Endpoint('endpoint'); /** * Place your credentials here. The IAM user associated with these credentials must have permissions to call * Amazon Translate. We recommend using the following permissions policy and nothing more, as anyone that has * access to this HTML page will also have access to these hard-coded credentials. * { * "Version": "2012-10-17", * "Statement": [ * { * "Action": [ * "translate:TranslateText", * "polly:SynthesizeSpeech" * ], * "Resource": "*", * "Effect": "Allow" * } * ] * } * * For more information about the AWS Credentials object, see: * http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Credentials.html */ AWS.config.credentials = new AWS.Credentials("access key", "secret key); var translate = new AWS.Translate({endpoint: ep, region: AWS.config.region}); var polly = new AWS.Polly(); function doTranslate() { var inputText = document.getElementById('inputText').value; if (!inputText) { alert("Input text cannot be empty."); exit(); } // get the language codes var sourceDropdown = document.getElementById("sourceLanguageCodeDropdown"); var sourceLanguageCode = sourceDropdown.options[sourceDropdown.selectedIndex].text; var targetDropdown = document.getElementById("targetLanguageCodeDropdown"); var targetLanguageCode = targetDropdown.options[targetDropdown.selectedIndex].text; var params = { Text: inputText, SourceLanguageCode: sourceLanguageCode, TargetLanguageCode: targetLanguageCode }; translate.translateText(params, function(err, data) { if (err) { console.log(err, err.stack); alert("Error calling Amazon Translate. " + err.message); return; } if (data) { var outputTextArea = document.getElementById('outputText'); outputTextArea.value = data.TranslatedText; } }); } function doSynthesizeInput() { var text = document.getElementById('inputText').value.trim(); if (!text) { return; } var sourceLanguageCode = document.getElementById("sourceLanguageCodeDropdown").value; doSynthesize(text, sourceLanguageCode); } function doSynthesizeOutput() { var text = document.getElementById('outputText').value.trim(); if (!text) { return; } var targetLanguageCode = document.getElementById("targetLanguageCodeDropdown").value; doSynthesize(text, targetLanguageCode); } function doSynthesize(text, languageCode) { var voiceId; switch (languageCode) { case "de": voiceId = "Marlene"; break; case "en": voiceId = "Joanna"; break; case "es": voiceId = "Penelope"; break; case "fr": voiceId = "Celine"; break; case "pt": voiceId = "Vitoria"; break; default: voiceId = null; break; } if (!voiceId) { alert("Speech synthesis unsupported for language code: \"" + languageCode + "\""); return; } var params = { OutputFormat: "mp3", SampleRate: "8000", Text: text, TextType: "text", VoiceId: voiceId }; polly.synthesizeSpeech(params, function(err, data) { if (err) { console.log(err, err.stack); // an error occurred alert("Error calling Amazon Polly. " + err.message); } else { var uInt8Array = new Uint8Array(data.AudioStream); var arrayBuffer = uInt8Array.buffer; var blob = new Blob([arrayBuffer]); var url = URL.createObjectURL(blob); audioElement = new Audio([url]); audioElement.play(); } }); } function clearInputs() { document.getElementById('inputText').value = ""; document.getElementById('outputText').value = ""; document.getElementById("sourceLanguageCodeDropdown").value = "en"; document.getElementById("targetLanguageCodeDropdown").value = "en"; } </script> </body> </html>

이 페이지에서: