diff --git a/scenario/MusicPlayerOnline/README_zh.md b/scenario/MusicPlayerOnline/README_zh.md
index 2ce0a9e7f507245c127dcb631791aff0ed4d1061..3115c6067ccc1017efb8a82ffa371c742f0756f4 100644
--- a/scenario/MusicPlayerOnline/README_zh.md
+++ b/scenario/MusicPlayerOnline/README_zh.md
@@ -94,7 +94,7 @@
     9. 进度条拖动
     10. 边听边存、离线播放
     11. 歌词
-    12. 桌面播放卡片
+    12. 桌面播放卡片 (已完成)
     13. 歌曲分类: 热门歌手 （已完成）
     14. 其他平台歌曲推荐、播放
     15. 音频焦点处理
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/constants/ServerConstants.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/constants/ServerConstants.ets
index 975fc06d4bb824fdbed136871720b941e5f7f928..4a6968145b421137b84551ee39d1292838c62c68 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/constants/ServerConstants.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/constants/ServerConstants.ets
@@ -20,7 +20,7 @@ export default class ServerConstants {
   /**
    * server host ,replace with your owen server address
    */
-  static readonly SERVER_HOST = 'http://192.168.13.29:8000/';
+  static readonly SERVER_HOST = 'http://192.168.13.110:8000/';
   /**
    * custom list URL
    */
@@ -83,33 +83,37 @@ export default class ServerConstants {
   /**
    * 首页播放状态更新消息
    */
-  static readonly MAIN_UPDATE_TIME = '01';
-  static readonly MAIN_UPDATE_STATE = '02';
-  static readonly MAIN_SHOW_PLAYLIST = '03';
+  static readonly MAIN_UPDATE_TIME = 'MAIN_UPDATE_TIME';
+  static readonly MAIN_UPDATE_STATE = 'MAIN_UPDATE_STATE';
+  static readonly MAIN_SHOW_PLAYLIST = 'MAIN_SHOW_PLAYLIST';
   /**
    * 详情页播放状态更新消息
    */
-  static readonly DETAIL_UPDATE_TIME = '10';
-  static readonly DETAIL_UPDATE_STATE = '11';
-  static readonly DETAIL_UPDATE_FAVOR_AND_QUALITY = '12';
+  static readonly DETAIL_UPDATE_TIME = 'DETAIL_UPDATE_TIME';
+  static readonly DETAIL_UPDATE_STATE = 'DETAIL_UPDATE_STATE';
+  static readonly DETAIL_UPDATE_FAVOR_AND_QUALITY = 'DETAIL_UPDATE_FAVOR_AND_QUALITY';
+  /**
+   * 卡片更新消息
+   */
+  static readonly CARD_UPDATE_STATE = 'music.online.card.update';
   /**
    * 播放列表播放状态更新消息
    */
-  static readonly PLAYLIST_UPDATE_STATE = '20';
-  static readonly PLAYLIST_UPDATE_CHANGED = '21';
+  static readonly PLAYLIST_UPDATE_STATE = 'PLAYLIST_UPDATE_STATE';
+  static readonly PLAYLIST_UPDATE_CHANGED = 'PLAYLIST_UPDATE_CHANGED';
 
   //首页列表更新消息
-  static readonly UPDATE_USER_LIST = '8';
-  static readonly UPDATE_USER_LIST_RECOMMEND = '80';
-  static readonly UPDATE_USER_LIST_CUSTOM = '81';
-  static readonly UPDATE_USER_LIST_RECENT = '82';
-  static readonly UPDATE_USER_LIST_FAVOR = '83';
-  static readonly UPDATE_USER_LIST_SEARCH = '84';
+  static readonly UPDATE_USER_LIST = 'UPDATE_USER_LIST';
+  static readonly UPDATE_USER_LIST_RECOMMEND = 'UPDATE_USER_LIST_RECOMMEND';
+  static readonly UPDATE_USER_LIST_CUSTOM = 'UPDATE_USER_LIST_CUSTOM';
+  static readonly UPDATE_USER_LIST_RECENT = 'UPDATE_USER_LIST_RECENT';
+  static readonly UPDATE_USER_LIST_FAVOR = 'UPDATE_USER_LIST_FAVOR';
+  static readonly UPDATE_USER_LIST_SEARCH = 'UPDATE_USER_LIST_SEARCH';
 
   //首页登录更新消息
-  static readonly LOGIN_RESULT = '9'
-  static readonly LOGIN_RESULT_SUCCESS = '90'
-  static readonly LOGIN_RESULT_FAILED = '91'
+  static readonly LOGIN_RESULT = 'LOGIN_RESULT'
+  static readonly LOGIN_RESULT_SUCCESS = 'LOGIN_RESULT_SUCCESS'
+  static readonly LOGIN_RESULT_FAILED = 'LOGIN_RESULT_FAILED'
   /**
    * PLAYER LIST
    */
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/entryability/EntryAbility.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/entryability/EntryAbility.ets
index 9656d540e85b25d9949c4bf54628a1e467809691..0fe7f642283cae95ed49690dc6f2c08c47d6ace3 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/entryability/EntryAbility.ets
@@ -19,12 +19,53 @@ import UIAbility from '@ohos.app.ability.UIAbility';
 import Want from '@ohos.app.ability.Want';
 import window from '@ohos.window';
 import PlayerManager from '../manager/PlayerManager';
+import rpc from '@ohos.rpc';
+import HttpManager from '../manager/HttpManager';
+
+const TAG: string = 'EntryAbility';
 
 export default class EntryAbility extends UIAbility {
   onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
-    AppStorage.setOrCreate('APPContext',this.context);
-    AppStorage.setOrCreate('PlayerManager', new PlayerManager());
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
+    AppStorage.setOrCreate('APPContext', this.context);
+    let aPlayerManager: PlayerManager = new PlayerManager();
+    AppStorage.setOrCreate('PlayerManager', aPlayerManager);
+    try {
+      this.callee.on('play', (data: rpc.MessageSequence) => {
+        aPlayerManager.resume();
+        return null;
+      });
+      this.callee.on('pause', (data: rpc.MessageSequence) => {
+        aPlayerManager.pause();
+        return null;
+      });
+      this.callee.on('prev', (data: rpc.MessageSequence) => {
+        aPlayerManager.previous();
+        return null;
+      });
+      this.callee.on('next', (data: rpc.MessageSequence) => {
+        aPlayerManager.next();
+        return null;
+      });
+      this.callee.on('playMode', (data: rpc.MessageSequence) => {
+        aPlayerManager.setPlayMode();
+        return null;
+      });
+      this.callee.on('setFavor', (data: rpc.MessageSequence) => {
+        HttpManager.getInstance().set_favourite();
+        return null;
+      });
+      this.callee.on('formId', (data: rpc.MessageSequence) => {
+        let params: Record<string, string> = JSON.parse(data.readString());
+        if (params.formId !== undefined) {
+          console.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));
+    }
+    console.info(TAG, 'Ability onCreate');
   }
 
   onWindowStageCreate(windowStage: window.WindowStage): void {
@@ -39,6 +80,19 @@ export default class EntryAbility extends UIAbility {
     });
   }
 
+  onDestroy(): void {
+    try {
+      this.callee.off('play');
+      this.callee.off('pause');
+      this.callee.off('prev');
+      this.callee.off('next');
+      this.callee.off('formId');
+      this.callee.off('playMode');
+    } catch (error) {
+      console.error('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');
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/entryformability/EntryFormAbility.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/entryformability/EntryFormAbility.ets
new file mode 100644
index 0000000000000000000000000000000000000000..14f20a504136a5928c37ae96ced4fa68e047312f
--- /dev/null
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/entryformability/EntryFormAbility.ets
@@ -0,0 +1,111 @@
+/*
+ * Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { formBindingData, FormExtensionAbility, formInfo } from '@kit.FormKit';
+import { Want } from '@kit.AbilityKit';
+import Base from '@ohos.base';
+import formProvider from '@ohos.app.form.formProvider';
+import type fileFs from '@ohos.file.fs';
+import fs from '@ohos.file.fs';
+import http from '@ohos.net.http';
+
+const TAG: string = 'EntryFormAbility';
+
+export default class EntryFormAbility extends FormExtensionAbility {
+
+  onAddForm(want: Want) {
+    // Called to return a FormBindingData object.
+    class DataObj1 {
+      formId: string = '';
+    }
+
+    let dataObj1 = new DataObj1();
+    if (want.parameters && want.parameters['ohos.extra.param.key.form_identity'] !== undefined) {
+      let formId = want.parameters['ohos.extra.param.key.form_identity'].toString();
+      dataObj1.formId = formId;
+    }
+    console.info("PlayerManager EntryFormAbility formId：" + dataObj1.formId);
+    return formBindingData.createFormBindingData(dataObj1);
+  }
+
+  onCastToNormalForm(formId: string) {
+    // Called when the form provider is notified that a temporary form is successfully
+    // converted to a normal form.
+  }
+
+  onUpdateForm(formId: string) {
+    // Called to notify the form provider to update a specified form.
+  }
+
+  onFormEvent(formId: string, message: string) {
+    // 注意：FormExtensionAbility在触发生命周期回调时被拉起，仅能在后台存在5秒
+    // 建议下载能快速下载完成的小文件，如在5秒内未下载完成，则此次网络图片无法刷新至卡片页面上
+    let params: Record<string, string> = JSON.parse(message)
+    console.info(TAG, "url is:" + params.info);
+    let tempDir = this.context.getApplicationContext().tempDir;
+    let fileName = 'file' + Date.now();
+    let tmpFile = tempDir + '/' + fileName;
+
+    let httpRequest = http.createHttp()
+    httpRequest.request(params.info, (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;
+        } catch (e) {
+          console.error(TAG, `openSync failed: ${JSON.stringify(e as Base.BusinessError)}`);
+        }
+
+        class FormDataClass {
+          imgName: string = fileName;
+          formImages: object = fileInfo;
+        }
+
+        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)}`);
+      }
+      httpRequest.destroy();
+    })
+  }
+
+  onRemoveForm(formId: string) {
+    // Called to notify the form provider that a specified form has been destroyed.
+  }
+
+  onAcquireFormState(want: Want) {
+    // 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/PlayerManager.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/manager/PlayerManager.ets
index 0f17db0fd7480d3af08d0b93b441971113f8a04d..a9e96f8c019dc7d0bfb44d3f6da4351316618623 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/manager/PlayerManager.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/manager/PlayerManager.ets
@@ -25,10 +25,14 @@ import wantAgent, { WantAgent } from '@ohos.app.ability.wantAgent';
 import common from '@ohos.app.ability.common';
 import HttpManager from './HttpManager';
 import PlayListData from '../model/PlayListData';
+import Base from '@ohos.base';
+import formProvider from '@ohos.app.form.formProvider';
+import formBindingData from '@ohos.app.form.formBindingData';
 
 
 export default class PlayerManager {
   private tag: string = 'PlayerManager';
+  private formId: string = '1234567890';
   private isSeek: boolean = false;
   private avPlayer: media.AVPlayer | undefined = undefined;
   private list: AudioData[] = [];
@@ -36,11 +40,11 @@ export default class PlayerManager {
   private favourList: AudioData[] = [];
   private currentTime: number = 0;
   private currentDuration: number = 0;
-  private item: AudioData = new AudioData('', '', '');
+  private item: AudioData = new AudioData('未播放', '--', '');
   private listPosition: number = 0;
   private state: string = ServerConstants.PLAYER_STATE_UNKNOWN;
   private listTitle: string = ServerConstants.LIST_SONG_NO_PLAYING;
-  private playMode: number | undefined = PLAY_MODE.REPEAT;
+  private playMode: number = PLAY_MODE.REPEAT;
   private shuffleIndex: number[] = [];
   private emitterOptions: emitter.Options = {
     priority: emitter.EventPriority.HIGH
@@ -91,10 +95,11 @@ export default class PlayerManager {
       emitter.emit(ServerConstants.MAIN_UPDATE_STATE, this.emitterOptions, eventData);
       emitter.emit(ServerConstants.DETAIL_UPDATE_STATE, this.emitterOptions, eventData);
       emitter.emit(ServerConstants.PLAYLIST_UPDATE_STATE, this.emitterOptions, eventData);
+      this.updateCard();
       switch (state) {
         case ServerConstants.PLAYER_STATE_IDLE: // 成功调用reset接口后触发该状态机上报
           console.info('PlayerManager state idle called.');
-        //avPlayer.release(); // 调用release接口销毁实例对象
+          //avPlayer.release(); // 调用release接口销毁实例对象
           break;
         case ServerConstants.PLAYER_STATE_INITIALIZED: // avplayer 设置播放源后触发该状态上报
           console.info('PlayerManager state initialized called.');
@@ -114,12 +119,12 @@ export default class PlayerManager {
           break;
         case ServerConstants.PLAYER_STATE_COMPLETED: // 播放结束后触发该状态机上报
           console.info('PlayerManager state completed called.');
-        //avPlayer.stop(); //调用播放结束接口
+          //avPlayer.stop(); //调用播放结束接口
           this.next();
           break;
         case ServerConstants.PLAYER_STATE_STOPPED: // stop接口成功调用后触发该状态机上报
           console.info('PlayerManager state stopped called.');
-        //this.stopContinuousTask();
+          //this.stopContinuousTask();
           this.currentTime = 0;
           Logger.info(this.tag, 'Stop:' + this.item.title);
           avPlayer.reset(); // 调用reset接口初始化avplayer状态
@@ -317,6 +322,7 @@ export default class PlayerManager {
         this.playMode = PLAY_MODE.REPEAT;
         break;
     }
+    this.updatePlayMode();
     return this.playMode;
   }
 
@@ -324,12 +330,18 @@ export default class PlayerManager {
     return this.item;
   }
 
+  setFormId(formId: string) {
+    this.formId = formId;
+    this.updateCard();
+  }
+
   setItemQuality(quality: string) {
     this.item.quality = quality;
   }
 
   setItemFavor(isFavor: boolean) {
     this.item.isFavor = isFavor;
+    this.updateCard();
   }
 
   setExploreList(aPlayListData: PlayListData) {
@@ -349,9 +361,6 @@ export default class PlayerManager {
   }
 
   getPlayMode(): number {
-    if (this.playMode === undefined) {
-      return PLAY_MODE.REPEAT;
-    }
     return this.playMode;
   }
 
@@ -445,5 +454,29 @@ export default class PlayerManager {
       console.error(`PlayerManager terminateSelf failed, code is ${code}, message is ${message}`);
     }
   }
+
+  updateCard() {
+    let formData: Record<string, AudioData| string> = {
+      'audioItem': this.item,
+      'isPlaying': this.state,
+    };
+    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)}`);
+    })
+  }
+  updatePlayMode() {
+    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)}`);
+    })
+  }
 }
 
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/widget/pages/WidgetCard.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/widget/pages/WidgetCard.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f0f8ad3ea8291e663dc0097177a52aa73b8ba04c
--- /dev/null
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/widget/pages/WidgetCard.ets
@@ -0,0 +1,275 @@
+/*
+ * Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import AudioData from '../../model/AudioData';
+import ServerConstants from '../../constants/ServerConstants';
+import { PLAY_MODE } from '../../constants/PlayMode';
+
+let storageUpdateByMsg = new LocalStorage();
+const TAG: string = 'MusicWidgetCard'
+
+@Entry(storageUpdateByMsg)
+@Component
+struct WidgetCard {
+  /*
+   * The display priority value is 1.
+   */
+  readonly DISPLAY_PRIORITY_ONE: number = 1;
+  /*
+   * The display priority value is 2.
+   */
+  readonly DISPLAY_PRIORITY_TWO: number = 2;
+  /*
+   * The width or height full percentage setting.
+   */
+  readonly FULL_PERCENT: string = '100%';
+  /*
+   * The action type.
+   */
+  readonly ACTION_TYPE: string = 'router';
+  /*
+   * The ability name.
+  */
+  readonly ABILITY_NAME: string = 'EntryAbility';
+  /*
+   * The maxLinesValue.
+   */
+  readonly MAX_LINES_VALUE: number = 1;
+  @LocalStorageProp('formId') formId: string = '';
+  @LocalStorageProp('audioItem') audioItem: AudioData = new AudioData('未播放', '--', '')
+  @LocalStorageProp('isPlaying') isPlaying: string = ServerConstants.PLAYER_STATE_UNKNOWN;
+  @LocalStorageProp('imgName') imgName: string = '';
+  private downloadImgId: string = ''
+  @LocalStorageProp('playMode') playMode: number = PLAY_MODE.REPEAT;
+
+  aboutToAppear(): void {
+    postCardAction(this, {
+      'action': 'call',
+      'abilityName': this.ABILITY_NAME,
+      'params': {
+        'method': 'formId',
+        'formId': this.formId,
+      }
+    });
+  }
+
+  build() {
+    Stack({ alignContent: Alignment.TopStart }) {
+      Row() {
+      }
+      .width(this.FULL_PERCENT)
+      .height(this.FULL_PERCENT)
+      .displayPriority(this.DISPLAY_PRIORITY_ONE)
+      .backgroundImage('memory://' + this.imgName)
+      .backgroundImageSize(ImageSize.Cover)
+
+      Column()
+        .width(this.FULL_PERCENT)
+        .height(this.FULL_PERCENT)
+        .backgroundColor(Color.White)
+        .opacity(0.9)
+
+      Row() {
+        Column() {
+          Row()
+            .width(128)
+            .height(128)
+            .borderRadius(64)
+            .margin(8)
+            .shadow({ radius: 2, color: Color.Gray })
+            .backgroundImage('memory://' + this.imgName)
+            .backgroundImageSize(ImageSize.Cover)
+            .onClick(() => {
+              postCardAction(this, {
+                action: this.ACTION_TYPE,
+                abilityName: this.ABILITY_NAME,
+              });
+            })
+        }
+        .justifyContent(FlexAlign.Center)
+        .height(this.FULL_PERCENT)
+
+        Column() {
+          Row() {
+            Column() {
+              Text(this.audioItem.title)
+                .fontSize(32)
+                .fontColor($r('app.color.information_title_font'))
+                .fontWeight(FontWeight.Medium)
+                .maxLines(this.MAX_LINES_VALUE)
+                .textOverflow({ overflow: TextOverflow.Ellipsis })
+              Text(this.audioItem.artist)
+                .fontSize(24)
+                .fontColor($r('app.color.item_text_font'))
+                .fontWeight(FontWeight.Regular)
+                .margin({ top: 4 })
+                .maxLines(this.MAX_LINES_VALUE)
+                .textOverflow({ overflow: TextOverflow.Ellipsis })
+            }
+            .justifyContent(FlexAlign.SpaceEvenly)
+            .alignItems(HorizontalAlign.Start)
+            .margin({ left: 8, right: 8 })
+            .width('80%')
+            .onClick(() => {
+              postCardAction(this, {
+                action: this.ACTION_TYPE,
+                abilityName: this.ABILITY_NAME,
+              });
+            })
+
+            Image(this.audioItem.isFavor ? $r('app.media.heart_fill') : $r('app.media.heart'))
+              .width(48)
+              .height(48)
+              .onClick(() => {
+                this.onSetFavor()
+              })
+          }
+          .alignItems(VerticalAlign.Top)
+          .justifyContent(FlexAlign.SpaceBetween)
+          .width(this.FULL_PERCENT)
+
+          Row() {
+            Image(this.playMode === PLAY_MODE.REPEAT ? $r('app.media.repeat') : (this.playMode === PLAY_MODE.REPEAT1 ? $r('app.media.repeat_1') : $r('app.media.shuffle')))
+              .width(64)
+              .height(64)
+              .padding(4)
+              .onClick(() => {
+                this.setPlayMode();
+              })
+
+            Image($r('app.media.backward_end_fill'))
+              .width(64)
+              .height(64)
+              .padding(4)
+              .onClick(() => {
+                this.onPreviousClick()
+              })
+            if (this.isPlaying === ServerConstants.PLAYER_STATE_PLAYING) {
+              Image($r('app.media.pause'))
+                .width(64)
+                .height(64)
+                .padding(8)
+                .onClick(() => {
+                  this.onPauseClick();
+                })
+                .onAppear(() => {
+                  if (this.audioItem.id !== '') {
+                    if (this.downloadImgId === this.audioItem.id) {
+                      return;
+                    }
+                    this.downloadImgId = this.audioItem.id;
+                    postCardAction(this, {
+                      action: 'message',
+                      params: {
+                        info: ServerConstants.SONG_IMAGE_URL + this.audioItem.id
+                      }
+                    });
+                  }
+                })
+            } else {
+              Image($r('app.media.play_fill'))
+                .width(64)
+                .height(64)
+                .padding(4)
+                .onClick(() => {
+                  this.onPlayClick();
+                })
+            }
+
+            Image($r('app.media.forward_end_fill'))
+              .width(64)
+              .height(64)
+              .padding(4)
+              .onClick(() => {
+                this.onNextClick()
+              })
+
+          }
+          .justifyContent(FlexAlign.SpaceBetween)
+          .width(this.FULL_PERCENT)
+        }
+        .width('60%')
+        .height(this.FULL_PERCENT)
+        .justifyContent(FlexAlign.SpaceEvenly)
+      }
+      .width(this.FULL_PERCENT)
+      .justifyContent(FlexAlign.SpaceEvenly)
+      .displayPriority(this.DISPLAY_PRIORITY_TWO)
+    }
+  }
+
+  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 {
+    postCardAction(this, {
+      'action': 'call',
+      'abilityName': this.ABILITY_NAME,
+      'params': {
+        'method': 'next'
+      }
+    });
+  }
+
+  onSetFavor(): void {
+    postCardAction(this, {
+      'action': 'call',
+      'abilityName': this.ABILITY_NAME,
+      'params': {
+        'method': 'setFavor'
+      }
+    });
+  }
+}
\ No newline at end of file
diff --git a/scenario/MusicPlayerOnline/entry/src/main/module.json5 b/scenario/MusicPlayerOnline/entry/src/main/module.json5
index 465a2964803520e78f743ce2bc9f6439c7f593ff..20bdc85428cc4546f462291bc9749eb16b142740 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/module.json5
+++ b/scenario/MusicPlayerOnline/entry/src/main/module.json5
@@ -37,15 +37,31 @@
         ]
       }
     ],
