onTtsMark() 콜백은 맞춤 <mark> 태그가
음성 합성 마크업 언어 (SSML)
TTS (텍스트 음성 변환)가 진행되는 동안 사용자에게 음성으로 안내합니다. 다음과 같은 작업을 할 수 있습니다.
서버 측 및 클라이언트 측 처리 개발에서 모두 onTtsMark() 사용
모델을 학습시키는 작업도
반복해야 합니다
다음 스니펫에서 onTtsMark()는 웹 앱의 애니메이션을 동기화합니다.
를 해당 TTS 출력으로 변환합니다. 작업이 사용자에게 '죄송합니다.
"잃어버렸다고" 웹 앱이 올바른 단어의 철자를 알려주고
있습니다.
다음 예시에서 웹훅 핸들러 revealWord에는
게임에서 졌을 때 사용자에 대한 응답에 다음과 같이 표시합니다.
자바스크립트
…app.handle('revealWord',conv=>{conv.add(newSimple(`<speak>Sorry, you lost.<mark name="REVEAL_WORD"/> The word is ${conv.session.params.word}.</speak>`));conv.add(newCanvas());});…
그러면 다음 코드 스니펫은 onTtsMark() 콜백을 등록하고
마크의 이름을 지정하고 revealCorrectWord() 함수를 실행합니다. 이 함수는
있습니다.
자바스크립트
…setCallbacks(){// declare Assistant Canvas Action callbacksconstcallbacks={onTtsMark(markName){if(markName==='REVEAL_WORD'){// display the correct word to the userthat.revealCorrectWord();}},}callbacks.onUpdate.bind(this);}…
onInputStatusChanged()
onInputStatusChanged() 콜백은 입력 상태가 변경되면 알려줍니다.
합니다. 입력 상태 변경은
마이크가 열리고 닫히거나 어시스턴트가 쿼리를 처리하는 동안 이
다음과 같은 이벤트가 발생하면 입력 상태가 변경될 수 있습니다.
작업에 대해 말하는 사용자
Android Google 검색 앱 (AGSA)에 사용자가 입력하는 텍스트
sendTextQuery() API를 사용하여 작업에 텍스트 쿼리를 보내는 웹 앱
홈 스토리지 및 기타 어시스턴트 이벤트에 쓰는 작업
이 콜백의 기본 사용 사례는 작업을
파악할 수 있습니다. 예를 들어 사용자가 양방향 콘텐츠를 플레이하는 경우
캔버스 게임을 실행하고 마이크를 열면 사용자가 게임을 일시중지하고
말하고 있습니다. 마이크가 열릴 때까지 기다렸다가
어시스턴트가 수신되었는지 확인합니다.
이 API는 다음 상태를 보고합니다.
LISTENING - 마이크가 열려 있음을 나타냅니다.
IDLE - 마이크가 닫혔음을 나타냅니다.
PROCESSING - 어시스턴트가 현재 쿼리를 실행 중임을 나타냅니다.
마이크가 닫혀 있습니다.
API는 상태가 변경될 때마다 작업에 입력 상태를 보고합니다.
상태 간 전환은 가능하지만 일반적인 흐름은 다음과 같습니다.
IDLE>LISTENING>PROCESSING>IDLE: 사용자가 질문을 하면
마이크가 종료됩니다.
IDLE>PROCESSING>IDLE - 웹 앱이 sendTextQuery() API를 사용합니다.
Action에 텍스트 쿼리를 보냅니다.
IDLE>LISTENING>IDLE - 사용자가 마이크를 열지만
질문을 할 수 있습니다
작업에서 이 기능을 사용하려면 웹 앱에 onInputStatusChanged()를 추가하세요.
다음 스니펫에 나와 있습니다.
onInputStatusChanged() 콜백은 단일 enum 매개변수를 다시 전달합니다.
inputStatus입니다. 이 값을 확인하면 현재 입력 상태를 볼 수 있습니다. 이
inputStatus는 LISTENING, PROCESSING, IDLE일 수 있습니다.
다음으로, 다음과 같이 callbacks 객체에 onInputStatusChanged()를 추가하여 등록합니다.
다음 스니펫에 나와 있습니다.
/***RegisterallcallbacksusedbytheInteractiveCanvasAction*executedduringgamecreationtime.*/setCallbacks(){constthat=this;//DeclaretheInteractiveCanvasactioncallbacks.constcallbacks={onUpdate(data){console.log('Received data',data);},onInputStatusChanged(inputStatus){console.log("The new input status is: ",inputStatus);},};//CalledbytheInteractiveCanvaswebapponcewebapphasloadedto//registercallbacks.this.canvas.ready(callbacks);}}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-07-25(UTC)"],[[["\u003cp\u003eInteractive Canvas Actions support \u003ccode\u003eonUpdate()\u003c/code\u003e, \u003ccode\u003eonTtsMark()\u003c/code\u003e, and \u003ccode\u003eonInputStatusChanged()\u003c/code\u003e callbacks to enhance user interactions.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003eonUpdate()\u003c/code\u003e callback facilitates data exchange between your webhook and web app for dynamic updates, primarily used in server-side fulfillment.\u003c/p\u003e\n"],["\u003cp\u003e\u003ccode\u003eonTtsMark()\u003c/code\u003e synchronizes web app behavior with spoken prompts by triggering actions based on custom SSML marks, applicable to both server-side and client-side fulfillment.\u003c/p\u003e\n"],["\u003cp\u003eCurrently in Developer Preview, \u003ccode\u003eonInputStatusChanged()\u003c/code\u003e allows your web app to respond to microphone and Assistant processing states for a more integrated user experience.\u003c/p\u003e\n"]]],[],null,["# Callbacks\n\nYou can implement the following callbacks in your Interactive Canvas Action:\n\n`onUpdate()`\n------------\n\nThe `onUpdate()`callback passes data from your webhook to your web app to update\nthe web app appropriately. You should only use this callback with the server-side\nfulfillment model of Interactive Canvas development.\n\nFor more information about `onUpdate()`, see\n[Pass data to update the web app](/assistant/interactivecanvas/prompts#pass_data_to_update_the_web_app).\n\n`onTtsMark()`\n-------------\n\nThe `onTtsMark()` callback is called when custom `\u003cmark\u003e` tags included in the\nSpeech Synthesis Markup Language ([SSML](/assistant/conversational/ssml))\nof your response are read out to the user during Text to Speech (TTS). You can\nuse `onTtsMark()` in both the server-side and client-side fulfillment development\nmodels.\n\nIn the following snippets, `onTtsMark()` synchronizes the web app's animation\nwith the corresponding TTS output. When the Action has said to the user, \"Sorry,\nyou lost,\" the web app spells out the correct word and displays the letters to\nthe user.\n| **Note:** At this time, timepoints don't work with the SSML `\u003cbreak\u003e` tag.\n\nIn the following example, the webhook handler `revealWord` includes a custom\nmark in the response to the user when they've lost the game: \n\n### JavaScript\n\n```javascript\n...\napp.handle('revealWord', conv =\u003e {\n conv.add(new Simple(`\u003cspeak\u003eSorry, you lost.\u003cmark name=\"REVEAL_WORD\"/\u003e The word is ${conv.session.params.word}.\u003c/speak\u003e`));\n conv.add(new Canvas());\n});\n...\n \n```\n\nThe following code snippet then registers the `onTtsMark()` callback, checks the\nname of the mark, and executes the `revealCorrectWord()` function, which updates\nthe web app: \n\n### JavaScript\n\n```javascript\n...\nsetCallbacks() {\n // declare Assistant Canvas Action callbacks\n const callbacks = {\n onTtsMark(markName) {\n if (markName === 'REVEAL_WORD') {\n // display the correct word to the user\n that.revealCorrectWord();\n }\n },\n }\n callbacks.onUpdate.bind(this);\n}\n...\n \n```\n\n`onInputStatusChanged()`\n------------------------\n\n\u003cbr /\u003e\n\n| **Warning**: This API is currently in Developer Preview. You can test this API in the simulator, but do not deploy an Action that uses this feature to alpha, beta, or production channels. Actions deployed using these features will not function on end-user devices.\n\n\u003cbr /\u003e\n\nThe `onInputStatusChanged()` callback notifies you when the input status changes\nin your Interactive Canvas Action. Input status changes indicate when the\nmicrophone opens and closes or when Assistant is processing a query. The\nfollowing events can cause the input status to change:\n\n- The user speaking to your Action\n- The user inputting text on the Android Google Search App (AGSA)\n- The web app using the `sendTextQuery()` API to send a text query to the Action\n- The Action writing to home storage and other Assistant events\n\nThe primary use case for this callback is synchronizing your Action with the\nuser's voice interactions. For example, if a user is playing an Interactive\nCanvas game and opens the microphone, you can pause the game while the user\nspeaks. You can also wait until the microphone is open to send a text query to\nAssistant to ensure it's received.\n\nThis API reports the following statuses:\n\n- `LISTENING` - Indicates that the microphone is open.\n- `IDLE` - Indicates that the microphone is closed.\n- `PROCESSING` - Indicates that Assistant is currently executing a query, and the microphone is closed.\n\nThe API reports the input status to your Action each time the status changes.\n\nWhile any transition between states is possible, the following flows are common:\n\n- `IDLE`\\\u003e`LISTENING`\\\u003e`PROCESSING`\\\u003e`IDLE` - The user says a query, the query is processed, and the microphone closes.\n- `IDLE`\\\u003e`PROCESSING`\\\u003e`IDLE` - The web app uses the `sendTextQuery()` API to send a text query to the Action.\n- `IDLE`\\\u003e`LISTENING`\\\u003e`IDLE` - The user opens the microphone but does not say a query.\n\nTo use this feature in your Action, add `onInputStatusChanged()` to your web app\ncode, as shown in the following snippet: \n\n onInputStatusChanged(inputStatus) {\n console.log(\"The new input status is: \", inputStatus);\n }\n\nThe `onInputStatusChanged()` callback passes back a single enum parameter,\n`inputStatus`. You can check this value to see the current input status. The\n`inputStatus` can be `LISTENING`, `PROCESSING`, or `IDLE`.\n\nNext, add `onInputStatusChanged()` to the `callbacks` object to register it, as\nshown in the following snippet: \n\n /**\n * Register all callbacks used by the Interactive Canvas Action\n * executed during game creation time.\n */\n setCallbacks() {\n const that = this;\n // Declare the Interactive Canvas action callbacks.\n const callbacks = {\n onUpdate(data) {\n console.log('Received data', data);\n },\n onInputStatusChanged(inputStatus) {\n console.log(\"The new input status is: \", inputStatus);\n },\n };\n // Called by the Interactive Canvas web app once web app has loaded to\n // register callbacks.\n this.canvas.ready(callbacks);\n }\n }"]]