In the Video
Japanese【日本語】
English
Overview
How to use the reading software AmazonPolly with just a web browser without a server.
Almost free for one year (up to 5 million/1 million words)
We will introduce a sample that uses reading software only on a web page using the AWS Javascript SDK.
In addition, it supports not only English and Japanese, but almost all major languages such as Chinese, Korean, and Arabic.
All Youtube English voices are posted on this site using Amazon Polly.
Amazon’s official Javascript SDK usage method is as follows.
Pricing
AmazonPolly has two usage types:
1) Standard
2) Neural
Neural will read aloud with higher quality, but the price specification will be higher.
The free tier is 5 million characters per month (approximately 150 hours) for standard and 1 million characters (approximately 30 hours) for neural per month for the first year.
After the first year, it costs $4 for standard and $16 for neural, per 1 million characters in a month.
How to Use Amazon Polly with just a web browser
To use it, you need to do two things.
- Set AWS to get the region and pool ID
Create an AWS account and Configure the settings in the AWS console to get the Region and pool ID. - Create the web page to use AmazonPolly
Create the web page which Loads the AWS Javascript SDK and uses AmazonPolly with the obtained region and pool ID.
Specifically, we will look at the following items.
1. AWS settings to get the region and pool ID
1-1. Create an Account for AWS(Amazon Web Service)
1) Access the AWS website and Create a new Account
2) Verify Email address
3) Input reauested payment information
You will be asked to enter your credit card and other payment information into your account, so please enter the required information. Account must be billable.
1-2. Set “Identity Pool” at Amazon Cognito
- Select “Amazon Cognito” service of AWS.
2) Create Identity Pool
3) Input Name”MyPollyApp” and check unauthenticated identities, then Create
4) Accept “Allow” of using IAM roles
5) Select “Javascript” and Make a note of these IDs as you will use them later. Then Click “Edit Identity pool”
6) “Save Changes” about role setting.
Completed this section, and go to the next section.
1-3. Set “Identity Pool” to IAM Role
1) Select “IAM” service of AWS
2) Select “Roles” and “UnAuthorized” role
3) Select “Attach policies”
4) Search and Attach “AmazonPollyFullAccess”
5) Confirm the Policy about “AmazonPollyFullAccess”
Completed AWS setting.
2. Create the web page to use AmazonPolly
Sample Web Page using AWS Javascript SDK.
Using the obtained region and pool ID, I created this sample page(See below) that can use AmazonPolly.
The AmazonPolly voice type on this page utilizes “Neural” instead of “Standard”. (Since it is specified in the Engine, please change it as necessary)
I also wanted to download the audio file, so I’m trying to run the download as well.
You can use it by entering it on the following page.
Also, if you save this page on your computer, set the region and pool ID with a text editor, and open it as a local file with a web browser, you can use it without entering the ID every time.
The source codes are below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Amazon Polly Application</title>
<style>
#textEntry {
width: 90%;
height: 300px;
display: block;
}
button {
width: 90%;
height: 50px;
display: block;
}
</style>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1282.0.min.js"></script>
<script type="text/javascript">
/*****************************************************************************************
*****************************************************************************************
Official Documents
https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/getting-started-browser.html
https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Polly.html
*****************************************************************************************
*****************************************************************************************/
// #######################################################################################
// Initialize the Amazon Cognito credentials provider
AWS.config.region = '########## CHANGE REQUIRED ##########'; // Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: '########## CHANGE REQUIRED ##########',
});
// #######################################################################################
// Function invoked by button click
function speakText() {
// Update AWS Config if Manul setting exist.
var setRegion = document.getElementById('region').value;
var setPoolId = document.getElementById('poolId').value;
if (setRegion != "" && setPoolId != "") {
AWS.config.region = setRegion;
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: setPoolId,
});
}
// Create the JSON parameters for getSynthesizeSpeechUrl
var speechParams = {
OutputFormat: "mp3",
SampleRate: "16000",
Text: "",
TextType: "text",
VoiceId: "Matthew",
Engine: "neural" // standard or neural
};
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 = "Speech ready to play.";
downloadFile( url );
}
});
}
function downloadFile( url ) {
// XMLHttpRequestオブジェクトを作成する
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob"; // Blobオブジェクトとしてダウンロードする
xhr.onload = function (oEvent) {
// ダウンロード完了後の処理を定義する
var blob = xhr.response;
if (window.navigator.msSaveBlob) {
// IEとEdge
window.navigator.msSaveBlob(blob, filename);
} else {
// それ以外のブラウザ
// Blobオブジェクトを指すURLオブジェクトを作る
var objectURL = window.URL.createObjectURL(blob);
// リンク（<a>要素）を生成し、JavaScriptからクリックする
var link = document.createElement("a");
document.body.appendChild(link);
link.href = objectURL;
link.download = "polly.mp3";
link.click();
document.body.removeChild(link);
}
};
// XMLHttpRequestオブジェクトの通信を開始する
xhr.send();
}
</script>
</head>
<body><center>
<div id="textToSynth">
<textarea id="textEntry" name="textEntry"
placeholder="Type some text here...">It's very good to meet you.</textarea><br>
<button onClick="speakText()">Synthesize & Download</button>
<p id="result">Enter text above then click Synthesize, then you can download.</p>
</div>
<audio id="audioPlayback" controls>
<source id="audioSource" type="audio/mp3" src="">
</audio>
<br><br>
<details>
<summary>Manual Setting [Optional]</summary>
<table>
<tr>
<td>AWS Config Region</td>
<td>:</td>
<td><input type="text" id="region" name="region"></td>
</tr><tr>
<td>AWS Config Credentials</td>
<td>:</td>
<td><input type="text" id="poolId" name="poolId"></td>
</tr>
</table>
</details>
</center></body>
</html>
Finally, please refer to the official site below for options available with AWS Javascript SDK.
Comments