javascript - 播放dialogflowAPI音频响应的Web应用程序

标签 javascript node.js audio google-cloud-platform dialogflow-es

我想在我的Web应用程序中集成HTML5麦克风,记录音频并将其发送到(Node.js)后端,使用Dialogflow API进行音频处理,然后将音频结果返回给客户端以在浏览器中播放。

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

我找到了一个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女士!)她非常准确地解释了这个项目。

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

这些是我尝试example3时的结果。

这是终端。
terminal
这是Chrome的控制台。
enter image description here

我专注于此消息。

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

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

首先,我检查了计算机的麦克风设置以及浏览器的Web App Activity 和语音/音频(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给了我音频结果。

最佳答案

嗯,这很奇怪,因为我确实在Windows 10计算机上克隆了一个新的存储库(无需更改代码),并使用Chrome(79.0.3945.130)对其进行了测试,并且它可以正常工作。您的问题确实在发挥作用,因为您的浏览器确实收到了音频缓冲区。

由于您提到SelfServiceKiosk应用程序有效,示例3无效;也许您可以用SelfServiceKiosk应用程序已使用的功能替换playOutput函数?您可以在这里找到它,但是请注意,代码是用TypeScript编写的。
https://github.com/dialogflow/selfservicekiosk-audio-streaming/blob/master/client/src/app/dialogflow/dialogflow.component.ts

我知道这段代码有些不同,我想我以恢复和启动的方式编写了它,因为否则IOS似乎会阻止自动播放。希望有帮助吗?

关于javascript - 播放dialogflowAPI音频响应的Web应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61810207/

相关文章:

javascript - 单击按钮后启动 javascript 提示符

javascript - 创建闭包和 some_func.bind(this) 之间的性能差异

javascript - 将自定义下一张幻灯片按钮添加到 Unslider 脚本

javascript - 在 Meteor JS 中,文件在 node_modules 缓存中吗?

node.js - Imagemagick ENOENT 错误

android - 如何在我的 android 上安装 stagefright?

javascript - 如何模拟通过 require 创建的对象

javascript (node.js) 地理计算导致 NaN

javascript - 尝试在单击时播放音频文件时,无法读取undefined的 'keyCode'属性

node.js - 将8kHz mulaw转换为PCM 16kHz