feat: speaker

build-profile.json5

@@ -54,23 +54,23 @@
     },
     {
       "name": "quickstart",
-      "srcPath": "./features/quickstart",
+      "srcPath": "./features/quickstart"
     },
     {
       "name": "map",
-      "srcPath": "./features/map",
+      "srcPath": "./features/map"
     },
     {
       "name": "learning",
-      "srcPath": "./features/learning",
+      "srcPath": "./features/learning"
     },
     {
       "name": "utils",
-      "srcPath": "./commans/utils",
+      "srcPath": "./commons/utils"
     },
     {
       "name": "uicomponents",
-      "srcPath": "./commans/uicomponents",
+      "srcPath": "./commons/uicomponents"
     }
   ]
 }

commans/utils/src/main/ets/utils/Speaker.ets

@@ -10,6 +10,16 @@ export class Speaker {
     extraParams: { "style": 'interaction-broadcast', "locate": 'CN', "name": 'EngineName' }
   };
   speakListener?: textToSpeech.SpeakListener;
+  extraParam: Record<string, Object> = {
+    "queueMode": 0,
+    "speed": 1,
+    "volume": 2,
+    "pitch": 1,
+    "languageContext": 'zh-CN',
+    "audioType": "pcm",
+    "soundChannel": 3,
+    "playType": 1
+  };
 
   constructor() {
     this.initListener();
@@ -55,4 +65,18 @@ export class Speaker {
       let code = (error as BusinessError).code
     }
   }
+
+  startSpeak(content: string) {
+    let speakParams: textToSpeech.SpeakParams = {
+      requestId: Date.now().toString(),
+      extraParams: this.extraParam
+    };
+    this.ttsEngin?.speak(content, speakParams);
+  }
+  stopSpeak() {
+    this.ttsEngin?.stop();
+  }
+  shutDownEngin() {
+    this.ttsEngin?.shutdown();
+  }
 }

features/quickstart/src/main/ets/pages/ArticleDetailPage.ets

@@ -1,14 +1,25 @@
 import { ArticleClass } from '../model/ArticleClass';
 import { webview } from '@kit.ArkWeb';
+import { Speaker } from 'utils';
+import { emitter } from '@kit.BasicServicesKit';
 
 @Preview
 @Component
 export struct ArticleDetailPage {
   @State articleDetail: ArticleClass | null = null;
   @Consume('articlePathStack') articlePathStack: NavPathStack;
+  @State isClicked: boolean = false;
+  speaker: Speaker = new Speaker();
 
   aboutToAppear(): void {
     this.articleDetail = this.articlePathStack.getParamByName('articleDetail')[0] as ArticleClass;
+    emitter.on("eventId", () => {
+      this.isClicked = false;
+    });
+  }
+
+  aboutToDisappear(): void {
+    this.speaker?.shutdownEngine();
   }
 
   build() {
@@ -35,6 +46,18 @@ export struct ArticleDetailPage {
             }
           }
           .width('80%')
+
+          Image(this.isClicked ? $r('app.media.ic_AI_read_on'))
+            .width(40)
+            .height(40)
+            .onClick(() => {
+              this.isClicked = !this.isClicked;
+              if (this.isClicked === true) {
+                this.speaker.startSpeak(this.articleDetail!.brief);
+              } else {
+                this.speaker.stopSpeak();
+              }
+            })
         }
         .justifyContent(FlexAlign.SpaceBetween)
         .width('100%')