播放 dialogflowAPI 音频响应的网络应用程序

Question

我想在我的网络应用程序中集成一个 HTML5 麦克风，录制音频并将其发送到 (Node.js) 后端，使用 Dialogflow API 获取音频, 和 return 音频结果给客户端在浏览器中播放。

(我为 Linux、Debian 10.3 和 Google Chrome 浏览器使用 Windows 10、Windows 子系统。 )

我找到了一个 github 项目，这正是我想要做的。 https://github.com/dialogflow/selfservicekiosk-audio-streaming

这是 Lee Boonstra 女士的 Medium 博客。 (https://medium.com/google-cloud/building-your-own-conversational-voice-ai-with-dialogflow-speech-to-text-in-web-apps-part-i-b92770bd8b47) 她开发了这个项目。（非常感谢您，Boonstra 女士！）她非常准确地解释了这个项目。

此项目包含自助服务亭应用程序和 6 个简单示例。我尝试了所有这些。 selfservicekiosk 应用程序和简单示例 1、2、4、5、6 运行良好，但示例 3 无效。不幸的是，example3 是我想要做的。 https://github.com/dialogflow/selfservicekiosk-audio-streaming/tree/master/examples

这些是我尝试示例 3 时的结果。

这是终端。这是 Chrome 的控制台。

我关注这条消息。

(index):59
ArrayBuffer(0)
[[Int8Array]]: Int8Array []
[[Int16Array]]: Int16Array []
[[Int32Array]]: Int32Array []
[[Uint8Array]]: Uint8Array []

我认为浏览器可以获取音频结果，但无法播放。

首先，我检查了计算机的麦克风设置和浏览器的 Web App Activity & Voice/Audio(https://myaccount.google.com/activitycontrols)。

两者都已启用。

接下来，我检查 example3.html 文件并找到似乎在我的环境中不起作用的代码。但是，我不知道怎么改。

     /*
   * When working with Dialogflow and Dialogflow matched an intent,
   * and returned an audio buffer. Play this output.
   */
   function playOutput(arrayBuffer){
        let audioContext = new AudioContext();
        let outputSource;
        try {
            if(arrayBuffer.byteLength > 0){
                audioContext.decodeAudioData(arrayBuffer,
                function(buffer){
                    audioContext.resume();
                    outputSource = audioContext.createBufferSource();
                    outputSource.connect(audioContext.destination);
                    outputSource.buffer = buffer;
                    outputSource.start(0);
                },
                function(){
                    console.log(arguments);
                });
            }
        } catch(e) {
            console.log(e);
        }
    }

你能给我什么建议吗？提前谢谢你。

我想检查音频结果，所以我打开了 simpleserver.js 文件并更改了

async function detectIntent(audio){}

https://github.com/dialogflow/selfservicekiosk-audio-streaming/blob/master/examples/simpleserver.js

async function detectIntent(audio){
    request.inputAudio = audio;
    console.log(request);
    const responses = await sessionClient.detectIntent(request);
    const audioFile = responses[0].outputAudio;
    util.promisify(fs.writeFile)('test.wav', audioFile, 'binary');
    console.log('completed');
 }

我打开 test.wav 文件并确保 dialogflow 给我音频结果。

Answer 1

嗯，这很奇怪，因为我确实在我的 Windows 10 机器上克隆了一个新的 repo（没有更改代码），并使用 Chrome (79.0.3945.130) 对其进行了测试，它只是工作了。您的问题确实是播放部分，因为您的浏览器确实收到了音频缓冲区。

由于您提到 SelfServiceKiosk 应用程序有效，而示例 3 无效；也许您可以将 playOutput 函数替换为 SelfServiceKiosk 应用程序使用的函数？您可以在此处找到它，但请注意代码是用 TypeScript 编写的。
https://github.com/dialogflow/selfservicekiosk-audio-streaming/blob/master/client/src/app/dialogflow/dialogflow.component.ts

我知道这段代码有点不同，我想我是按照恢复和开始的方式编写的，否则 IOS 似乎会阻止自动播放。希望对您有所帮助？

Answer 2

我在 simpleserver.js 文件的 setupDialogflow() 函数中添加了这一行。

outputAudioConfig: {
        audioEncoding: 'OUTPUT_AUDIO_ENCODING_LINEAR_16'
      },

现在我可以从浏览器获取语音了。

播放 dialogflowAPI 音频响应的网络应用程序

web application which plays dialogflowAPI's audio response

javascript

audio

node.js

google-cloud-platform

dialogflow-es