我想在我的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时的结果。
这是终端。
这是Chrome的控制台。
我专注于此消息。
(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/