-    "requestPermissions":[
+    "extensionAbilities": [
       {
-        "name" : "ohos.permission.INTERNET",
+        "name": "EntryFormAbility",
+        "srcEntry": "./ets/entryformability/EntryFormAbility.ets",
+        "label": "$string:EntryFormAbility_label",
+        "description": "$string:EntryFormAbility_desc",
+        "type": "form",
+        "metadata": [
+          {
+            "name": "ohos.extension.form",
+            "resource": "$profile:form_config"
+          }
+        ]
+      }
+    ],
+    "requestPermissions": [
+      {
+        "name": "ohos.permission.INTERNET",
         "reason": "$string:EntryAbility_desc",
         "usedScene": {
           "abilities": [
-            "EntryAbility"
+            "EntryAbility",
+            "EntryFormAbility"
           ],
-          "when":"inuse"
+          "when": "inuse"
         }
       },
       {
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/base/element/color.json b/scenario/MusicPlayerOnline/entry/src/main/resources/base/element/color.json
index 3c712962da3c2751c2b9ddb53559afcbd2b54a02..97aaf78a32642d6d14ca6566ed0e1984b0794421 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/resources/base/element/color.json
+++ b/scenario/MusicPlayerOnline/entry/src/main/resources/base/element/color.json
@@ -3,6 +3,22 @@
     {
       "name": "start_window_background",
       "value": "#FFFFFF"
+    },
+    {
+      "name": "information_title_font",
+      "value": "#E6000000"
+    },
+    {
+      "name": "title_font",
+      "value": "#E5FFFFFF"
+    },
+    {
+      "name": "item_text_font",
+      "value": "#99000000"
+    },
+    {
+      "name": "image_info_background",
+      "value": "#FFFFFF"
     }
   ]
 }
\ No newline at end of file
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/base/element/float.json b/scenario/MusicPlayerOnline/entry/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..e3bc4402029fad20632cc7acb63cc02ad28b90a3
--- /dev/null
+++ b/scenario/MusicPlayerOnline/entry/src/main/resources/base/element/float.json
@@ -0,0 +1,40 @@
+{
+  "float": [
+    {
+      "name": "card_title_font_size",
+      "value": "14fp"
+    },
+    {
+      "name": "item_font_size",
+      "value": "12fp"
+    },
+    {
+      "name": "maximum_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "item_margin_top",
+      "value": "2vp"
+    },
+    {
+      "name": "image_margin_bottom",
+      "value": "8vp"
+    },
+    {
+      "name": "info_column_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "info_column_width",
+      "value": "106vp"
+    },
+    {
+      "name": "info_column_height",
+      "value": "120vp"
+    },
+    {
+      "name": "image_border_radius",
+      "value": "8vp"
+    }
+  ]
+}
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/base/element/string.json b/scenario/MusicPlayerOnline/entry/src/main/resources/base/element/string.json
index b901aa71c8cea68e542869ad9f521a7c94733186..c4bf3c885d0a6d88b9a850ad5fbd5ccde5111ec0 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/resources/base/element/string.json
+++ b/scenario/MusicPlayerOnline/entry/src/main/resources/base/element/string.json
@@ -43,6 +43,30 @@
     {
       "name": "exit",
       "value": "退出"
+    },
+    {
+      "name": "EntryFormAbility_desc",
+      "value": "form_description"
+    },
+    {
+      "name": "EntryFormAbility_label",
+      "value": "form_label"
+    },
+    {
+      "name": "widget_desc",
+      "value": "This is a service widget."
+    },
+    {
+      "name": "widget_display_name",
+      "value": "widget"
+    },
+    {
+      "name": "card_title",
+      "value": "Title"
+    },
+    {
+      "name": "introduction",
+      "value": "Introduction"
     }
   ]
 }
