diff --git a/scenario/MusicPlayerOnline/AppScope/app.json5 b/scenario/MusicPlayerOnline/AppScope/app.json5
index 9f09d6f242a9379b4f296ab12716228240d489a0..9a53154cf5e1c745211efb2a3aa9064ff55761d8 100644
--- a/scenario/MusicPlayerOnline/AppScope/app.json5
+++ b/scenario/MusicPlayerOnline/AppScope/app.json5
@@ -2,8 +2,8 @@
   "app": {
     "bundleName": "com.example.musicPlayerOnline",
     "vendor": "example",
-    "versionCode": 1000000,
-    "versionName": "1.0.0",
+    "versionCode": 1000001,
+    "versionName": "1.0.1",
     "icon": "$media:app_icon",
     "label": "$string:app_name"
   }
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/constants/AppConstants.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/constants/AppConstants.ets
index 44d63da51e6dad6ed0fd29ef498c47e9c59a15c6..29ed141e64136daa8268f2c3af1503e7d2b97a21 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/constants/AppConstants.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/constants/AppConstants.ets
@@ -102,8 +102,8 @@ export default class AppConstants {
   /**
    * 详情页播放状态更新消息
    */
-  static readonly DETAIL_UPDATE_TIME = 'DETAIL_UPDATE_TIME';
   static readonly DETAIL_UPDATE_LRC = 'DETAIL_UPDATE_LRC';
+  static readonly DETAIL_UPDATE_LRC_INDEX = 'DETAIL_UPDATE_LRC_INDEX';
   static readonly DETAIL_UPDATE_STATE = 'DETAIL_UPDATE_STATE';
   static readonly DETAIL_UPDATE_FAVOR_AND_QUALITY = 'DETAIL_UPDATE_FAVOR_AND_QUALITY';
   /**
@@ -181,7 +181,21 @@ export default class AppConstants {
 
   static readonly PLAYLIST_RECORD = 'PLAYLIST_RECORD';
   static readonly PLAYLIST_RECORD_INDEX = 'PLAYLIST_RECORD_INDEX';
+  static readonly CARD_FORM_ID = 'CARD_FORM_ID';
 
+  static readonly HIGH_Q = '320000';
+  static readonly HIGH_DES = '高品质';
+  static readonly FLAC = '.flac';
+  static readonly FLAC_DES = '无损';
+  static readonly QUALITY_DEFAULT = '';
+
+  static readonly CARD_CALL_METHOD_PLAY = 'play';
+  static readonly CARD_CALL_METHOD_NEXT = 'next';
+  static readonly CARD_CALL_METHOD_PREV = 'prev';
+  static readonly CARD_CALL_METHOD_PAUSE = 'pause';
+  static readonly CARD_CALL_METHOD_SET_FAVOR = 'setFavor';
+  static readonly CARD_CALL_METHOD_SET_MODE = 'setMode';
+  static readonly CARD_CALL_METHOD_FORM_ID = 'formId';
   //点击效果
   static readonly CLICK_EFFECT: ClickEffect = {
     level: ClickEffectLevel.MIDDLE, scale: 0.8
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/entryability/EntryAbility.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/entryability/EntryAbility.ets
index 0fe7f642283cae95ed49690dc6f2c08c47d6ace3..9860be4d93229e8a8f8132f129abacbb68d8184f 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/entryability/EntryAbility.ets
@@ -14,13 +14,15 @@
  */
 
 import AbilityConstant from '@ohos.app.ability.AbilityConstant';
-import hilog from '@ohos.hilog';
 import UIAbility from '@ohos.app.ability.UIAbility';
 import Want from '@ohos.app.ability.Want';
 import window from '@ohos.window';
+import {formInfo } from '@kit.FormKit';
 import PlayerManager from '../manager/PlayerManager';
 import rpc from '@ohos.rpc';
 import HttpManager from '../manager/HttpManager';
+import Logger from '../utils/Logger';
+import AppConstants from '../constants/AppConstants';
 
 const TAG: string = 'EntryAbility';
 
@@ -30,56 +32,65 @@ export default class EntryAbility extends UIAbility {
     let aPlayerManager: PlayerManager = new PlayerManager();
     AppStorage.setOrCreate('PlayerManager', aPlayerManager);
     try {
-      this.callee.on('play', (data: rpc.MessageSequence) => {
+      this.callee.on(AppConstants.CARD_CALL_METHOD_PLAY, (data: rpc.MessageSequence) => {
         aPlayerManager.resume();
         return null;
       });
-      this.callee.on('pause', (data: rpc.MessageSequence) => {
+      this.callee.on(AppConstants.CARD_CALL_METHOD_PAUSE, (data: rpc.MessageSequence) => {
         aPlayerManager.pause();
         return null;
       });
-      this.callee.on('prev', (data: rpc.MessageSequence) => {
+      this.callee.on(AppConstants.CARD_CALL_METHOD_PREV, (data: rpc.MessageSequence) => {
         aPlayerManager.previous();
         return null;
       });
-      this.callee.on('next', (data: rpc.MessageSequence) => {
+      this.callee.on(AppConstants.CARD_CALL_METHOD_NEXT, (data: rpc.MessageSequence) => {
         aPlayerManager.next();
         return null;
       });
-      this.callee.on('playMode', (data: rpc.MessageSequence) => {
+      this.callee.on(AppConstants.CARD_CALL_METHOD_SET_MODE, (data: rpc.MessageSequence) => {
         aPlayerManager.setPlayMode();
         return null;
       });
-      this.callee.on('setFavor', (data: rpc.MessageSequence) => {
+      this.callee.on(AppConstants.CARD_CALL_METHOD_SET_FAVOR, (data: rpc.MessageSequence) => {
         HttpManager.getInstance().set_favourite();
         return null;
       });
-      this.callee.on('formId', (data: rpc.MessageSequence) => {
+      this.callee.on(AppConstants.CARD_CALL_METHOD_FORM_ID, (data: rpc.MessageSequence) => {
         let params: Record<string, string> = JSON.parse(data.readString());
         if (params.formId !== undefined) {
-          console.info(TAG, 'params.formId:' + params.formId);
+          Logger.info(TAG, 'params.formId:' + params.formId);
           aPlayerManager.setFormId(params.formId);
         }
         return null;
       });
     } catch (error) {
-      console.error('Failed to register callee on. Cause:' + JSON.stringify(error));
+      Logger.error(TAG, 'Failed to register callee on. Cause:' + JSON.stringify(error));
     }
-    console.info(TAG, 'Ability onCreate');
+    Logger.info(TAG, 'Ability onCreate');
   }
 
   onWindowStageCreate(windowStage: window.WindowStage): void {
     // Main window is created, set main page for this ability
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+    Logger.info(TAG, 'Ability onWindowStageCreate');
     windowStage.loadContent('pages/Index', (err) => {
       if (err.code) {
-        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
+        Logger.error(TAG, 'Failed to load the content. Cause: ' + JSON.stringify(err) ?? '');
         return;
       }
-      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
+      Logger.info(TAG, 'Succeeded in loading the content.');
     });
   }
 
+  onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
+    Logger.info(TAG, 'onNewWant Want:'+JSON.stringify(want));
+    if (want.parameters && want.parameters[formInfo.FormParam.IDENTITY_KEY] !== undefined) {
+      let curFormId = want.parameters[formInfo.FormParam.IDENTITY_KEY].toString();
+      let message: string = (JSON.parse(want.parameters?.params as string))?.method;
+      Logger.info(TAG, `onNewWant curFormId:${curFormId} ,message:${message}.`);
+    }
+  }
+
   onDestroy(): void {
     try {
       this.callee.off('play');
@@ -89,22 +100,22 @@ export default class EntryAbility extends UIAbility {
       this.callee.off('formId');
       this.callee.off('playMode');
     } catch (error) {
-      console.error('Failed to register callee off. Cause:' + JSON.stringify(error));
+      Logger.error(TAG, 'Failed to register callee off. Cause:' + JSON.stringify(error));
     }
   }
 
   onWindowStageDestroy(): void {
     // Main window is destroyed, release UI related resources
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
+    Logger.info(TAG, 'Ability onWindowStageDestroy');
   }
 
   onForeground(): void {
     // Ability has brought to foreground
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
+    Logger.info(TAG, 'Ability onForeground');
   }
 
   onBackground(): void {
     // Ability has back to background
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
+    Logger.info(TAG, 'Ability onBackground');
   }
 }
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/entryformability/EntryFormAbility.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/entryformability/EntryFormAbility.ets
index 14f20a504136a5928c37ae96ced4fa68e047312f..133756684adc6d400ddf25f661f14d1c6b0936b3 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/entryformability/EntryFormAbility.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/entryformability/EntryFormAbility.ets
@@ -15,17 +15,17 @@
 
 import { formBindingData, FormExtensionAbility, formInfo } from '@kit.FormKit';
 import { Want } from '@kit.AbilityKit';
-import Base from '@ohos.base';
+import { fileIo } from '@kit.CoreFileKit';
 import formProvider from '@ohos.app.form.formProvider';
-import type fileFs from '@ohos.file.fs';
-import fs from '@ohos.file.fs';
+import { BusinessError } from '@kit.BasicServicesKit';
 import http from '@ohos.net.http';
+import Logger from '../utils/Logger';
 
 const TAG: string = 'EntryFormAbility';
 
 export default class EntryFormAbility extends FormExtensionAbility {
-
   onAddForm(want: Want) {
+
     // Called to return a FormBindingData object.
     class DataObj1 {
       formId: string = '';
@@ -36,7 +36,7 @@ export default class EntryFormAbility extends FormExtensionAbility {
       let formId = want.parameters['ohos.extra.param.key.form_identity'].toString();
       dataObj1.formId = formId;
     }
-    console.info("PlayerManager EntryFormAbility formId：" + dataObj1.formId);
+    Logger.info(TAG, "EntryFormAbility formId：" + dataObj1.formId);
     return formBindingData.createFormBindingData(dataObj1);
   }
 
@@ -53,47 +53,50 @@ export default class EntryFormAbility extends FormExtensionAbility {
     // 注意：FormExtensionAbility在触发生命周期回调时被拉起，仅能在后台存在5秒
     // 建议下载能快速下载完成的小文件，如在5秒内未下载完成，则此次网络图片无法刷新至卡片页面上
     let params: Record<string, string> = JSON.parse(message)
-    console.info(TAG, "url is:" + params.info);
+    Logger.info(TAG, "url is:" + params.info);
     let tempDir = this.context.getApplicationContext().tempDir;
     let fileName = 'file' + Date.now();
     let tmpFile = tempDir + '/' + fileName;
+    let imgMap: Record<string, number> = {};
+
+    class FormDataClass {
+      // 卡片需要显示图片场景, 必须和下列字段formImages 中的key fileName 相同。
+      imgName: string = fileName;
+      // 卡片需要显示图片场景, 必填字段(formImages 不可缺省或改名), fileName 对应 fd
+      formImages: Record<string, number> = imgMap;
+    }
 
     let httpRequest = http.createHttp()
-    httpRequest.request(params.info, (err, data) => {
+    httpRequest.request(params.info, async (err, data) => {
       if (!err && data.responseCode == http.ResponseCode.OK) {
-        let imgFile = fs.openSync(tmpFile, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
-        fs.write(imgFile.fd, data.result as ArrayBuffer).then((writeLen: number) => {
-          console.info(TAG, "write data to file succeed and size is:" + writeLen);
-        }).catch((err: Base.BusinessError) => {
-          console.error(TAG, "write data to file failed with error message: " + err.message + ", error code: " + err.code);
-        }).finally(() => {
-          fs.closeSync(imgFile);
-        });
-
-        console.info(TAG, 'ArkTSCard download complete: %{public}s', tmpFile);
-        let file: fileFs.File;
-        let fileInfo: Record<string, string | number> = {};
         try {
-          file = fs.openSync(tmpFile);
-          fileInfo[fileName] = file.fd;
+          let imgFile = fileIo.openSync(tmpFile, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
+          imgMap[fileName] = imgFile.fd;
+          try {
+            let writeLen: number = await fileIo.write(imgFile.fd, data.result as ArrayBuffer);
+            Logger.info(TAG, "write data to file succeed and size is:" + writeLen);
+            Logger.info(TAG, 'ArkTSCard download complete:' + tmpFile);
+            try {
+              let formData = new FormDataClass();
+              let formInfo = formBindingData.createFormBindingData(formData);
+              await formProvider.updateForm(formId, formInfo);
+              Logger.info(TAG, 'FormAbility updateForm success.');
+            } catch (error) {
+              Logger.error(TAG, `FormAbility updateForm failed: ${JSON.stringify(error)}`);
+            }
+          } catch (err) {
+            Logger.error(TAG,
+              "write data to file failed with error message: " + err.message + ", error code: " + err.code);
+          } finally {
+            fileIo.closeSync(imgFile);
+          }
+          ;
         } catch (e) {
-          console.error(TAG, `openSync failed: ${JSON.stringify(e as Base.BusinessError)}`);
-        }
-
-        class FormDataClass {
-          imgName: string = fileName;
-          formImages: object = fileInfo;
+          Logger.error(TAG, `openSync failed: ${JSON.stringify(e as BusinessError)}`);
         }
 
-        let formData = new FormDataClass();
-        let formInfo = formBindingData.createFormBindingData(formData);
-        formProvider.updateForm(formId, formInfo).then(() => {
-          console.info(TAG, '%{public}s', 'FormAbility updateForm success.');
-        }).catch((error: Base.BusinessError) => {
-          console.error(TAG, `FormAbility updateForm failed: ${JSON.stringify(error)}`);
-        });
       } else {
-        console.error(TAG, `ArkTSCard download task failed. Cause: ${JSON.stringify(err)}`);
+        Logger.error(TAG, `ArkTSCard download task failed. Cause: ${JSON.stringify(err)}`);
       }
       httpRequest.destroy();
     })
@@ -107,5 +110,4 @@ export default class EntryFormAbility extends FormExtensionAbility {
     // Called to return a {@link FormState} object.
     return formInfo.FormState.READY;
   }
-
 };
\ No newline at end of file
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/manager/HttpManager.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/manager/HttpManager.ets
index 96b12bb341da3021a5831f387d19c790f2f22a39..9331bc67569a7738578446f224aaa1b4e2d16e79 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/manager/HttpManager.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/manager/HttpManager.ets
@@ -20,9 +20,11 @@ import prompt from '@ohos.promptAction';
 import AudioData from '../model/AudioData';
 import PlayListData from '../model/PlayListData';
 import PlayListGroupData from '../model/PlayListGroupData';
+import Logger from '../utils/Logger';
 
 // 单例对象 HttpManager
 export default class HttpManager {
+  private tag = 'HttpManager';
   private static instance: HttpManager;
   private PlayerManager: PlayerManager = AppStorage.get('PlayerManager') as PlayerManager;
   private httpRequest = http.createHttp();
@@ -59,7 +61,7 @@ export default class HttpManager {
       this.httpRequest.request(AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.CSRF_URL,
         (err: Error, data: http.HttpResponse) => {
           if (!err) {
-            console.info('HttpResponse Result:' + data.result);
+            Logger.info(this.tag, 'HttpResponse Result:' + data.result);
             try {
               const jsonObject: object = JSON.parse(data.result as string);
               this.csrfToken = jsonObject['csrf_token'];
@@ -75,7 +77,7 @@ export default class HttpManager {
                 },
                 (err: Error, data: http.HttpResponse) => {
                   if (!err) {
-                    console.info('HttpResponse Result:' + data.result);
+                    Logger.info(this.tag, 'HttpResponse Result:' + data.result);
                     if ((data.result as string).indexOf(AppConstants.REGISTER_FAILED) !== -1) {
                       prompt.showToast({
                         message: AppConstants.REGISTER_INFO_FAILED + data.result
@@ -87,27 +89,27 @@ export default class HttpManager {
                     })
                     this.login(userName.trim(), pwd.trim());
                   } else {
-                    console.info('HttpResponse error:' + JSON.stringify(err));
+                    Logger.info(this.tag, 'HttpResponse error:' + JSON.stringify(err));
                     prompt.showToast({
                       message: AppConstants.REGISTER_INFO_FAILED
                     })
                   }
                 });
             } catch (err) {
-              console.info('HttpRequest error:' + JSON.stringify(err));
+              Logger.info(this.tag, 'HttpRequest error:' + JSON.stringify(err));
               prompt.showToast({
                 message: AppConstants.REGISTER_INFO_FAILED
               })
             }
           } else {
-            console.info('HttpResponse error:' + JSON.stringify(err));
+            Logger.info(this.tag, 'HttpResponse error:' + JSON.stringify(err));
             prompt.showToast({
               message: AppConstants.REGISTER_INFO_FAILED
             })
           }
         });
     } catch (err) {
-      console.info('HttpRequest error:' + JSON.stringify(err));
+      Logger.info(this.tag, 'HttpRequest error:' + JSON.stringify(err));
       prompt.showToast({
         message: AppConstants.REGISTER_INFO_FAILED
       })
@@ -120,7 +122,7 @@ export default class HttpManager {
       this.httpRequest.request(AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.CSRF_URL,
         (err: Error, data: http.HttpResponse) => {
           if (!err) {
-            console.info('HttpResponse Result:' + data.result);
+            Logger.info(this.tag, 'HttpResponse Result:' + data.result);
             try {
               const jsonObject: object = JSON.parse(data.result as string);
               this.csrfToken = jsonObject['csrf_token'];
@@ -136,9 +138,9 @@ export default class HttpManager {
                 },
                 (err: Error, data: http.HttpResponse) => {
                   if (!err) {
-                    console.info('HttpResponse Result:' + data.result);
+                    Logger.info(this.tag, 'HttpResponse Result:' + data.result);
                     if (200 === data.responseCode) {
-                      console.info('HttpResponse code:' +
+                      Logger.info(this.tag, 'HttpResponse code:' +
                       (data.result as string).indexOf(AppConstants.LOGIN_FAILED));
                       if ((data.result as string).indexOf(AppConstants.LOGIN_FAILED) !== -1) {
                         this.loginFailed();
@@ -163,7 +165,7 @@ export default class HttpManager {
                       this.getCustomListFromServer();
                     }
                   } else {
-                    console.info('HttpResponse error:' + JSON.stringify(err));
+                    Logger.info(this.tag, 'HttpResponse error:' + JSON.stringify(err));
                     prompt.showToast({
                       message: JSON.stringify(err)
                     })
@@ -171,11 +173,11 @@ export default class HttpManager {
                   }
                 });
             } catch (error) {
-              console.error("JSON :", error.message);
+              Logger.error(this.tag, "JSON :", error.message);
               this.loginFailed();
             }
           } else {
-            console.info('HttpResponse error:' + JSON.stringify(err));
+            Logger.info(this.tag, 'HttpResponse error:' + JSON.stringify(err));
             prompt.showToast({
               message: JSON.stringify(err)
             })
@@ -183,7 +185,7 @@ export default class HttpManager {
           }
         });
     } catch (err) {
-      console.info('HttpRequest error:' + JSON.stringify(err));
+      Logger.info(this.tag, 'HttpRequest error:' + JSON.stringify(err));
       this.loginFailed();
     }
   }
@@ -217,24 +219,24 @@ export default class HttpManager {
         },
         (err: Error, data: http.HttpResponse) => {
           if (!err) {
-            console.info('HttpResponse record_recent Result:' + data.result);
+            Logger.info(this.tag, 'HttpResponse record_recent Result:' + data.result);
             try {
               const jsonObject: object = JSON.parse(data.result as string);
               this.PlayerManager.setItemQuality(jsonObject['message']);
               emitter.emit(AppConstants.DETAIL_UPDATE_FAVOR_AND_QUALITY, this.emitterOptions);
             } catch (err) {
-              console.info('HttpResponse error:' + JSON.stringify(err));
+              Logger.info(this.tag, 'HttpResponse error:' + JSON.stringify(err));
             }
             this.getRecentListFromServer();
           } else {
-            console.info('HttpResponse error:' + JSON.stringify(err));
+            Logger.info(this.tag, 'HttpResponse error:' + JSON.stringify(err));
             prompt.showToast({
               message: JSON.stringify(err)
             })
           }
         });
     } catch (err) {
-      console.info('HttpRequest error:' + JSON.stringify(err));
+      Logger.info(this.tag, 'HttpRequest error:' + JSON.stringify(err));
     }
   }
 
@@ -257,7 +259,7 @@ export default class HttpManager {
       if (alwaysSet) {
         is_favor = '1';
       }
-      console.info('HttpResponse start:' + AppConstants.SET_FAVOURITE_URL + item.id + '/' + is_favor);
+      Logger.info(this.tag, 'HttpResponse start:' + AppConstants.SET_FAVOURITE_URL + item.id + '/' + is_favor);
       this.httpRequest.request(AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.SET_FAVOURITE_URL +
       item.id + '/' + is_favor,
         {
@@ -268,7 +270,7 @@ export default class HttpManager {
         },
         (err: Error, data: http.HttpResponse) => {
           if (!err) {
-            console.info('HttpResponse Result:' + data.result);
+            Logger.info(this.tag, 'HttpResponse Result:' + data.result);
             try {
               const jsonObject: object = JSON.parse(data.result as string);
               switch (jsonObject["message"]) {
@@ -291,18 +293,18 @@ export default class HttpManager {
               })
               this.getFavorListFromServer();
             } catch (error) {
-              console.error("JSON :", error.message);
+              Logger.error(this.tag, "JSON :", error.message);
               msg = JSON.stringify(error);
             }
           } else {
-            console.info('HttpResponse error:' + JSON.stringify(err));
+            Logger.info(this.tag, 'HttpResponse error:' + JSON.stringify(err));
             prompt.showToast({
               message: JSON.stringify(err)
             })
           }
         });
     } catch (err) {
-      console.info('HttpRequest error:' + JSON.stringify(err));
+      Logger.info(this.tag, 'HttpRequest error:' + JSON.stringify(err));
       msg = JSON.stringify(err);
     }
     if (msg !== '') {
@@ -323,7 +325,7 @@ export default class HttpManager {
     }
     let msg: string = ''
     try {
-      console.info('HttpResponse start:' + AppConstants.ADD_TO_PLAYLIST_URL + song_id + '/' + playlist_name);
+      Logger.info(this.tag, 'HttpResponse start:' + AppConstants.ADD_TO_PLAYLIST_URL + song_id + '/' + playlist_name);
       this.httpRequest.request(AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.ADD_TO_PLAYLIST_URL +
         song_id + '/' + playlist_name,
         {
@@ -334,30 +336,30 @@ export default class HttpManager {
         },
         (err: Error, data: http.HttpResponse) => {
           if (!err) {
-            console.info('HttpResponse Result:' + data.result);
+            Logger.info(this.tag, 'HttpResponse Result:' + data.result);
             try {
               const jsonObject: object = JSON.parse(data.result as string);
-              console.info('HttpResponse msg:' + jsonObject["message"]);
+              Logger.info(this.tag, 'HttpResponse msg:' + jsonObject["message"]);
               prompt.showToast({
                 message: jsonObject["message"]
               })
               this.getCustomListFromServer();
             } catch (error) {
-              console.error("JSON :", error.message);
+              Logger.error(this.tag, "JSON :", error.message);
               msg = JSON.stringify(error);
             }
           } else {
-            console.info('HttpResponse error:' + JSON.stringify(err));
+            Logger.info(this.tag, 'HttpResponse error:' + JSON.stringify(err));
             prompt.showToast({
               message: JSON.stringify(err)
             })
           }
         });
     } catch (err) {
-      console.info('HttpRequest error:' + JSON.stringify(err));
+      Logger.info(this.tag, 'HttpRequest error:' + JSON.stringify(err));
       msg = JSON.stringify(err);
     }
-    console.info('HttpRequest msg:' + msg);
+    Logger.info(this.tag, 'HttpRequest msg:' + msg);
     if (msg !== '') {
       prompt.showToast({
         message: msg
@@ -376,7 +378,7 @@ export default class HttpManager {
     }
     let msg: string = ''
     try {
-      console.info('HttpResponse start:' + AppConstants.REMOVE_FROM_PLAYLIST_URL + song_id + '/' + playlist_name);
+      Logger.info(this.tag, 'HttpResponse start:' + AppConstants.REMOVE_FROM_PLAYLIST_URL + song_id + '/' + playlist_name);
       this.httpRequest.request(AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.REMOVE_FROM_PLAYLIST_URL +
         song_id + '/' + playlist_name,
         {
@@ -387,30 +389,30 @@ export default class HttpManager {
         },
         (err: Error, data: http.HttpResponse) => {
           if (!err) {
-            console.info('HttpResponse Result:' + data.result);
+            Logger.info(this.tag, 'HttpResponse Result:' + data.result);
             try {
               const jsonObject: object = JSON.parse(data.result as string);
-              console.info('HttpResponse msg:' + jsonObject["message"]);
+              Logger.info(this.tag, 'HttpResponse msg:' + jsonObject["message"]);
               prompt.showToast({
                 message: jsonObject["message"]
               })
               this.getCustomListFromServer();
             } catch (error) {
-              console.error("JSON :", error.message);
+              Logger.error(this.tag, "JSON :", error.message);
               msg = JSON.stringify(error);
             }
           } else {
-            console.info('HttpResponse error:' + JSON.stringify(err));
+            Logger.info(this.tag, 'HttpResponse error:' + JSON.stringify(err));
             prompt.showToast({
               message: JSON.stringify(err)
             })
           }
         });
     } catch (err) {
-      console.info('HttpRequest error:' + JSON.stringify(err));
+      Logger.info(this.tag, 'HttpRequest error:' + JSON.stringify(err));
       msg = JSON.stringify(err);
     }
-    console.info('HttpRequest msg:' + msg);
+    Logger.info(this.tag, 'HttpRequest msg:' + msg);
     if (msg !== '') {
       prompt.showToast({
         message: msg
@@ -430,7 +432,7 @@ export default class HttpManager {
         },
         (err: Error, data: http.HttpResponse) => {
           if (!err) {
-            console.info('HttpResponse getRecommendListFromServer Result:' + data.result);
+            Logger.info(this.tag, 'HttpResponse getRecommendListFromServer Result:' + data.result);
             try {
               let isStart = true;
               const jsonObject: object = JSON.parse(data.result as string);
@@ -464,17 +466,17 @@ export default class HttpManager {
                 isStart = false;
               });
             } catch (error) {
-              console.error("JSON :", error.message);
+              Logger.error(this.tag, "JSON :", error.message);
             }
           } else {
-            console.info('HttpResponse error:' + JSON.stringify(err));
+            Logger.info(this.tag, 'HttpResponse error:' + JSON.stringify(err));
             prompt.showToast({
               message: JSON.stringify(err)
             })
           }
         });
     } catch (err) {
-      console.info('HttpRequest error:' + JSON.stringify(err));
+      Logger.info(this.tag, 'HttpRequest error:' + JSON.stringify(err));
       prompt.showToast({
         message: JSON.stringify(err)
       })
@@ -493,7 +495,7 @@ export default class HttpManager {
         },
         (err: Error, data: http.HttpResponse) => {
           if (!err) {
-            console.info('HttpResponse getFavorListFromServer Result:' + data.result);
+            Logger.info(this.tag, 'HttpResponse getFavorListFromServer Result:' + data.result);
             try {
               let aPlayingList: AudioData[] = Array<AudioData>();
               const jsonObject: object = JSON.parse(data.result as string);
@@ -523,17 +525,17 @@ export default class HttpManager {
               };
               emitter.emit(AppConstants.UPDATE_USER_LIST, this.emitterOptions, eventData);
             } catch (error) {
-              console.error("JSON :", error.message);
+              Logger.error(this.tag, "JSON :", error.message);
             }
           } else {
-            console.info('HttpResponse error:' + JSON.stringify(err));
+            Logger.info(this.tag, 'HttpResponse error:' + JSON.stringify(err));
             prompt.showToast({
               message: JSON.stringify(err)
             })
           }
         });
     } catch (err) {
-      console.info('HttpRequest error:' + JSON.stringify(err));
+      Logger.info(this.tag, 'HttpRequest error:' + JSON.stringify(err));
       prompt.showToast({
         message: JSON.stringify(err)
       })
@@ -552,7 +554,7 @@ export default class HttpManager {
         },
         (err: Error, data: http.HttpResponse) => {
           if (!err) {
-            console.info('HttpResponse getRecentListFromServer Result:' + data.result);
+            Logger.info(this.tag, 'HttpResponse getRecentListFromServer Result:' + data.result);
             try {
               const jsonObject: object = JSON.parse(data.result as string);
               let isStart = true;
@@ -583,17 +585,17 @@ export default class HttpManager {
                 isStart = false;
               });
             } catch (error) {
-              console.error("JSON :", error.message);
+              Logger.error(this.tag, "JSON :", error.message);
             }
           } else {
-            console.info('HttpResponse error:' + JSON.stringify(err));
+            Logger.info(this.tag, 'HttpResponse error:' + JSON.stringify(err));
             prompt.showToast({
               message: JSON.stringify(err)
             })
           }
         });
     } catch (err) {
-      console.info('HttpRequest error:' + JSON.stringify(err));
+      Logger.info(this.tag, 'HttpRequest error:' + JSON.stringify(err));
       prompt.showToast({
         message: JSON.stringify(err)
       })
@@ -612,7 +614,7 @@ export default class HttpManager {
         },
         (err: Error, data: http.HttpResponse) => {
           if (!err) {
-            console.info('HttpResponse getCustomListFromServer Result:' + data.result);
+            Logger.info(this.tag, 'HttpResponse getCustomListFromServer Result:' + data.result);
             try {
               interface PlaylistItem {
                 playlist_name: string;
@@ -636,7 +638,6 @@ export default class HttpManager {
               const keys = Object.keys(groupedByPlaylistName);
               let isStart = true;
               keys.forEach((playlistName) => {
-                console.log(`Playlist: ${playlistName}`);
                 let aPlayingList: AudioData[] = Array<AudioData>();
                 groupedByPlaylistName[playlistName].forEach((song, index) => {
                   aPlayingList.push(new AudioData(song.name, song.singer, song.id, song.album, song.year,
@@ -660,17 +661,17 @@ export default class HttpManager {
               this.getRecentListFromServer();
               this.getFavorListFromServer();
             } catch (error) {
-              console.error("JSON :", error.message);
+              Logger.error(this.tag, "JSON :", error.message);
             }
           } else {
-            console.info('HttpResponse error:' + JSON.stringify(err));
+            Logger.info(this.tag, 'HttpResponse error:' + JSON.stringify(err));
             prompt.showToast({
               message: JSON.stringify(err)
             })
           }
         });
     } catch (err) {
-      console.info('HttpRequest error:' + JSON.stringify(err));
+      Logger.info(this.tag, 'HttpRequest error:' + JSON.stringify(err));
     }
   }
 
@@ -687,7 +688,7 @@ export default class HttpManager {
         },
         (err: Error, data: http.HttpResponse) => {
           if (!err) {
-            console.info('HttpResponse searchSongsFromServer Result:' + data.result);
+            Logger.info(this.tag, 'HttpResponse searchSongsFromServer Result:' + data.result);
             try {
               const jsonObject: object = JSON.parse(data.result as string);
               let isStart = true;
@@ -716,17 +717,17 @@ export default class HttpManager {
                 });
               });
             } catch (error) {
-              console.error("JSON :", error.message);
+              Logger.error(this.tag, "JSON :", error.message);
             }
           } else {
-            console.info('HttpResponse error:' + JSON.stringify(err));
+            Logger.info(this.tag, 'HttpResponse error:' + JSON.stringify(err));
             prompt.showToast({
               message: JSON.stringify(err)
             })
           }
         });
     } catch (err) {
-      console.info('HttpRequest error:' + JSON.stringify(err));
+      Logger.info(this.tag, 'HttpRequest error:' + JSON.stringify(err));
     }
   }
 
@@ -742,24 +743,24 @@ export default class HttpManager {
         },
         (err: Error, data: http.HttpResponse) => {
           if (!err) {
-            console.info('HttpResponse getLrc Result:' + data.result);
+            Logger.info(this.tag, 'HttpResponse getLrc Result:' + data.result);
             try {
               const jsonObject: object = JSON.parse(data.result as string);
               let id: string = jsonObject['id'];
               let lrc: string = jsonObject['lrc'];
               this.PlayerManager.setLrc(id, lrc);
             } catch (error) {
-              console.error("JSON :", error.message);
+              Logger.error(this.tag, "JSON :", error.message);
             }
           } else {
-            console.info('HttpResponse error:' + JSON.stringify(err));
+            Logger.info(this.tag, 'HttpResponse error:' + JSON.stringify(err));
             prompt.showToast({
               message: JSON.stringify(err)
             })
           }
         });
     } catch (err) {
-      console.info('HttpRequest error:' + JSON.stringify(err));
+      Logger.info(this.tag, 'HttpRequest error:' + JSON.stringify(err));
     }
   }
 
@@ -776,7 +777,7 @@ export default class HttpManager {
         },
         (err: Error, data: http.HttpResponse) => {
           if (!err) {
-            console.info('HttpResponse getAllSinger Result:' + data.result);
+            Logger.info(this.tag, 'HttpResponse getAllSinger Result:' + data.result);
             try {
               const jsonObject: object = JSON.parse(data.result as string);
               let playingLists: PlayListData[] = [];
@@ -804,17 +805,17 @@ export default class HttpManager {
               };
               emitter.emit(AppConstants.UPDATE_ALL_SINGER_LIST, this.emitterOptions, eventData);
             } catch (error) {
-              console.error("JSON :", error.message);
+              Logger.error(this.tag, "JSON :", error.message);
             }
           } else {
-            console.info('HttpResponse getAllSinger error:' + JSON.stringify(err));
+            Logger.info(this.tag, 'HttpResponse getAllSinger error:' + JSON.stringify(err));
             prompt.showToast({
               message: JSON.stringify(err)
             })
           }
         });
     } catch (err) {
-      console.info('HttpRequest getAllSinger error:' + JSON.stringify(err));
+      Logger.info(this.tag, 'HttpRequest getAllSinger error:' + JSON.stringify(err));
       prompt.showToast({
         message: JSON.stringify(err)
       })
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/manager/PlayerManager.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/manager/PlayerManager.ets
index 1528dadbc621828e2e9535f7e57150cefb9ec231..d7a393663860c9904bdf46889f4afc4c6c0d2e5b 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/manager/PlayerManager.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/manager/PlayerManager.ets
@@ -33,7 +33,7 @@ import prompt from '@ohos.promptAction';
 
 export default class PlayerManager {
   private tag: string = 'PlayerManager';
-  private formId: string = '1234567890';
+  private formId: string = '';
   private isSeek: boolean = false;
   private avPlayer: media.AVPlayer | undefined = undefined;
   private list: AudioData[] = [];
@@ -47,6 +47,7 @@ export default class PlayerManager {
   private listTitle: string = AppConstants.LIST_SONG_NO_PLAYING;
   private playMode: number = PLAY_MODE.REPEAT;
   private shuffleIndex: number[] = [];
+  private lrcIndex: number = 0
   private emitterOptions: emitter.Options = {
     priority: emitter.EventPriority.HIGH
   };
@@ -96,96 +97,88 @@ export default class PlayerManager {
     this.recordPlayMode();
   }
 
+  initialCardFormId() {
+    if (AppStorage.get(AppConstants.CARD_FORM_ID) !== undefined) {
+      this.formId = AppStorage.get(AppConstants.CARD_FORM_ID) as string;
+    }
+  }
+
   // 注册avplayer回调函数
   setAVPlayerCallback(avPlayer: media.AVPlayer) {
     // seek操作结果回调函数
     avPlayer.on('seekDone', (seekDoneTime: number) => {
-      console.info(`PlayerManager seek succeeded, seek time is ${seekDoneTime}`);
+      Logger.info(this.tag, `PlayerManager seek succeeded, seek time is ${seekDoneTime}`);
     })
     // error回调监听函数,当avPlayer在操作过程中出现错误时调用 reset接口触发重置流程
     avPlayer.on('error', (err: BusinessError) => {
-      console.error(`Invoke PlayerManager failed, code is ${err.code}, message is ${err.message}`);
+      Logger.error(this.tag, `Invoke PlayerManager failed, code is ${err.code}, message is ${err.message}`);
       avPlayer.reset(); // 调用reset重置资源，触发idle状态
     })
     // 状态机变化回调函数
     avPlayer.on('timeUpdate', (time: number) => {
-      //console.info('AVPlayer state timeUpdate：'+time);
-      this.currentTime = time;
-      let eventData: emitter.EventData = {
-        data: {
-          "currentTime": this.currentTime,
-          "currentDuration": this.currentDuration
-        }
-      };
-      emitter.emit(AppConstants.MAIN_UPDATE_TIME, this.emitterOptions, eventData);
-      emitter.emit(AppConstants.DETAIL_UPDATE_TIME, this.emitterOptions, eventData);
+      this.updatePlayerTime(time);
+      this.updateLrcIndex();
+      this.updateCardProgress();
     })
     avPlayer.on('durationUpdate', (time: number) => {
-      console.info('PlayerManager state durationUpdate：' + time);
+      Logger.info(this.tag, 'PlayerManager state durationUpdate：' + time);
       this.currentDuration = time;
     })
     avPlayer.on('seekDone', (seekDoneTime: number) => {
-      console.info('seekDone success,and seek time is:' + seekDoneTime)
+      Logger.info(this.tag, 'seekDone success,and seek time is:' + seekDoneTime)
     })
     avPlayer.on('stateChange', async (state: string, reason: media.StateChangeReason) => {
-      this.state = state;
-      let eventData: emitter.EventData = {
-        data: {
-          "state": state,
-        }
-      };
-      emitter.emit(AppConstants.MAIN_UPDATE_STATE, this.emitterOptions, eventData);
-      emitter.emit(AppConstants.DETAIL_UPDATE_STATE, this.emitterOptions, eventData);
-      emitter.emit(AppConstants.PLAYLIST_UPDATE_STATE, this.emitterOptions, eventData);
-      this.updateCard();
       switch (state) {
         case AppConstants.PLAYER_STATE_IDLE: // 成功调用reset接口后触发该状态机上报
-          console.info('PlayerManager state idle called.');
+          Logger.info(this.tag, 'PlayerManager state idle called.');
           //avPlayer.release(); // 调用release接口销毁实例对象
           break;
         case AppConstants.PLAYER_STATE_INITIALIZED: // avplayer 设置播放源后触发该状态上报
-          console.info('PlayerManager state initialized called.');
+          Logger.info(this.tag, 'PlayerManager state initialized called.');
           avPlayer.prepare();
           break;
         case AppConstants.PLAYER_STATE_PREPARED: // prepare调用成功后上报该状态机
-          console.info('PlayerManager state prepared called.');
+          Logger.info(this.tag, 'PlayerManager state prepared called.');
           avPlayer.play(); // 调用播放接口开始播放
           break;
         case AppConstants.PLAYER_STATE_PLAYING: // play成功调用后触发该状态机上报
-          console.info('PlayerManager state playing called.');
+          Logger.info(this.tag, 'PlayerManager state playing called.');
           this.list[this.listPosition].isPlaying = true;
           HttpManager.getInstance().record_recent();
           break;
         case AppConstants.PLAYER_STATE_PAUSED: // pause成功调用后触发该状态机上报
-          console.info('PlayerManager state paused called.');
+          Logger.info(this.tag, 'PlayerManager state paused called.');
           break;
         case AppConstants.PLAYER_STATE_COMPLETED: // 播放结束后触发该状态机上报
-          console.info('PlayerManager state completed called.');
+          Logger.info(this.tag, 'PlayerManager state completed called.');
           //avPlayer.stop(); //调用播放结束接口
           this.next();
           break;
         case AppConstants.PLAYER_STATE_STOPPED: // stop接口成功调用后触发该状态机上报
-          console.info('PlayerManager state stopped called.');
+          Logger.info(this.tag, 'PlayerManager state stopped called.');
           //this.stopContinuousTask();
           this.currentTime = 0;
           Logger.info(this.tag, 'Stop:' + this.item.title);
           avPlayer.reset(); // 调用reset接口初始化avplayer状态
           break;
         case AppConstants.PLAYER_STATE_RELEASED:
-          console.info('PlayerManager state released called.');
+          Logger.info(this.tag, 'PlayerManager state released called.');
           break;
         default:
-          console.info('PlayerManager state unknown called.');
+          Logger.info(this.tag, 'PlayerManager state unknown called.');
           if (this.avPlayer !== undefined) {
             try {
               this.avPlayer.release();
             } catch (err) {
-              console.info('PlayerManager state unknown called.' + JSON.stringify(err));
+              Logger.info(this.tag, 'PlayerManager state unknown called.' + JSON.stringify(err));
             }
             this.avPlayer = undefined;
           }
           break;
       }
+      this.updatePlayerState(state);
+      this.updateLrcIndex();
+      this.updateCard();
     })
   }
 
@@ -369,7 +362,7 @@ export default class PlayerManager {
         break;
     }
     this.recordPlayMode();
-    this.updatePlayMode();
+    this.updateCardPlayMode();
     return this.playMode;
   }
 
@@ -379,8 +372,9 @@ export default class PlayerManager {
 
   setFormId(formId: string) {
     this.formId = formId;
+    AppStorage.setOrCreate(AppConstants.CARD_FORM_ID, formId);
     this.updateCard();
-    this.updatePlayMode();
+    this.updateCardPlayMode();
   }
 
   setItemQuality(quality: string) {
@@ -409,6 +403,10 @@ export default class PlayerManager {
     return this.state;
   }
 
+  getLrcIndex(): number {
+    return this.lrcIndex;
+  }
+
   getPlayMode(): number {
     return this.playMode;
   }
@@ -421,7 +419,7 @@ export default class PlayerManager {
     } else {
       await this.avPlayer.reset();
     }
-    console.info('PlayerManager state url：' + url);
+    Logger.info(this.tag, 'PlayerManager state url：' + url);
     this.avPlayer.url = url;
   }
 
@@ -444,6 +442,14 @@ export default class PlayerManager {
     }
   }
 
+  getDurationTime() {
+    return this.currentDuration;
+  }
+
+  getCurrentTime() {
+    return this.currentTime;
+  }
+
   addSongToCurrentList(item: AudioData) {
     if (this.list.indexOf(item) > -1) {
       prompt.showToast({
@@ -465,7 +471,7 @@ export default class PlayerManager {
     if (newPosition !== -1) {
       newShuffleIndex.splice(newPosition + 1, 0, insertIndex);
     } else {
-      console.error("Original index not found in shuffleIndex");
+      Logger.error(this.tag, "Original index not found in shuffleIndex");
     }
     this.shuffleIndex = newShuffleIndex;
     //如果原来没有播放列表，则开始播放
@@ -478,6 +484,47 @@ export default class PlayerManager {
     })
   }
 
+  updateLrcIndex() {
+    let newLrcIndex = CommonUtils.findLrcIndexByTime(this.item.lrc, this.currentTime, this.lrcIndex)
+    if (newLrcIndex != this.lrcIndex && newLrcIndex != -1) {
+      this.lrcIndex = newLrcIndex;
+      let eventData: emitter.EventData = {
+        data: {
+          "newLrcIndex": this.lrcIndex,
+        }
+      };
+      emitter.emit(AppConstants.DETAIL_UPDATE_LRC_INDEX, this.emitterOptions, eventData);
+    }
+  }
+
+  updatePlayerTime(time: number) {
+    this.currentTime = time;
+    let eventData: emitter.EventData = {
+      data: {
+        "currentTime": this.currentTime,
+        "currentDuration": this.currentDuration
+      }
+    };
+    emitter.emit(AppConstants.MAIN_UPDATE_TIME, this.emitterOptions, eventData);
+  }
+
+  updatePlayerState(state: string) {
+    this.state = state;
+    let eventData: emitter.EventData = {
+      data: {
+        "state": this.state,
+      }
+    };
+    emitter.emit(AppConstants.MAIN_UPDATE_STATE, this.emitterOptions, eventData);
+    emitter.emit(AppConstants.DETAIL_UPDATE_STATE, this.emitterOptions, eventData);
+    emitter.emit(AppConstants.PLAYLIST_UPDATE_STATE, this.emitterOptions, eventData);
+    if (this.state !== AppConstants.PLAYER_STATE_PLAYING &&
+      this.state !== AppConstants.PLAYER_STATE_PAUSED) {
+      this.lrcIndex = 0;
+      this.updateLrcIndex();
+    }
+  }
+
   removeSongFromCurrentList(item: AudioData) {
     if (this.item.id == item.id) {
       this.stop();
@@ -537,16 +584,19 @@ export default class PlayerManager {
         try {
           backgroundTaskManager.startBackgroundRunning(AppStorage.get('APPContext') as common.UIAbilityContext,
             backgroundTaskManager.BackgroundMode.AUDIO_PLAYBACK, wantAgentObj).then(() => {
-            console.info("PlayerManager Operation startBackgroundRunning succeeded");
+            Logger.info(this.tag, "PlayerManager Operation startBackgroundRunning succeeded");
           }).catch((error: BusinessError) => {
-            console.error(`PlayerManager Operation startBackgroundRunning failed. code is ${error.code} message is ${error.message}`);
+            Logger.error(this.tag,
+              `PlayerManager Operation startBackgroundRunning failed. code is ${error.code} message is ${error.message}`);
           });
         } catch (error) {
-          console.error(`PlayerManager Operation startBackgroundRunning failed. code is ${(error as BusinessError).code} message is ${(error as BusinessError).message}`);
+          Logger.error(this.tag,
+            `PlayerManager Operation startBackgroundRunning failed. code is ${(error as BusinessError).code} message is ${(error as BusinessError).message}`);
         }
       });
     } catch (error) {
-      console.error(`PlayerManager Operation getWantAgent failed. code is ${(error as BusinessError).code} message is ${(error as BusinessError).message}`);
+      Logger.error(this.tag,
+        `PlayerManager Operation getWantAgent failed. code is ${(error as BusinessError).code} message is ${(error as BusinessError).message}`);
     }
   }
 
@@ -554,12 +604,14 @@ export default class PlayerManager {
   stopContinuousTask(): void {
     try {
       backgroundTaskManager.stopBackgroundRunning(AppStorage.get('APPContext') as common.UIAbilityContext).then(() => {
-        console.info("PlayerManager Operation stopBackgroundRunning succeeded");
+        Logger.info(this.tag, "PlayerManager Operation stopBackgroundRunning succeeded");
       }).catch((error: BusinessError) => {
-        console.error(`PlayerManager Operation stopBackgroundRunning failed. code is ${(error as BusinessError).code} message is ${(error as BusinessError).message}`);
+        Logger.error(this.tag,
+          `PlayerManager Operation stopBackgroundRunning failed. code is ${(error as BusinessError).code} message is ${(error as BusinessError).message}`);
       });
     } catch (error) {
-      console.error(`PlayerManager Operation stopBackgroundRunning failed. code is ${(error as BusinessError).code} message is ${(error as BusinessError).message}`);
+      Logger.error(this.tag,
+        `PlayerManager Operation stopBackgroundRunning failed. code is ${(error as BusinessError).code} message is ${(error as BusinessError).message}`);
     }
   }
 
@@ -574,19 +626,22 @@ export default class PlayerManager {
 
       (AppStorage.get('APPContext') as common.UIAbilityContext).terminateSelf()
         .then(() => {
-          console.info('PlayerManager terminateSelf succeed');
+          Logger.info(this.tag, 'PlayerManager terminateSelf succeed');
         })
         .catch((err: BusinessError) => {
-          console.error(`PlayerManager terminateSelf failed, code is ${err.code}, message is ${err.message}`);
+          Logger.error(this.tag, `PlayerManager terminateSelf failed, code is ${err.code}, message is ${err.message}`);
         });
     } catch (err) {
       let code = (err as BusinessError).code;
       let message = (err as BusinessError).message;
-      console.error(`PlayerManager terminateSelf failed, code is ${code}, message is ${message}`);
+      Logger.error(this.tag, `PlayerManager terminateSelf failed, code is ${code}, message is ${message}`);
     }
   }
 
   updateCard() {
+    if (this.formId === '') {
+      return;
+    }
     let formData: Record<string, AudioData | string | undefined> = {
       'audioItem': this.item,
       'isPlaying': this.state,
@@ -594,21 +649,37 @@ export default class PlayerManager {
     };
     let formMsg: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData);
     formProvider.updateForm(this.formId, formMsg).then(() => {
-      console.info('FormAbility updateForm success.');
     }).catch((error: Base.BusinessError) => {
-      console.info(`Operation updateForm failed. Cause: ${JSON.stringify(error)}`);
+      Logger.info(this.tag, `Operation updateForm failed. Cause: ${JSON.stringify(error)}`);
     })
   }
 
-  updatePlayMode() {
+  updateCardPlayMode() {
+    if (this.formId === '') {
+      return;
+    }
     let formData: Record<string, number> = {
       'playMode': this.playMode,
     };
     let formMsg: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData);
     formProvider.updateForm(this.formId, formMsg).then(() => {
-      console.info('FormAbility updateForm success.');
     }).catch((error: Base.BusinessError) => {
-      console.info(`Operation updateForm failed. Cause: ${JSON.stringify(error)}`);
+      Logger.info(this.tag, `Operation updateCardPlayMode failed. Cause: ${JSON.stringify(error)}`);
+    })
+  }
+
+  updateCardProgress() {
+    if (this.formId === '') {
+      return;
+    }
+    let formData: Record<string, number> = {
+      'currentTime': this.currentTime,
+      'durationTime': this.currentDuration,
+    };
+    let formMsg: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData);
+    formProvider.updateForm(this.formId, formMsg).then(() => {
+    }).catch((error: Base.BusinessError) => {
+      Logger.info(this.tag, `Operation updateCardProgress failed. Cause: ${JSON.stringify(error)}`);
     })
   }
 }
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/pages/Index.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/pages/Index.ets
index 587bd23d752ceb885445bba5ee6602864a8a1933..e8a5672bf2706ee69afb4f2185e6688693918c61 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/pages/Index.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/pages/Index.ets
@@ -31,6 +31,7 @@ import ExplorePlayList from '../view/ExplorePlayList';
 import { PLAY_MODE } from '../constants/PlayMode';
 import PlayerManager from '../manager/PlayerManager';
 import AllSinger from '../view/AllSinger';
+import Logger from '../utils/Logger';
 
 PersistentStorage.persistProp(AppConstants.LOGIN_COOKIE, '');
 PersistentStorage.persistProp(AppConstants.LOGIN_NAME, AppConstants.LOGIN_INFO_NO);
@@ -41,10 +42,12 @@ PersistentStorage.persistProp(AppConstants.KEEP_LOGIN_SETTING, AppConstants.TOGG
 PersistentStorage.persistProp(AppConstants.SERVER_HOST_PROP, AppConstants.SERVER_HOST);
 PersistentStorage.persistProp(AppConstants.PLAYLIST_RECORD, []);
 PersistentStorage.persistProp(AppConstants.PLAYLIST_RECORD_INDEX, '0');
+PersistentStorage.persistProp(AppConstants.CARD_FORM_ID, '');
 
 @Entry
 @Component
 struct Index {
+  private tag = 'Index'
   private PlayerManager: PlayerManager = AppStorage.get('PlayerManager') as PlayerManager;
   @State recommendPlayLists: PlayListGroupData[] = [];
   @State customPlayLists: PlayListData[] = [];
@@ -67,6 +70,8 @@ struct Index {
   @State inputUserName: string = ''
   @State inputPwd: string = ''
   @State inputPwd2: string = ''
+  @State durationTime: number = this.PlayerManager.getDurationTime();
+  @State currentTime: number = this.PlayerManager.getCurrentTime();
   private dialogController: CustomDialogController | null = new CustomDialogController({
     builder: LoginCustomDialog({
       cancel: () => {
@@ -110,6 +115,7 @@ struct Index {
     let loginName: string | undefined = AppStorage.get(AppConstants.LOGIN_NAME);
     this.PlayerManager.initialPlayList();
     this.PlayerManager.initialPlayMode();
+    this.PlayerManager.initialCardFormId();
     HttpManager.getInstance().getRecommendListFromServer();
     if (loginName != AppConstants.LOGIN_INFO_NO) {
       this.loginInfo = loginName + AppConstants.LOGIN_INFO_DONE;
@@ -136,6 +142,10 @@ struct Index {
     emitter.on(AppConstants.MAIN_SHOW_PLAYLIST, () => {
       this.showExplorePlaylist();
     });
+
+    emitter.on(AppConstants.MAIN_UPDATE_TIME, (eventData: emitter.EventData) => {
+      this.updateTime(eventData);
+    });
   }
 
   aboutToDisappear(): void {
@@ -143,6 +153,7 @@ struct Index {
     emitter.off(AppConstants.LOGIN_RESULT);
     emitter.off(AppConstants.PLAYLIST_UPDATE_CHANGED);
     emitter.off(AppConstants.MAIN_SHOW_PLAYLIST);
+    emitter.off(AppConstants.MAIN_UPDATE_TIME);
     if (this.dialogController !== null) {
       this.dialogController.close();
       this.dialogController = null;
@@ -329,7 +340,12 @@ struct Index {
               .margin({ bottom: 72 })
           }
           Column() {
-            PlayerBar({ isShowCurrentPlayList: $isShowCurrentPlayList, isShowPlayerDetail: $isShowPlayerDetail })
+            PlayerBar({
+              isShowCurrentPlayList: $isShowCurrentPlayList,
+              isShowPlayerDetail: $isShowPlayerDetail,
+              durationTime: this.durationTime,
+              currentTime: this.currentTime
+            })
               .backgroundColor(Color.White)
               .width('100%')
               .margin({ top: 4 })
@@ -347,6 +363,8 @@ struct Index {
               isShowPlayerDetail: $isShowPlayerDetail,
               customPlayLists: this.customPlayLists,
               loginInfo: this.loginInfo,
+              durationTime: this.durationTime,
+              currentTime: this.currentTime
             })
               .width('100%')
               .height('100%')
@@ -370,7 +388,9 @@ struct Index {
               .transition(TransitionEffect.OPACITY.animation({ duration: 1000, curve: Curve.Ease }))
           }
           if (this.isShowCurrentPlayList) {
-            CurrentPlayList()
+            CurrentPlayList({
+              currentTime: this.currentTime
+            })
               .width('100%')
               .height('80%')
               .transition(TransitionEffect.OPACITY
@@ -418,6 +438,13 @@ struct Index {
     }
   }
 
+  updateTime(eventData: emitter.EventData) {
+    if (eventData !== undefined && eventData.data !== undefined) {
+      this.currentTime = eventData.data.currentTime;
+      this.durationTime = eventData.data.currentDuration;
+    }
+  }
+
   logout() {
     AppStorage.setOrCreate(AppConstants.LOGIN_NAME, AppConstants.LOGIN_INFO_NO);
     AppStorage.setOrCreate(AppConstants.LOGIN_COOKIE, AppConstants.LOGIN_COOKIE_NONE);
@@ -499,7 +526,7 @@ struct Index {
             { duration: 1000 },
             () => {
               if (eventData.data !== undefined && eventData.data.item !== undefined) {
-                console.info('UPDATE_USER_LIST_RECOMMEND:' + (eventData.data.item as PlayListGroupData).title);
+                Logger.info(this.tag, 'UPDATE_USER_LIST_RECOMMEND:' + (eventData.data.item as PlayListGroupData).title);
                 this.recommendPlayLists.push(eventData.data.item as PlayListGroupData);
               }
             })
@@ -512,7 +539,7 @@ struct Index {
           }
           animateTo({ duration: 1000 }, () => {
             if (eventData.data !== undefined && eventData.data.item !== undefined) {
-              console.info('UPDATE_USER_LIST_CUSTOM:' + (eventData.data.item as PlayListData).title);
+              Logger.info(this.tag, 'UPDATE_USER_LIST_CUSTOM:' + (eventData.data.item as PlayListData).title);
               this.customPlayLists.push(eventData.data.item as PlayListData);
               if ((eventData.data.item as PlayListData).title === this.PlayerManager.getExploreList().title) {
                 this.PlayerManager.setExploreList(eventData.data.item as PlayListData);
@@ -525,7 +552,7 @@ struct Index {
             { duration: 1000 },
             () => {
               if (eventData.data !== undefined && eventData.data.item !== undefined) {
-                console.info('UPDATE_USER_LIST_RECENT:' + (eventData.data.item as PlayListData).title);
+                Logger.info(this.tag, 'UPDATE_USER_LIST_RECENT:' + (eventData.data.item as PlayListData).title);
                 let recentItem = eventData.data.item as PlayListData;
                 let existingIndex = this.customPlayLists.findIndex(item => item.title === recentItem.title);
                 if (existingIndex !== -1) {
@@ -546,7 +573,7 @@ struct Index {
             { duration: 1000 },
             () => {
               if (eventData.data !== undefined && eventData.data.item !== undefined) {
-                console.info('UPDATE_USER_LIST_SEARCH:' + (eventData.data.item as PlayListData).title);
+                Logger.info(this.tag, 'UPDATE_USER_LIST_SEARCH:' + (eventData.data.item as PlayListData).title);
                 this.searchResultPlayLists.push(eventData.data.item as PlayListData)
               }
             })
@@ -558,7 +585,7 @@ struct Index {
             () => {
               if (eventData.data !== undefined) {
                 if (eventData.data.item !== undefined) {
-                  console.info('UPDATE_USER_LIST_FAVOR:' + (eventData.data.item as PlayListData).title);
+                  Logger.info(this.tag, 'UPDATE_USER_LIST_FAVOR:' + (eventData.data.item as PlayListData).title);
                   if (existingIndex !== -1) {
                     this.customPlayLists[existingIndex] = eventData.data.item as PlayListData;
                   } else {
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/utils/CommonUtils.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/utils/CommonUtils.ets
index 07bb2525453ecf07158bd462445dc6bd6673ba1f..35933fcd3ff4217be7a4c434c3218bf80f3fcbb2 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/utils/CommonUtils.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/utils/CommonUtils.ets
@@ -16,11 +16,13 @@
 import HashMap from '@ohos.util.HashMap'; // 导入HashMap模块
 import HttpManager from '../manager/HttpManager';
 import LrcLine from '../model/LrcLine';
+import Logger from './Logger';
 
 /**
  * Binds data to components and provides interfaces.
  */
 export class CommonUtils {
+  private tag = 'CommonUtils';
 
   getLrc(lrc: string): LrcLine[] {
     let lrcData: LrcLine[] = [];
@@ -60,7 +62,7 @@ export class CommonUtils {
     // 修改正则表达式以匹配两种格式的毫秒部分
     const parts = timeStr.match(/\[(\d{2}):(\d{2})\.(\d{2})(\d{0,1})?\]/);
     if (!parts) {
-      console.info('time format error.');
+      Logger.error(this.tag, 'time format error.');
       return 0;
     }
     const minutes = parseInt(parts[1], 10);
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/utils/Logger.ts b/scenario/MusicPlayerOnline/entry/src/main/ets/utils/Logger.ts
index 89b6f97a03c2499e7d37b839119437177f3c6c8b..db94ebb8ef4b843cae530c634ef80e65a955a295 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/utils/Logger.ts
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/utils/Logger.ts
@@ -42,4 +42,4 @@ class Logger {
   }
 }
 
-export default new Logger('[Samples_MusicPlayer]');
\ No newline at end of file
+export default new Logger('[Samples_MusicPlayerOnline]');
\ No newline at end of file
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/view/AllSinger.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/view/AllSinger.ets
index 6a592b6c125377dad498a866708d406c64d9fcd7..9f2881530fb4335fdbcf2306c38696abc3241bd0 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/view/AllSinger.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/view/AllSinger.ets
@@ -19,9 +19,11 @@ import emitter from '@ohos.events.emitter';
 import HttpManager from "../manager/HttpManager";
 import prompt from '@ohos.promptAction';
 import SingerItem from "./SingerItem";
+import Logger from "../utils/Logger";
 
 @Component
 export default struct AllSinger {
+  private tag = 'AllSinger';
   @Link isShowSingerList: boolean;
   @State count: number = 0
   private aAllSingerDataSource: AllSingerDataSource = new AllSingerDataSource();
@@ -37,7 +39,7 @@ export default struct AllSinger {
           prompt.showToast({ message: AppConstants.NO_MORE_SINGER });
           return;
         }
-        console.info('UPDATE_ALL_SINGER_LIST size:' + list.length);
+        Logger.info(this.tag, 'UPDATE_ALL_SINGER_LIST size:' + list.length);
         for (let index = 0; index < list.length; index++) {
           this.aAllSingerDataSource.addLastItem(list[index])
         }
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/view/CurrentPlayList.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/view/CurrentPlayList.ets
index 0479f739b3bcce5d83a617460723bbaf5e53de55..2ded1f271cd416cca903b20e18b8c244123a249d 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/view/CurrentPlayList.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/view/CurrentPlayList.ets
@@ -23,7 +23,8 @@ import AppConstants from '../constants/AppConstants';
 export default struct CurrentPlayList {
   private playerManager: PlayerManager = AppStorage.get('PlayerManager') as PlayerManager;
   @State playingList: AudioData[] = Array<AudioData>();
-  @State listTitle: string = AppConstants.LIST_SONG_NO_PLAYING;
+  @Prop listTitle: string;
+  @Prop currentTime: number;
   private scrollerForList: Scroller = new Scroller();
 
   aboutToAppear() {
@@ -34,7 +35,7 @@ export default struct CurrentPlayList {
     setTimeout(() => {
       this.scrollerForList.scrollToIndex(this.playingList.indexOf(this.playerManager.getItem()), true,
         ScrollAlign.CENTER);
-    }, 2000)
+    }, 1000)
 
     emitter.on(AppConstants.PLAYLIST_UPDATE_STATE, (eventData: emitter.EventData) => {
       this.updateState(eventData);
@@ -60,10 +61,10 @@ export default struct CurrentPlayList {
       .alignItems(VerticalAlign.Bottom)
 
       List({ scroller: this.scrollerForList }) {
-        ForEach(this.playingList, (item: AudioData) => {
+        ForEach(this.playingList, (item: AudioData, index) => {
           ListItem() {
             Row() {
-              SongItem({ item })
+              SongItem({ item, index, currentTime: this.currentTime })
                 .width('90%')
                 .clickEffect(AppConstants.CLICK_EFFECT)
                 .onClick(() => {
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerBar.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerBar.ets
index a7e56024a4376c3aa7d8fafb120d4856f148d49e..d1f5c1c60fc56f0307d1b38a57341a57c981dc81 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerBar.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerBar.ets
@@ -26,9 +26,8 @@ import PlayerManager from '../manager/PlayerManager';
 export default struct PlayerBar {
   private tag: string = 'PlayerBar';
   @State item: AudioData = new AudioData('', '', '')
-  @State rotateAngle: number = 0;
-  @State durationTime: number = 100;
-  @State currentTime: number = 0;
+  @Prop durationTime: number;
+  @Prop currentTime: number;
   @State state: string = AppConstants.PLAYER_STATE_UNKNOWN;
   @Link isShowCurrentPlayList: boolean;
   @Link isShowPlayerDetail: boolean;
@@ -37,16 +36,12 @@ export default struct PlayerBar {
 
   aboutToAppear() {
     Logger.info(this.tag, 'aboutToAppear');
-    emitter.on(AppConstants.MAIN_UPDATE_TIME, (eventData: emitter.EventData) => {
-      this.updateTime(eventData);
-    });
     emitter.on(AppConstants.MAIN_UPDATE_STATE, (eventData: emitter.EventData) => {
       this.updateState(eventData)
     });
   }
 
   aboutToDisappear() {
-    emitter.off(AppConstants.MAIN_UPDATE_TIME);
     emitter.off(AppConstants.MAIN_UPDATE_STATE);
     Logger.info(this.tag, 'aboutToDisappear');
   }
@@ -54,26 +49,22 @@ export default struct PlayerBar {
   build() {
     Column() {
       Row() {
-        Image(this.item.id ? (AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.SONG_IMAGE_URL + this.item.id) : $r('app.media.startIcon'))
+        Image(this.item.id ?
+          (AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.SONG_IMAGE_URL + this.item.id) :
+        $r('app.media.startIcon'))
           .width(56)
           .height(56)
           .margin(4)
           .borderRadius(48)
           .shadow({ radius: 1, color: Color.Gray })
-          .rotate({ angle: this.rotateAngle })
-          .animation({
-            duration: 7200,
-            curve: Curve.Linear,
-            delay: 500,
-            iterations: -1,
-            playMode: PlayMode.Normal
-          })
+          .rotate({ angle: this.currentTime / 100 })
           .id('songImage')
           .clickEffect(AppConstants.CLICK_EFFECT)
           .onClick(() => {
             this.isShowPlayerDetail = true;
           })
-        Text(this.item.id ? (this.state === AppConstants.PLAYER_STATE_PLAYING ? this.spaces + this.item.title + ' - ' + this.item.artist + this.spaces
+        Text(this.item.id ? (this.state === AppConstants.PLAYER_STATE_PLAYING ?
+          this.spaces + this.item.title + ' - ' + this.item.artist + this.spaces
           : this.item.title + ' - ' + this.item.artist) : AppConstants.LIST_SONG_NO_PLAYING)
           .fontSize('24fp')
           .maxLines(1)
@@ -138,25 +129,9 @@ export default struct PlayerBar {
     .width('100%')
   }
 
-  updateTime(eventData: emitter.EventData) {
-    if (eventData !== undefined && eventData.data !== undefined) {
-      this.currentTime = eventData.data.currentTime;
-      this.durationTime = eventData.data.currentDuration;
-    }
-  }
   updateState(eventData: emitter.EventData) {
     if (eventData !== undefined && eventData.data !== undefined) {
       Logger.info(this.tag, 'state:' + eventData.data.state);
-      if (this.state !== AppConstants.PLAYER_STATE_PLAYING && eventData.data.state === AppConstants.PLAYER_STATE_PLAYING) {
-        if (this.rotateAngle === 0) {
-          this.rotateAngle = 360;
-          Logger.info(this.tag, 'rotateAngle:360');
-        }
-      }
-      if (eventData.data.state !== AppConstants.PLAYER_STATE_PLAYING) {
-        this.rotateAngle = 0;
-        Logger.info(this.tag, 'rotateAngle:0');
-      }
       this.state = eventData.data.state;
       this.item = this.PlayerManager.getItem();
     }
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerDetail.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerDetail.ets
index b19650105716e0b1b374f2c2f37f51e550ede6b0..e1c671e561c9eb8fa360ab08d96851007277aad6 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerDetail.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerDetail.ets
@@ -35,12 +35,11 @@ export default struct PlayerDetail {
   private PlayerManager: PlayerManager = AppStorage.get('PlayerManager') as PlayerManager;
   @State item: AudioData = this.PlayerManager.getItem();
   @State listTitle: string = this.PlayerManager.getListTitle();
-  @State durationTime: number = 0;
-  @State currentTime: number = 0;
+  @Prop durationTime: number;
+  @Prop currentTime: number;
   @State state: string = this.PlayerManager.getState();
-  @State rotateAngle: number = 0;
   @State subCurrentIndex: number = 0;
-  @State lrcIndex: number = 0
+  @State lrcIndex: number = this.PlayerManager.getLrcIndex();
   @State albumImageContent: boolean = true;
   @State playMode: number = this.PlayerManager.getPlayMode();
   @State noItem: boolean = false;
@@ -53,6 +52,7 @@ export default struct PlayerDetail {
   private scroller: Scroller = new Scroller()
   private isDialogOpened: boolean = false;
   private songIdToAdd: string = '';
+  private indexScrollStep: number = 6;
   dialogController: CustomDialogController | null = new CustomDialogController({
     builder: AddToListDialog({
       cancel: () => {
@@ -90,20 +90,18 @@ export default struct PlayerDetail {
 
   aboutToAppear() {
     this.albumImageContent = (AppStorage.get(AppConstants.DETAIL_DEFAULT_SETTING) != AppConstants.TOGGLE_SETTING_ON);
-    if (this.state === AppConstants.PLAYER_STATE_PLAYING) {
+
+    if (this.lrcIndex - this.indexScrollStep > 0) {
       setTimeout(() => {
-        if (this.rotateAngle === 0) {
-          this.rotateAngle = 360;
-          Logger.info(this.tag, 'rotateAngle:360');
-        }
-      }, 100);
+        this.scroller.scrollToIndex(this.lrcIndex - this.indexScrollStep, true)
+      }, 100)
     }
 
     emitter.on(AppConstants.DETAIL_UPDATE_FAVOR_AND_QUALITY, () => {
       this.updateFavor();
     });
-    emitter.on(AppConstants.DETAIL_UPDATE_TIME, (eventData: emitter.EventData) => {
-      this.updateTime(eventData);
+    emitter.on(AppConstants.DETAIL_UPDATE_LRC_INDEX, (eventData: emitter.EventData) => {
+      this.updateLrcIndex(eventData);
     });
     emitter.on(AppConstants.DETAIL_UPDATE_STATE, (eventData: emitter.EventData) => {
       this.updateState(eventData);
@@ -115,7 +113,7 @@ export default struct PlayerDetail {
 
   aboutToDisappear() {
     Logger.info(this.tag, 'aboutToDisappear');
-    emitter.off(AppConstants.DETAIL_UPDATE_TIME);
+    emitter.off(AppConstants.DETAIL_UPDATE_LRC_INDEX);
     emitter.off(AppConstants.DETAIL_UPDATE_STATE);
     emitter.off(AppConstants.DETAIL_UPDATE_FAVOR_AND_QUALITY);
     emitter.off(AppConstants.DETAIL_UPDATE_LRC);
@@ -218,17 +216,17 @@ export default struct PlayerDetail {
         if (!this.noItem) {
           if (this.albumImageContent) {
             Column() {
-              Image(this.item.id ? AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.SONG_IMAGE_URL + this.item.id : $r('app.media.startIcon'))
+              Image(this.item.id ?
+                AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.SONG_IMAGE_URL + this.item.id :
+              $r('app.media.startIcon'))
                 .width(300)
                 .height(300)
                 .borderRadius(150)
                 .margin(50)
-                .rotate({ angle: this.rotateAngle })
+                .rotate({ angle: this.currentTime / 100 })
                 .animation({
-                  duration: 36000,
+                  duration: 100,
                   curve: Curve.Linear,
-                  delay: 500,
-                  iterations: -1, // 设置-1表示动画无限循环
                   playMode: PlayMode.Normal
                 })
                 .id('detail_songImg')
@@ -276,7 +274,9 @@ export default struct PlayerDetail {
               TransitionEffect.translate({ z: 24 })))
           } else {
             Stack({ alignContent: Alignment.Center }) {
-              Image(this.item.id ? AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.SONG_IMAGE_URL + this.item.id : $r('app.media.startIcon'))
+              Image(this.item.id ?
+                AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.SONG_IMAGE_URL + this.item.id :
+              $r('app.media.startIcon'))
                 .width('80%')
                 .height('80%')
                 .foregroundEffect({ radius: 20 })
@@ -322,12 +322,6 @@ export default struct PlayerDetail {
             .clickEffect(AppConstants.CLICK_EFFECT)
             .onClick(() => {
               this.albumImageContent = true;
-              if (this.state === AppConstants.PLAYER_STATE_PLAYING) {
-                this.rotateAngle = 0;
-                animateTo({ duration: 36000 }, () => {
-                  this.rotateAngle = 360;
-                })
-              }
             })
           }
         }
@@ -348,10 +342,10 @@ export default struct PlayerDetail {
       Row() {
         Text(CommonUtils.formatTime(this.currentTime / 1000)).fontSize('12fp')
           .id('detail_time_current')
-        if (this.item.quality === '.flac') {
-          Text('无损')
-            .id('high_quality')
-        }
+        Text(this.item.quality === AppConstants.HIGH_Q ? AppConstants.HIGH_DES :
+          this.item.quality === AppConstants.FLAC ? AppConstants.FLAC_DES : AppConstants.QUALITY_DEFAULT)
+          .fontColor(Color.Orange)
+          .id('high_quality')
         Text(CommonUtils.formatTime(this.durationTime / 1000)).fontSize('12fp')
           .id('detail_time_duration')
       }.width('80%')
@@ -421,9 +415,7 @@ export default struct PlayerDetail {
   }
 
   updateFavor() {
-    animateTo({ duration: 2000 }, () => {
-      this.item = this.PlayerManager.getItem();
-    })
+    this.item = this.PlayerManager.getItem();
     this.noItem = false;
   }
 
@@ -431,16 +423,12 @@ export default struct PlayerDetail {
     this.item = this.PlayerManager.getItem();
   }
 
-  updateTime(eventData: emitter.EventData) {
+  updateLrcIndex(eventData: emitter.EventData) {
     if (eventData !== undefined && eventData.data !== undefined) {
-      this.currentTime = eventData.data.currentTime;
-      this.durationTime = eventData.data.currentDuration;
       if (!this.albumImageContent) {
-        let newLrcIndex = CommonUtils.findLrcIndexByTime(this.item.lrc, this.currentTime, this.lrcIndex)
-        if (newLrcIndex != this.lrcIndex && newLrcIndex != -1) {
-          this.lrcIndex = newLrcIndex;
-          console.info('bestMatchIndex:'+newLrcIndex)
-          this.scroller.scrollToIndex(this.lrcIndex - 5, true)
+        if (eventData.data.newLrcIndex != this.lrcIndex && eventData.data.newLrcIndex != -1) {
+          this.lrcIndex = eventData.data.newLrcIndex;
+          this.scroller.scrollToIndex(this.lrcIndex - this.indexScrollStep, true)
         }
       }
     }
@@ -452,26 +440,12 @@ export default struct PlayerDetail {
       if (eventData.data.state === AppConstants.PLAYER_STATE_IDLE) {
         this.noItem = true;
       }
-      if (this.state !== AppConstants.PLAYER_STATE_PLAYING &&
-        eventData.data.state !== AppConstants.PLAYER_STATE_PAUSED) {
-        this.lrcIndex = 0
-      }
       if (this.state !== AppConstants.PLAYER_STATE_PLAYING &&
         eventData.data.state === AppConstants.PLAYER_STATE_PLAYING) {
         this.item = this.PlayerManager.getItem();
         this.noItem = false;
         this.listTitle = this.PlayerManager.getListTitle();
         this.scroller.scrollToIndex(0, true)
-        setTimeout(() => {
-          if (this.rotateAngle === 0) {
-            this.rotateAngle = 360;
-            Logger.info(this.tag, 'rotateAngle:360');
-          }
-        }, 100);
-      }
-      if (eventData.data.state !== AppConstants.PLAYER_STATE_PLAYING) {
-        this.rotateAngle = 0;
-        Logger.info(this.tag, 'rotateAngle:0');
       }
       this.state = eventData.data.state;
     }
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/view/SongItem.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/view/SongItem.ets
index 30ae75a19e0439f2a565833a07b61e5aa1edac66..b7f2a7735f951b9afd24f5049d5ca4dad4ddf643 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/view/SongItem.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/view/SongItem.ets
@@ -15,22 +15,30 @@
 
 import AudioData from '../model/AudioData';
 import AppConstants from '../constants/AppConstants';
-import PlayerManager from '../manager/PlayerManager';
 
 @Component
 export default struct SongItem {
   @State item: AudioData = new AudioData('', '', '');
-  private spaces: string = '                         '
+  @State index: number = 0;
+  @Prop currentTime: number;
+  private spaces: string = '                             ';
 
   build() {
     Row() {
-      Image(AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.SONG_IMAGE_URL + this.item.id)
-        .width(64)
-        .height(64)
-        .borderRadius(4)
-      Blank()
+      if (this.item.isPlaying) {
+        Image(AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.SONG_IMAGE_URL + this.item.id)
+          .width(64)
+          .height(64)
+          .borderRadius(32)
+          .rotate({ angle: this.currentTime / 100 })
+      } else {
+        Text((this.index + 1).toString() + '.')
+          .fontSize(20)
+          .fontColor('#a0a0a0')
+          .margin(8)
+      }
       Text() {
-        if(this.item.isPlaying){
+        if (this.item.isPlaying) {
           Span(this.spaces)
             .fontSize('20fp')
         }
@@ -41,19 +49,18 @@ export default struct SongItem {
           .fontColor('#a0a0a0')
         Span(this.item.artist)
           .fontColor('#a0a0a0')
-        if(this.item.isPlaying){
+        if (this.item.isPlaying) {
           Span(this.spaces)
             .fontSize('20fp')
         }
       }
       .id(this.item.title)
       .maxLines(1)
-      .width('80%')
-      .textAlign(TextAlign.End)
-      .textOverflow({ overflow: this.item.isPlaying ? TextOverflow.MARQUEE : TextOverflow.None })
+      .width('90%')
+      .textAlign(TextAlign.Start)
+      .textOverflow({ overflow: this.item.isPlaying ? TextOverflow.MARQUEE : TextOverflow.Ellipsis })
     }
     .justifyContent(FlexAlign.SpaceBetween)
-    .width('90%')
-    .alignSelf(ItemAlign.Center)
+    .width(this.item.isPlaying ? '100%' : '90%')
   }
 }
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/widget/pages/WidgetCard.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/widget/pages/WidgetCard.ets
index 868473a24a004071b5bdc08fe9d1a9d6ddf5e37e..f3e542019bccee652bdf380773bc2573202c168f 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/widget/pages/WidgetCard.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/widget/pages/WidgetCard.ets
@@ -38,7 +38,9 @@ struct WidgetCard {
   /*
    * The action type.
    */
-  readonly ACTION_TYPE: string = 'router';
+  readonly ACTION_TYPE_ROUTER: string = 'router';
+  readonly ACTION_TYPE_CALL: string = 'call';
+  readonly ACTION_TYPE_MESSAGE: string = 'message';
   /*
    * The ability name.
   */
@@ -53,17 +55,12 @@ struct WidgetCard {
   @LocalStorageProp('isPlaying') isPlaying: string = AppConstants.PLAYER_STATE_UNKNOWN;
   @LocalStorageProp('imgName') imgName: string = '';
   @LocalStorageProp('playMode') playMode: number = PLAY_MODE.REPEAT;
+  @LocalStorageProp('currentTime') currentTime: number = 0;
+  @LocalStorageProp('durationTime') durationTime: number = 0;
   private downloadImgId: string = ''
 
   aboutToAppear(): void {
-    postCardAction(this, {
-      'action': 'call',
-      'abilityName': this.ABILITY_NAME,
-      'params': {
-        'method': 'formId',
-        'formId': this.formId,
-      }
-    });
+    this.sendFormId();
   }
 
   build() {
@@ -83,23 +80,26 @@ struct WidgetCard {
         .opacity(0.9)
 
       Row() {
-        Column() {
+        Stack() {
+          Progress({ value: 0, total: this.durationTime, type: ProgressType.Ring })
+            .color(Color.Orange)
+            .value(this.currentTime)
+            .width(138)
+            .height(138)
+            .style({ strokeWidth: 4, enableScanEffect: true })
           Row()
             .width(128)
             .height(128)
             .borderRadius(64)
-            .margin(8)
             .shadow({ radius: 2, color: Color.Gray })
             .backgroundImage('memory://' + this.imgName)
             .backgroundImageSize(ImageSize.Cover)
+            .rotate({ angle: this.currentTime / 100 })
             .onClick(() => {
-              postCardAction(this, {
-                action: this.ACTION_TYPE,
-                abilityName: this.ABILITY_NAME,
-              });
+              this.onItemClick(this.ACTION_TYPE_ROUTER, this.formId);
             })
         }
-        .justifyContent(FlexAlign.Center)
+        .alignContent(Alignment.Center)
         .height(this.FULL_PERCENT)
 
         Column() {
@@ -124,17 +124,14 @@ struct WidgetCard {
             .margin({ left: 8, right: 8 })
             .width('80%')
             .onClick(() => {
-              postCardAction(this, {
-                action: this.ACTION_TYPE,
-                abilityName: this.ABILITY_NAME,
-              });
+              this.onItemClick(this.ACTION_TYPE_ROUTER, this.formId);
             })
 
             Image(this.audioItem.isFavor ? $r('app.media.heart_fill') : $r('app.media.heart'))
               .width(48)
               .height(48)
               .onClick(() => {
-                this.onSetFavor()
+                this.onItemClick(this.ACTION_TYPE_CALL, AppConstants.CARD_CALL_METHOD_SET_FAVOR);
               })
           }
           .alignItems(VerticalAlign.Top)
@@ -148,7 +145,7 @@ struct WidgetCard {
               .height(64)
               .padding(4)
               .onClick(() => {
-                this.setPlayMode();
+                this.onItemClick(this.ACTION_TYPE_CALL, AppConstants.CARD_CALL_METHOD_SET_MODE);
               })
 
             Image($r('app.media.backward_end_fill'))
@@ -156,7 +153,7 @@ struct WidgetCard {
               .height(64)
               .padding(4)
               .onClick(() => {
-                this.onPreviousClick()
+                this.onItemClick(this.ACTION_TYPE_CALL, AppConstants.CARD_CALL_METHOD_PREV);
               })
             if (this.isPlaying === AppConstants.PLAYER_STATE_PLAYING) {
               Image($r('app.media.pause'))
@@ -164,7 +161,7 @@ struct WidgetCard {
                 .height(64)
                 .padding(8)
                 .onClick(() => {
-                  this.onPauseClick();
+                  this.onItemClick(this.ACTION_TYPE_CALL, AppConstants.CARD_CALL_METHOD_PAUSE);
                 })
                 .onAppear(() => {
                   if (this.audioItem.id !== '') {
@@ -173,7 +170,7 @@ struct WidgetCard {
                     }
                     this.downloadImgId = this.audioItem.id;
                     postCardAction(this, {
-                      action: 'message',
+                      action: this.ACTION_TYPE_MESSAGE,
                       params: {
                         info: this.serverHost + AppConstants.SONG_IMAGE_URL + this.audioItem.id
                       }
@@ -186,7 +183,7 @@ struct WidgetCard {
                 .height(64)
                 .padding(4)
                 .onClick(() => {
-                  this.onPlayClick();
+                  this.onItemClick(this.ACTION_TYPE_CALL, AppConstants.CARD_CALL_METHOD_PLAY);
                 })
             }
 
@@ -195,7 +192,7 @@ struct WidgetCard {
               .height(64)
               .padding(4)
               .onClick(() => {
-                this.onNextClick()
+                this.onItemClick(this.ACTION_TYPE_CALL, AppConstants.CARD_CALL_METHOD_NEXT);
               })
 
           }
@@ -212,65 +209,24 @@ struct WidgetCard {
     }
   }
 
-  setPlayMode(): void {
-    postCardAction(this, {
-      'action': 'call',
-      'abilityName': this.ABILITY_NAME,
-      'params': {
-        'method': 'playMode'
-      }
-    });
-    console.info(TAG, 'postCardAction setPlayMode');
-  }
-
-  onPlayClick(): void {
-    postCardAction(this, {
-      'action': 'call',
-      'abilityName': this.ABILITY_NAME,
-      'params': {
-        'method': 'play'
-      }
-    });
-    console.info(TAG, 'postCardAction onPlayClick');
-  }
-
-  onPauseClick(): void {
-    postCardAction(this, {
-      'action': 'call',
-      'abilityName': this.ABILITY_NAME,
-      'params': {
-        'method': 'pause'
-      }
-    });
-    console.info(TAG, 'postCardAction onPauseClick');
-  }
-
-  onPreviousClick(): void {
-    postCardAction(this, {
-      'action': 'call',
-      'abilityName': this.ABILITY_NAME,
-      'params': {
-        'method': 'prev'
-      }
-    });
-  }
-
-  onNextClick(): void {
+  onItemClick(actionType: string, method: string): void {
     postCardAction(this, {
-      'action': 'call',
-      'abilityName': this.ABILITY_NAME,
-      'params': {
-        'method': 'next'
+      action: actionType,
+      abilityName: this.ABILITY_NAME,
+      params: {
+        method: method,
       }
     });
+    this.sendFormId();
   }
 
-  onSetFavor(): void {
+  sendFormId() {
     postCardAction(this, {
-      'action': 'call',
-      'abilityName': this.ABILITY_NAME,
-      'params': {
-        'method': 'setFavor'
+      action: this.ACTION_TYPE_CALL,
+      abilityName: this.ABILITY_NAME,
+      params: {
+        method: AppConstants.CARD_CALL_METHOD_FORM_ID,
+        formId: this.formId,
       }
     });
   }
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/backward_end_fill.png b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/backward_end_fill.png
index 4a2a051ae1a087831bdde552f748b039467854a3..e6b33c0f4c758c6eb0afa11a39c7781c0d34ff48 100644
Binary files a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/backward_end_fill.png and b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/backward_end_fill.png differ
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/folder_badge_plus.png b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/folder_badge_plus.png
index e4bc685960c135af59e1e81ff1c973aaf309da61..9961911d98e3a43dc52c21cd4c7e5fc9208f9147 100644
Binary files a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/folder_badge_plus.png and b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/folder_badge_plus.png differ
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/forward_end_fill.png b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/forward_end_fill.png
index bcf792c3891db970e62517d85acb11bae78ef53a..b5df7e24837b1461fa8f1f53c96f1356cd72778b 100644
Binary files a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/forward_end_fill.png and b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/forward_end_fill.png differ
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/heart.png b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/heart.png
index 8378844a2194dd11162a472186632b0f953fa68a..096df47a675667d1fa5e62dad23e0b4e5d5f25ad 100644
Binary files a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/heart.png and b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/heart.png differ
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/heart_fill.png b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/heart_fill.png
index 7626659a32ac9e9619a4a15901a77d10a3a14fc2..53f9f07070c6c52bead4d93a7e7626b9895143c7 100644
Binary files a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/heart_fill.png and b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/heart_fill.png differ
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/pause.png b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/pause.png
index 3cbd1aebc2c7a4f129b4fe98d1dcf538d1d4c178..1a37012b610d6c0da28c0409110d752ac9c700d6 100644
Binary files a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/pause.png and b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/pause.png differ
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/play_fill.png b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/play_fill.png
index cef70e1b45626b306e7029a0d306a7df8d6d3f10..b6e9531cef0e4a19632216ac1d9f3138e9be31cf 100644
Binary files a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/play_fill.png and b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/play_fill.png differ
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/repeat.png b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/repeat.png
index e68a3d43511ec59c793af873cdbe117f8e2b7966..929e957eef27db33e19e1fdc8e683e4e555fb53d 100644
Binary files a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/repeat.png and b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/repeat.png differ
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/repeat_1.png b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/repeat_1.png
index 7205077f67b8c4f3634e9ae99cc608e891ae3217..de3426ba08f33668db865698aaf59c65f5b57d31 100644
Binary files a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/repeat_1.png and b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/repeat_1.png differ
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/shuffle.png b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/shuffle.png
index 32cd55582f0f6621040413b18f12349286971765..f66ce8e25f4b5d6bbf030e7b6b45b11ddcad1099 100644
Binary files a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/shuffle.png and b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/shuffle.png differ