javascript - 如何使用 JavaScript 开发工具包在 AWS Polly 中播放 AudioStream 响应？

Question

这是我的脚本：

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.7.13.min.js"></script>
<script>
    AWS.config.region = 'eu-west-1';
    AWS.config.accessKeyId = 'FOO';
    AWS.config.secretAccessKey = 'BAR';

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

    var params = {
        OutputFormat: 'mp3', /* required */
        Text: 'Hello world', /* required */
        VoiceId: 'Joanna', /* required */
        SampleRate: '22050',
        TextType: 'text'
    };

    polly.synthesizeSpeech(params, function(err, data) {
        if (err) console.log(err, err.stack); // an error occurred
        else     console.log(data);           // successful response
    });
</script>

请求成功，我得到这样的响应：

我该如何使用这种响应？我知道响应是反序列化的音频，但是我如何实际播放它，比如说，在 HTML5 音频元素中？

此外，关于 SO 的这个答案解释了为什么这种类型的数组适用于音频数据：https ://stackoverflow.com/a/26320913/1325575

score 19 · Accepted Answer

 var uInt8Array = new Uint8Array(audioStream);
 var arrayBuffer = uInt8Array.buffer;
 var blob = new Blob([arrayBuffer]);
 var url = URL.createObjectURL(blob);

 audioElement.src = url;
 audioElement.play();

我创建了一个名为ChattyKathy的 Javascript 库，如果您想采取简单的方法，它将为您处理整个过程。

只需将 AWS Credentials 对象传递给它，然后告诉她该说什么。她将调用 AWS，转换响应并播放音频。

var settings = {
    awsCredentials: awsCredentials,
    awsRegion: "us-west-2",
    pollyVoiceId: "Justin",
    cacheSpeech: true
}

var kathy = ChattyKathy(settings);

kathy.Speak("Hello world, my name is Kathy!");
kathy.Speak("I can be used for an amazing user experience!");

score 5 · Accepted Answer

Elliott 的 Chatty Kathy 代码对我来说效果很好，但是 Safari 和移动端存在两个不同的问题。

Safari：创建 blob 时，必须指定内容类型：

var blob = new Blob([arrayBuffer], {type: 'audio/mpeg'});
url = webkitURL.createObjectURL(blob);

移动端：以上必须为真，加上播放需要由用户触摸事件启动。注意：较旧的 iOS 版本似乎要求在与触摸事件相同的线程中启动播放，因此启动最终调用 audio.play() 的承诺链的触摸事件将失败。后来的 iOS 版本似乎对此更聪明。

score 1 · Accepted Answer

使用网络音频 API：

const result = await polly.synthesizeSpeech(params).promise();

const aContext = new AudioContext();

const source = aContext.createBufferSource();
source.buffer = await aContext.decodeAudioData(result.AudioStream.buffer);
source.connect(aContext.destination);
source.start();

文件：

javascript - 如何使用 JavaScript 开发工具包在 AWS Polly 中播放 AudioStream 响应？

3 回答 3

Related

Reference