\ No newline at end of file
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/ic_widget.png b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/ic_widget.png
new file mode 100644
index 0000000000000000000000000000000000000000..c13bb4d340435b2e8d8fd90660ffc9916e1f6d68
Binary files /dev/null and b/scenario/MusicPlayerOnline/entry/src/main/resources/base/media/ic_widget.png differ
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/base/profile/form_config.json b/scenario/MusicPlayerOnline/entry/src/main/resources/base/profile/form_config.json
new file mode 100644
index 0000000000000000000000000000000000000000..1354d3b1dc9fdf885aa44de82c2fb42ea5e5f0c3
--- /dev/null
+++ b/scenario/MusicPlayerOnline/entry/src/main/resources/base/profile/form_config.json
@@ -0,0 +1,25 @@
+{
+  "forms": [
+    {
+      "name": "widget",
+      "displayName": "$string:widget_display_name",
+      "description": "$string:widget_desc",
+      "src": "./ets/widget/pages/WidgetCard.ets",
+      "uiSyntax": "arkts",
+      "window": {
+        "designWidth": 720,
+        "autoDesignWidth": true
+      },
+      "colorMode": "auto",
+      "isDynamic": true,
+      "isDefault": true,
+      "updateEnabled": false,
+      "scheduledUpdateTime": "10:30",
+      "updateDuration": 1,
+      "defaultDimension": "2*4",
+      "supportDimensions": [
+        "2*4"
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/en_US/element/string.json b/scenario/MusicPlayerOnline/entry/src/main/resources/en_US/element/string.json
index ac57a47fc9858cf918b9cce4e890b7b125489730..84f1d2dd6cd19f5777517860b34dfc5966fb879f 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/resources/en_US/element/string.json
+++ b/scenario/MusicPlayerOnline/entry/src/main/resources/en_US/element/string.json
@@ -39,6 +39,30 @@
     {
       "name": "exit",
       "value": "Exit"
+    },
+    {
+      "name": "EntryFormAbility_desc",
+      "value": "form_description"
+    },
+    {
+      "name": "EntryFormAbility_label",
+      "value": "form_label"
+    },
+    {
+      "name": "widget_desc",
+      "value": "This is a service widget."
+    },
+    {
+      "name": "widget_display_name",
+      "value": "widget"
+    },
+    {
+      "name": "card_title",
+      "value": "Title"
+    },
+    {
+      "name": "introduction",
+      "value": "Introduction"
     }
   ]
 }
\ No newline at end of file
diff --git a/scenario/MusicPlayerOnline/entry/src/main/resources/zh_CN/element/string.json b/scenario/MusicPlayerOnline/entry/src/main/resources/zh_CN/element/string.json
index 37be2ffa4a825efec53e74dfabf7130fa677607f..7233afb32d1f8b1732966e42dbf1c79368cf041e 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/resources/zh_CN/element/string.json
+++ b/scenario/MusicPlayerOnline/entry/src/main/resources/zh_CN/element/string.json
@@ -39,6 +39,30 @@
     {
       "name": "exit",
       "value": "退出"
+    },
+    {
+      "name": "EntryFormAbility_desc",
+      "value": "form_description"
+    },
+    {
+      "name": "EntryFormAbility_label",
+      "value": "form_label"
+    },
+    {
+      "name": "widget_desc",
+      "value": "This is a service widget."
+    },
+    {
+      "name": "widget_display_name",
+      "value": "widget"
+    },
+    {
+      "name": "card_title",
+      "value": "Title"
+    },
+    {
+      "name": "introduction",
+      "value": "Introduction"
     }
   ]
 }
\ No newline at end of file