{"id":111195,"date":"2025-05-30T08:09:24","date_gmt":"2025-05-30T03:39:24","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/01-harmonyos5-coreseechkit-case\/"},"modified":"2025-05-30T08:09:24","modified_gmt":"2025-05-30T03:39:24","slug":"01-harmonyos5-coreseechkit-case","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/01-harmonyos5-coreseechkit-case\/","title":{"rendered":"01-harmonyos5-coreseechkit-case"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/01-harmonyos5-coreseechkit-case\/#%D8%B4%D8%B1%D8%AD_%D9%BE%D8%B1%D9%88%D9%86%D8%AF%D9%87\" >\u0634\u0631\u062d \u067e\u0631\u0648\u0646\u062f\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/01-harmonyos5-coreseechkit-case\/#%D9%85%D8%B1%D8%A7%D8%AD%D9%84_%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C\" >\u0645\u0631\u0627\u062d\u0644 \u0627\u062c\u0631\u0627\u06cc:<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/01-harmonyos5-coreseechkit-case\/#1_%D9%85%D8%A7%DA%98%D9%88%D9%84_%D9%87%D8%A7%DB%8C_%D9%84%D8%A7%D8%B2%D9%85_%D8%B1%D8%A7_%D9%88%D8%A7%D8%B1%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >1. \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/01-harmonyos5-coreseechkit-case\/#2_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D8%B1%D8%A7_%D8%AA%D8%B9%D8%B1%DB%8C%D9%81_%DA%A9%D9%86%DB%8C%D8%AF\" >2. \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/01-harmonyos5-coreseechkit-case\/#%D8%AE%D9%84%D8%A7%D8%B5%D9%87\" >\u062e\u0644\u0627\u0635\u0647:<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/01-harmonyos5-coreseechkit-case\/#%D9%86%DA%A9%D8%A7%D8%AA_%DA%A9%D9%84%DB%8C%D8%AF%DB%8C\" >\u0646\u06a9\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/01-harmonyos5-coreseechkit-case\/#%D8%B1%D9%85%D8%B2_%DA%A9%D8%A7%D9%85%D9%84\" >\u0631\u0645\u0632 \u06a9\u0627\u0645\u0644<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B4%D8%B1%D8%AD_%D9%BE%D8%B1%D9%88%D9%86%D8%AF%D9%87\"><\/span>\n<p>  \u0634\u0631\u062d \u067e\u0631\u0648\u0646\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u06cc\u06a9 \u0645\u0648\u0631\u062f \u0645\u062a\u0646 \u0628\u0647 \u06af\u0641\u062a\u0627\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062e\u062f\u0645\u0627\u062a \u0635\u0648\u062a\u06cc \u0627\u0633\u0627\u0633\u06cc AI \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u0627\u0633\u062a.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxieg4c2j67u3fkhaoieq.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\" width=\"800\" height=\"1726\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%A7%D8%AD%D9%84_%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C\"><\/span>\n<p>  \u0645\u0631\u0627\u062d\u0644 \u0627\u062c\u0631\u0627\u06cc:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1_%D9%85%D8%A7%DA%98%D9%88%D9%84_%D9%87%D8%A7%DB%8C_%D9%84%D8%A7%D8%B2%D9%85_%D8%B1%D8%A7_%D9%88%D8%A7%D8%B1%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  1. \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 <code>textToSpeech<\/code> \u0648\u062a <code>promptAction<\/code> \u0645\u0627\u0698\u0648\u0644 \u0647\u0627 \u060c \u06a9\u0647 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0628\u0631\u0627\u06cc \u0645\u062a\u0646 \u0628\u0647 \u06af\u0641\u062a\u0627\u0631 \u0648 \u0646\u0645\u0627\u06cc\u0634 \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u0633\u0631\u06cc\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">textToSpeech<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@kit.CoreSpeechKit<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">promptAction<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@kit.ArkUI<\/span><span class=\"dl\">'<\/span>\n<\/code><\/pre>\n<\/div>\n<p>\u062a\u0648\u0636\u06cc\u062d: <code>textToSpeech<\/code> \u0645\u0627\u0698\u0648\u0644 \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u062a\u0646 \u0628\u0647 \u06af\u0641\u062a\u0627\u0631 \u0648 <code>promptAction<\/code> \u0627\u0632 \u0645\u0627\u0698\u0648\u0644 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u0633\u0631\u06cc\u0639 \u062f\u0631 \u0631\u0627\u0628\u0637 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D8%B1%D8%A7_%D8%AA%D8%B9%D8%B1%DB%8C%D9%81_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  2. \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u0632 <code>@Entry<\/code> \u0648\u062a <code>@ComponentV2<\/code> \u062f\u06a9\u0648\u0631\u0627\u062a\u0648\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u0628\u0647 \u0646\u0627\u0645 <code>CoreSpeechKit<\/code>\u0628\u0634\u0631\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"p\">@<\/span><span class=\"nd\">Entry<\/span>\n<span class=\"p\">@<\/span><span class=\"nd\">ComponentV2<\/span>\n<span class=\"nx\">struct<\/span> <span class=\"nx\">CoreSpeechKit<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/ Text content to be broadcast<\/span>\n  <span class=\"nl\">text<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n      In March at 45 degrees north latitude, time ties a gentle knot here. The morning mist by the Songhua River wraps fine snow, carving each branch into transparent glass. Ice crystals stack on the branches to form magnolias with a thousand petals. What rustles down when the wind passes through the branches is not snowflakes, but clearly the fragments of stars falling into the world.\n      At this time, the apricot blossoms in Jiangnan are brewing honey against the warm wind. The pink clouds of flower shadows spread over the white walls and black tiles, and even the air is permeated with a slightly intoxicating sweetness. The colorist of the seasons quietly divides the palette in half - the north is still persistently continuing the end of winter, using icicles as a pen to outline frost flowers on the window panes; the south is already eager to open the first page of spring, letting the swallows fly over the ink - painted alleys with the willow color.\n      This temperature difference of three thousand miles weaves two silk brocades at both ends of the twilight line: the north is a plain brocade embroidered with silver threads, wrapped with unspoken whispers in the cold; the south is a soft silk dyed by silk - reeling women, rippling with the newborn whispers in the warmth. When the rime in Harbin melts the first drop of brilliance in the morning sun, the magnolias in Hangzhou just shake off the third piece of moonlight on their shoulders. It turns out that spring is stepping on the latitude and longitude lines, composing the most moving polyphony between the harshness and the warmth in the world.\n  `<\/span>\n  <span class=\"c1\">\/\/ Text-to-speech engine instance<\/span>\n  <span class=\"nx\">ttsEngine<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">textToSpeech<\/span><span class=\"p\">.<\/span><span class=\"nx\">TextToSpeechEngine<\/span>\n\n  <span class=\"c1\">\/\/ Local state to mark whether it is playing<\/span>\n  <span class=\"p\">@<\/span><span class=\"nd\">Local<\/span> <span class=\"nx\">isPlaying<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span>\n\n  <span class=\"c1\">\/\/ Initialize the text-to-speech engine<\/span>\n  <span class=\"k\">async<\/span> <span class=\"nf\">initTextToSpeechEngine<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nf\">canIUse<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">SystemCapability.AI.TextToSpeech<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">params<\/span><span class=\"p\">:<\/span> <span class=\"nx\">textToSpeech<\/span><span class=\"p\">.<\/span><span class=\"nx\">CreateEngineParams<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">language<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">zh-CN<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">person<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">online<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ttsEngine<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">textToSpeech<\/span><span class=\"p\">.<\/span><span class=\"nf\">createEngine<\/span><span class=\"p\">(<\/span><span class=\"nx\">params<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Called when the component is about to appear<\/span>\n  <span class=\"nf\">aboutToAppear<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">initTextToSpeechEngine<\/span><span class=\"p\">()<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Called when the component is about to disappear<\/span>\n  <span class=\"nf\">aboutToDisappear<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nf\">canIUse<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">SystemCapability.AI.TextToSpeech<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ttsEngine<\/span><span class=\"p\">?.<\/span><span class=\"nf\">stop<\/span><span class=\"p\">()<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ttsEngine<\/span><span class=\"p\">?.<\/span><span class=\"nf\">shutdown<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Play voice<\/span>\n  <span class=\"nf\">play<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nf\">canIUse<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">SystemCapability.AI.TextToSpeech<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ttsEngine<\/span><span class=\"p\">?.<\/span><span class=\"nf\">isBusy<\/span><span class=\"p\">())<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">promptAction<\/span><span class=\"p\">.<\/span><span class=\"nf\">showToast<\/span><span class=\"p\">({<\/span> <span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Playing...<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">params<\/span><span class=\"p\">:<\/span> <span class=\"nx\">textToSpeech<\/span><span class=\"p\">.<\/span><span class=\"nx\">SpeakParams<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">requestId<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">10000<\/span><span class=\"dl\">'<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ttsEngine<\/span><span class=\"p\">?.<\/span><span class=\"nf\">speak<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">,<\/span> <span class=\"nx\">params<\/span><span class=\"p\">)<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">isPlaying<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Build the component interface<\/span>\n  <span class=\"nf\">build<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nc\">Stack<\/span><span class=\"p\">({<\/span> <span class=\"na\">alignContent<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Alignment<\/span><span class=\"p\">.<\/span><span class=\"nx\">BottomEnd<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nc\">List<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nc\">ListItem<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nc\">Text<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">lineHeight<\/span><span class=\"p\">(<\/span><span class=\"mi\">32<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">padding<\/span><span class=\"p\">({<\/span> <span class=\"na\">left<\/span><span class=\"p\">:<\/span> <span class=\"mi\">15<\/span><span class=\"p\">,<\/span> <span class=\"na\">right<\/span><span class=\"p\">:<\/span> <span class=\"mi\">15<\/span> <span class=\"p\">})<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">height<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n\n      <span class=\"nc\">Row<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nc\">Image<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">isPlaying<\/span> <span class=\"p\">?<\/span> <span class=\"nf\">$r<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">sys.media.AI_playing<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"nf\">$r<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">sys.media.AI_play<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span>\n          <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"mi\">24<\/span><span class=\"p\">)<\/span>\n          <span class=\"p\">.<\/span><span class=\"nf\">onClick<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">play<\/span><span class=\"p\">())<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">borderRadius<\/span><span class=\"p\">(<\/span><span class=\"mi\">24<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">shadow<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">Gray<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">offsetX<\/span><span class=\"p\">:<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">offsetY<\/span><span class=\"p\">:<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">radius<\/span><span class=\"p\">:<\/span> <span class=\"mi\">15<\/span>\n      <span class=\"p\">})<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"mi\">48<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">aspectRatio<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">justifyContent<\/span><span class=\"p\">(<\/span><span class=\"nx\">FlexAlign<\/span><span class=\"p\">.<\/span><span class=\"nx\">Center<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">margin<\/span><span class=\"p\">({<\/span> <span class=\"na\">right<\/span><span class=\"p\">:<\/span> <span class=\"mi\">50<\/span><span class=\"p\">,<\/span> <span class=\"na\">bottom<\/span><span class=\"p\">:<\/span> <span class=\"mi\">50<\/span> <span class=\"p\">})<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">height<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<p>\u062a\u0648\u0636\u06cc\u062d:<\/p>\n<ul>\n<li>\n<code>text<\/code>  \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u062a\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u062e\u0634 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<code>ttsEngine<\/code>  \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0627\u0632 \u0645\u0648\u062a\u0648\u0631 \u0645\u062a\u0646 \u0628\u0647 \u06af\u0641\u062a\u0627\u0631 \u0627\u0633\u062a.<\/li>\n<li>\n<code>isPlaying<\/code>  \u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u0635\u062f\u0627 \u067e\u062e\u0634 \u0645\u06cc \u0634\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\u062f\u0631 <code>initTextToSpeechEngine<\/code> \u0627\u0632 \u0631\u0648\u0634 \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0645\u0648\u062a\u0648\u0631 \u0645\u062a\u0646 \u0628\u0647 \u06af\u0641\u062a\u0627\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\u062f\u0631 <code>aboutToAppear<\/code> \u0631\u0648\u0634 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0645\u0648\u062a\u0648\u0631 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f \u060c \u0631\u0648\u0634 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\u062f\u0631 <code>aboutToDisappear<\/code> \u0631\u0648\u0634 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u062f\u0631 \u062d\u0627\u0644 \u0646\u0627\u067e\u062f\u06cc\u062f \u0634\u062f\u0646 \u0628\u0631\u0627\u06cc \u0645\u062a\u0648\u0642\u0641 \u06a9\u0631\u062f\u0646 \u0648 \u062e\u0627\u0645\u0648\u0634 \u06a9\u0631\u062f\u0646 \u0645\u0648\u062a\u0648\u0631 \u0627\u0633\u062a \u060c \u0631\u0648\u0634 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\u062f\u0631 <code>play<\/code> \u0627\u0632 \u0631\u0648\u0634 \u0628\u0631\u0627\u06cc \u067e\u062e\u0634 \u0635\u062f\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06af\u0631 \u0645\u0648\u062a\u0648\u0631 \u0634\u0644\u0648\u063a \u0628\u0627\u0634\u062f \u060c \u067e\u06cc\u0627\u0645 \u0633\u0631\u06cc\u0639 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<li>\u062f\u0631 <code>build<\/code> \u0631\u0648\u0634 \u0631\u0627\u0628\u0637 \u0645\u0624\u0644\u0641\u0647 \u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0644\u06cc\u0633\u062a\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0645\u062a\u0646 \u0648 \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u067e\u062e\u0634 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AE%D9%84%D8%A7%D8%B5%D9%87\"><\/span>\n<p>  \u062e\u0644\u0627\u0635\u0647:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%DA%A9%D8%A7%D8%AA_%DA%A9%D9%84%DB%8C%D8%AF%DB%8C\"><\/span>\n<p>  \u0646\u06a9\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u0627\u0632 <code>textToSpeech<\/code> \u0645\u0627\u0698\u0648\u0644 \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u062a\u0646 \u0628\u0647 \u06af\u0641\u062a\u0627\u0631.<\/li>\n<li>\u0645\u0648\u062a\u0648\u0631 \u0631\u0627 \u062f\u0631 \u0631\u0648\u0634\u0647\u0627\u06cc \u0686\u0631\u062e\u0647 \u0639\u0645\u0631 \u0645\u0624\u0644\u0641\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0631\u062f\u0647 \u0648 \u062e\u0627\u0645\u0648\u0634 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0646\u0645\u0627\u06cc\u0634\u06af\u0631 \u062f\u06a9\u0645\u0647 \u067e\u062e\u0634 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f <code>isPlaying<\/code> \u062f\u0648\u0644\u062a<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D9%85%D8%B2_%DA%A9%D8%A7%D9%85%D9%84\"><\/span>\n<p>  \u0631\u0645\u0632 \u06a9\u0627\u0645\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">textToSpeech<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@kit.CoreSpeechKit<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">promptAction<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@kit.ArkUI<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">Entry<\/span>\n<span class=\"p\">@<\/span><span class=\"nd\">ComponentV2<\/span>\n<span class=\"nx\">struct<\/span> <span class=\"nx\">CoreSpeechKit<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">text<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n      In March at 45 degrees north latitude, time ties a gentle knot here. The morning mist by the Songhua River wraps fine snow, carving each branch into transparent glass. Ice crystals stack on the branches to form magnolias with a thousand petals. What rustles down when the wind passes through the branches is not snowflakes, but clearly the fragments of stars falling into the world.\n      At this time, the apricot blossoms in Jiangnan are brewing honey against the warm wind. The pink clouds of flower shadows spread over the white walls and black tiles, and even the air is permeated with a slightly intoxicating sweetness. The colorist of the seasons quietly divides the palette in half - the north is still persistently continuing the end of winter, using icicles as a pen to outline frost flowers on the window panes; the south is already eager to open the first page of spring, letting the swallows fly over the ink - painted alleys with the willow color.\n      This temperature difference of three thousand miles weaves two silk brocades at both ends of the twilight line: the north is a plain brocade embroidered with silver threads, wrapped with unspoken whispers in the cold; the south is a soft silk dyed by silk - reeling women, rippling with the newborn whispers in the warmth. When the rime in Harbin melts the first drop of brilliance in the morning sun, the magnolias in Hangzhou just shake off the third piece of moonlight on their shoulders. It turns out that spring is stepping on the latitude and longitude lines, composing the most moving polyphony between the harshness and the warmth in the world.\n  `<\/span>\n  <span class=\"nx\">ttsEngine<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">textToSpeech<\/span><span class=\"p\">.<\/span><span class=\"nx\">TextToSpeechEngine<\/span>\n\n  <span class=\"p\">@<\/span><span class=\"nd\">Local<\/span> <span class=\"nx\">isPlaying<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span>\n\n  <span class=\"k\">async<\/span> <span class=\"nf\">initTextToSpeechEngine<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nf\">canIUse<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">SystemCapability.AI.TextToSpeech<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">params<\/span><span class=\"p\">:<\/span> <span class=\"nx\">textToSpeech<\/span><span class=\"p\">.<\/span><span class=\"nx\">CreateEngineParams<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">language<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">zh-CN<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">person<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">online<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ttsEngine<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">textToSpeech<\/span><span class=\"p\">.<\/span><span class=\"nf\">createEngine<\/span><span class=\"p\">(<\/span><span class=\"nx\">params<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">aboutToAppear<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">initTextToSpeechEngine<\/span><span class=\"p\">()<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">aboutToDisappear<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nf\">canIUse<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">SystemCapability.AI.TextToSpeech<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ttsEngine<\/span><span class=\"p\">?.<\/span><span class=\"nf\">stop<\/span><span class=\"p\">()<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ttsEngine<\/span><span class=\"p\">?.<\/span><span class=\"nf\">shutdown<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">play<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nf\">canIUse<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">SystemCapability.AI.TextToSpeech<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ttsEngine<\/span><span class=\"p\">?.<\/span><span class=\"nf\">isBusy<\/span><span class=\"p\">())<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">promptAction<\/span><span class=\"p\">.<\/span><span class=\"nf\">showToast<\/span><span class=\"p\">({<\/span> <span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Playing...<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">params<\/span><span class=\"p\">:<\/span> <span class=\"nx\">textToSpeech<\/span><span class=\"p\">.<\/span><span class=\"nx\">SpeakParams<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">requestId<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">10000<\/span><span class=\"dl\">'<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ttsEngine<\/span><span class=\"p\">?.<\/span><span class=\"nf\">speak<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">,<\/span> <span class=\"nx\">params<\/span><span class=\"p\">)<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">isPlaying<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">build<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nc\">Stack<\/span><span class=\"p\">({<\/span> <span class=\"na\">alignContent<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Alignment<\/span><span class=\"p\">.<\/span><span class=\"nx\">BottomEnd<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nc\">List<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nc\">ListItem<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nc\">Text<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">lineHeight<\/span><span class=\"p\">(<\/span><span class=\"mi\">32<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">padding<\/span><span class=\"p\">({<\/span> <span class=\"na\">left<\/span><span class=\"p\">:<\/span> <span class=\"mi\">15<\/span><span class=\"p\">,<\/span> <span class=\"na\">right<\/span><span class=\"p\">:<\/span> <span class=\"mi\">15<\/span> <span class=\"p\">})<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">height<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n\n      <span class=\"nc\">Row<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nc\">Image<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">isPlaying<\/span> <span class=\"p\">?<\/span> <span class=\"nf\">$r<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">sys.media.AI_playing<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"nf\">$r<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">sys.media.AI_play<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span>\n          <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"mi\">24<\/span><span class=\"p\">)<\/span>\n          <span class=\"p\">.<\/span><span class=\"nf\">onClick<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">play<\/span><span class=\"p\">())<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">borderRadius<\/span><span class=\"p\">(<\/span><span class=\"mi\">24<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">shadow<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">Gray<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">offsetX<\/span><span class=\"p\">:<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">offsetY<\/span><span class=\"p\">:<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">radius<\/span><span class=\"p\">:<\/span> <span class=\"mi\">15<\/span>\n      <span class=\"p\">})<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"mi\">48<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">aspectRatio<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">justifyContent<\/span><span class=\"p\">(<\/span><span class=\"nx\">FlexAlign<\/span><span class=\"p\">.<\/span><span class=\"nx\">Center<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">margin<\/span><span class=\"p\">({<\/span> <span class=\"na\">right<\/span><span class=\"p\">:<\/span> <span class=\"mi\">50<\/span><span class=\"p\">,<\/span> <span class=\"na\">bottom<\/span><span class=\"p\">:<\/span> <span class=\"mi\">50<\/span> <span class=\"p\">})<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">height<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0634\u0631\u062d \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06cc\u0646 \u06cc\u06a9 \u0645\u0648\u0631\u062f \u0645\u062a\u0646 \u0628\u0647 \u06af\u0641\u062a\u0627\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062e\u062f\u0645\u0627\u062a \u0635\u0648\u062a\u06cc \u0627\u0633\u0627\u0633\u06cc AI \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0645\u0631\u0627\u062d\u0644 \u0627\u062c\u0631\u0627\u06cc: 1. \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 textToSpeech \u0648\u062a promptAction \u0645\u0627\u0698\u0648\u0644 \u0647\u0627 \u060c \u06a9\u0647 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0628\u0631\u0627\u06cc \u0645\u062a\u0646 \u0628\u0647 \u06af\u0641\u062a\u0627\u0631 \u0648 \u0646\u0645\u0627\u06cc\u0634 \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u0633\u0631\u06cc\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f. import { textToSpeech } &hellip;<\/p>\n","protected":false},"author":2,"featured_media":111196,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0393dv990kvwipti78us.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-111195","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/111195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=111195"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/111195\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/111196"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=111195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=111195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=111195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}