如何使用 JavaScript SDK 在 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 上的这个答案解释了为什么这种类型的数组适用于音频数据：

Answer 1

 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!");

Answer 2

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

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

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

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

Answer 3

使用网络音频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 SDK 在 AWS Polly 中播放 AudioStream 响应？

How to play AudioStream response in AWS Polly using JavaScript SDK?

html

javascript

audio

amazon-web-services

amazon-polly