現在、docomoから提供されている音声合成APIのうち、エーアイ社提供のものを使用しようとしています。REST APIの形で、音声データを受け取る部分までは、以下のようなコードで作成することができました。

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <script src="voice.js"></script> <!-- 下記のjavascriptファイル -->
5    </head>
6    <body>
7        <div>
8            音声合成テスト
9            <button onclick="voiceRequest();">再生</button>
10        </div>
11    </body>
12</html>

javascript
1function voiceRequest() {
2    console.log("ボタンが押されました");
3
4    var url = 'https://api.apigw.smt.docomo.ne.jp/aiTalk/v1/textToSpeech?APIKEY={APIキー}';
5    var ssml = '<?xml version="1.0" encoding="utf-8" ?><speak version="1.1"><voice name="sumire"><prosody rate="1.4" pitch="1.2">こんにちは。音声合成のテストです。</prosody></voice></speak>'
6    
7    var xhr = new XMLHttpRequest();
8    xhr.open('POST',url);
9    xhr.setRequestHeader('Content-Type','application/ssml+xml');
10    xhr.setRequestHeader('Accept','audio/L16');
11
12    xhr.onload = function() {
13        if (this.status == 200) {
14            // この時点で音声データはリニアPCM形式で取得できている
15        }
16    };
17    xhr.send(ssml);
18
19}

コード内に記述の通り、リニアPCM形式の音声データを取得するところまではできるのですが、そのままブラウザで再生しよう、様々な方法を試しても、上手くいきません。

試したこと

1. audio要素を使う

単純に、audio要素を使って再生しようとしても、再生することができませんでした。（PCMデータにはサンプリングレートなどのメタデータが入っていないので当たり前か…？）

2. Web Audio APIを使う

これも再生されませんでした。

javascript
1// 準備
2window.AudioContext = window.AudioContext || window.webkitAudioContext;
3var context = new AudioContext();
4
5// 音声を取得できた後(this.responseが取得したデータ)
6var source = context.createBufferSource();
7source.buffer = this.response;
8source.connect(context.destination);
9source.start(0);

(ここには記していませんが、いったんblobに格納してから、source.buffer = blobにしても同様。)

3. 有志のライブラリを使う

pcm-playerというものを作っている方がいたので、これを使って試してみましたが、やはり再生されませんでした。

javascript
1// 準備
2var player = new PCMPlayer({
3    encoding: '16bitInt',
4    channels: 1,
5    sampleRate: 16000,
6    flushingTime: 1000
7});
8
9// 音声を取得できた後(this.responseが取得したデータ)
10player.feed(this.response);