diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/constants/AppConstants.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/constants/AppConstants.ets
index 29ed141e64136daa8268f2c3af1503e7d2b97a21..98da899a8ba4b5e93decf573036fd6585405cd6b 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/constants/AppConstants.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/constants/AppConstants.ets
@@ -71,9 +71,13 @@ export default class AppConstants {
    */
   static readonly REMOVE_FROM_PLAYLIST_URL = 'remove_from_playlist/';
   /**
-   * get all singer list
+   * get all singers
    */
-  static readonly ALL_SINGER_LIST_URL = 'all_singer_list/';
+  static readonly ALL_SINGERS_URL = 'all_singers/';
+  /**
+   * get all songs by singer
+   */
+  static readonly ALL_SONGS_BY_SINGER_URL = 'all_songs_by_singer/';
 
   /**
    * Login URL
@@ -123,6 +127,7 @@ export default class AppConstants {
   static readonly UPDATE_USER_LIST_FAVOR = 'UPDATE_USER_LIST_FAVOR';
   static readonly UPDATE_USER_LIST_SEARCH = 'UPDATE_USER_LIST_SEARCH';
   static readonly UPDATE_ALL_SINGER_LIST = 'UPDATE_ALL_SINGER_LIST';
+  static readonly UPDATE_ALL_SINGER_LIST_ITEM = 'UPDATE_ALL_SINGER_LIST_ITEM';
 
   //当前查看歌单更新
   static readonly UPDATE_EXPLORE_LIST = 'UPDATE_EXPLORE_LIST';
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/manager/HttpManager.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/manager/HttpManager.ets
index 9331bc67569a7738578446f224aaa1b4e2d16e79..c3ca89753287a12edb7289b1f44baa691561465c 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/manager/HttpManager.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/manager/HttpManager.ets
@@ -327,7 +327,7 @@ export default class HttpManager {
     try {
       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,
+        song_id + '/' + encodeURIComponent(playlist_name),
         {
           method: http.RequestMethod.GET,
           header: {
@@ -378,9 +378,10 @@ export default class HttpManager {
     }
     let msg: string = ''
     try {
-      Logger.info(this.tag, '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,
+        song_id + '/' + encodeURIComponent(playlist_name),
         {
           method: http.RequestMethod.GET,
           header: {
@@ -679,7 +680,7 @@ export default class HttpManager {
   searchSongsFromServer(search_word: string) {
     try {
       this.httpRequest.request(AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.SEARCH_SONG_URL +
-        search_word,
+      encodeURIComponent(search_word),
         {
           method: http.RequestMethod.GET,
           header: {
@@ -765,10 +766,9 @@ export default class HttpManager {
   }
 
   getAllSinger(start: number, end: number) {
-
     try {
-      this.httpRequest.request(AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.ALL_SINGER_LIST_URL +
-        start + '/' + end,
+      this.httpRequest.request(AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.ALL_SINGERS_URL + start +
+        '/' + end,
         {
           method: http.RequestMethod.GET,
           header: {
@@ -779,8 +779,52 @@ export default class HttpManager {
           if (!err) {
             Logger.info(this.tag, 'HttpResponse getAllSinger Result:' + data.result);
             try {
-              const jsonObject: object = JSON.parse(data.result as string);
+              let jsonObject: object = JSON.parse(data.result as string);
               let playingLists: PlayListData[] = [];
+              Object.keys(jsonObject).forEach((key) => {
+                let item = new PlayListData(key, $r('app.media.icon'), '', [], '');
+                item.count = jsonObject[key] as number;
+                playingLists.push(item);
+              });
+              let eventData: emitter.EventData = {
+                data: {
+                  "item": playingLists,
+                }
+              };
+              emitter.emit(AppConstants.UPDATE_ALL_SINGER_LIST, this.emitterOptions, eventData);
+            } catch (error) {
+              Logger.error(this.tag, "JSON :", error.message);
+            }
+          } else {
+            Logger.info(this.tag, 'HttpResponse getAllSinger error:' + JSON.stringify(err));
+            prompt.showToast({
+              message: JSON.stringify(err)
+            })
+          }
+        });
+    } catch (err) {
+      Logger.info(this.tag, 'HttpRequest getAllSinger error:' + JSON.stringify(err));
+      prompt.showToast({
+        message: JSON.stringify(err)
+      })
+    }
+  }
+
+  getAllSongsBySinger(singerName: string) {
+    try {
+      this.httpRequest.request(AppStorage.get(AppConstants.SERVER_HOST_PROP) + AppConstants.ALL_SONGS_BY_SINGER_URL +
+      encodeURIComponent(singerName),
+        {
+          method: http.RequestMethod.GET,
+          header: {
+            'Cookie': AppStorage.get(AppConstants.LOGIN_COOKIE)
+          }
+        },
+        (err: Error, data: http.HttpResponse) => {
+          if (!err) {
+            Logger.info(this.tag, 'HttpResponse getAllSongsBySinger Result:' + data.result);
+            try {
+              const jsonObject: object = JSON.parse(data.result as string);
               Object.keys(jsonObject).forEach((key) => {
                 let aPlayingList: AudioData[] = [];
                 Object.keys(jsonObject[key]).forEach((key1) => {
@@ -793,22 +837,25 @@ export default class HttpManager {
                     jsonObject[key][key1].language
                   ));
                 })
-                let item = new PlayListData(key, $r('app.media.icon'),
+                let aPlayListDataItem: PlayListData = new PlayListData(key, $r('app.media.icon'),
                   aPlayingList.length + AppConstants.LIST_SONG_COUNT,
                   aPlayingList, '')
-                playingLists.push(item);
-              });
-              let eventData: emitter.EventData = {
-                data: {
-                  "item": playingLists,
+                if (this.PlayerManager.getExploreList().title === aPlayListDataItem.title) {
+                  this.PlayerManager.setExploreList(aPlayListDataItem);
                 }
-              };
-              emitter.emit(AppConstants.UPDATE_ALL_SINGER_LIST, this.emitterOptions, eventData);
+                let eventData: emitter.EventData = {
+                  data: {
+                    "item": aPlayListDataItem,
+                  }
+                };
+                emitter.emit(AppConstants.UPDATE_ALL_SINGER_LIST_ITEM, this.emitterOptions, eventData);
+              });
             } catch (error) {
               Logger.error(this.tag, "JSON :", error.message);
             }
           } else {
-            Logger.info(this.tag, 'HttpResponse getAllSinger error:' + JSON.stringify(err));
+            Logger.info(this.tag, 'HttpResponse getAllSongsBySinger error:' + JSON.stringify(err));
+            Logger.info(this.tag, singerName);
             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 d7a393663860c9904bdf46889f4afc4c6c0d2e5b..1333ccb4183aa13ad287787784efe49a77df4f61 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/manager/PlayerManager.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/manager/PlayerManager.ets
@@ -30,6 +30,7 @@ import formProvider from '@ohos.app.form.formProvider';
 import formBindingData from '@ohos.app.form.formBindingData';
 import CommonUtils from '../utils/CommonUtils';
 import prompt from '@ohos.promptAction';
+import { audio } from '@kit.AudioKit';
 
 export default class PlayerManager {
   private tag: string = 'PlayerManager';
@@ -41,6 +42,7 @@ export default class PlayerManager {
   private favourList: AudioData[] = [];
   private currentTime: number = 0;
   private currentDuration: number = 0;
+  private lastUpdateProgressTime: number = 0;
   private item: AudioData = new AudioData('未播放', '--', '');
   private listPosition: number = 0;
   private state: string = AppConstants.PLAYER_STATE_UNKNOWN;
@@ -116,8 +118,15 @@ export default class PlayerManager {
     })
     // 状态机变化回调函数
     avPlayer.on('timeUpdate', (time: number) => {
-      this.updatePlayerTime(time);
+      this.currentTime = time;
       this.updateLrcIndex();
+      this.updatePlayerTime();
+
+      let timeInt = Math.floor(time / 1000);
+      if (timeInt !== 0 && timeInt <= this.lastUpdateProgressTime) {
+        return;
+      }
+      this.lastUpdateProgressTime = timeInt;
       this.updateCardProgress();
     })
     avPlayer.on('durationUpdate', (time: number) => {
@@ -177,9 +186,21 @@ export default class PlayerManager {
           break;
       }
       this.updatePlayerState(state);
-      this.updateLrcIndex();
       this.updateCard();
     })
+
+    avPlayer.on('bufferingUpdate', (infoType: media.BufferingInfoType, value: number) => {
+      //Logger.info(this.tag, 'bufferingUpdate called,and infoType value is:' + infoType + ', value is :' + value)
+    })
+
+    avPlayer.on('audioOutputDeviceChangeWithInfo', (data: audio.AudioStreamDeviceChangeInfo) => {
+      Logger.info(this.tag, `${JSON.stringify(data)}`);
+    });
+
+    avPlayer.on('audioInterrupt', (info: audio.InterruptEvent) => {
+      Logger.info(this.tag, 'audioInterrupt called,and InterruptEvent info is:' + info)
+      this.avPlayer?.pause()
+    })
   }
 
   /**
@@ -486,7 +507,7 @@ export default class PlayerManager {
 
   updateLrcIndex() {
     let newLrcIndex = CommonUtils.findLrcIndexByTime(this.item.lrc, this.currentTime, this.lrcIndex)
-    if (newLrcIndex != this.lrcIndex && newLrcIndex != -1) {
+    if (newLrcIndex !== this.lrcIndex && newLrcIndex !== -1) {
       this.lrcIndex = newLrcIndex;
       let eventData: emitter.EventData = {
         data: {
@@ -497,8 +518,7 @@ export default class PlayerManager {
     }
   }
 
-  updatePlayerTime(time: number) {
-    this.currentTime = time;
+  updatePlayerTime() {
     let eventData: emitter.EventData = {
       data: {
         "currentTime": this.currentTime,
@@ -518,8 +538,7 @@ export default class PlayerManager {
     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) {
+    if (this.state === AppConstants.PLAYER_STATE_IDLE) {
       this.lrcIndex = 0;
       this.updateLrcIndex();
     }
@@ -532,6 +551,9 @@ export default class PlayerManager {
     let index = this.list.indexOf(item);
     if (index > -1) {
       this.list.splice(index, 1);
+      if (index < this.listPosition) {
+        this.listPosition -= 1;
+      }
       AppStorage.setOrCreate(AppConstants.PLAYLIST_RECORD, this.list);
       let newShuffleIndex: number[] = [...this.shuffleIndex];
       let shuffleIndex = newShuffleIndex.indexOf(index);
@@ -651,6 +673,7 @@ export default class PlayerManager {
     formProvider.updateForm(this.formId, formMsg).then(() => {
     }).catch((error: Base.BusinessError) => {
       Logger.info(this.tag, `Operation updateForm failed. Cause: ${JSON.stringify(error)}`);
+      this.setFormId('')
     })
   }
 
@@ -665,6 +688,7 @@ export default class PlayerManager {
     formProvider.updateForm(this.formId, formMsg).then(() => {
     }).catch((error: Base.BusinessError) => {
       Logger.info(this.tag, `Operation updateCardPlayMode failed. Cause: ${JSON.stringify(error)}`);
+      this.setFormId('')
     })
   }
 
@@ -680,6 +704,7 @@ export default class PlayerManager {
     formProvider.updateForm(this.formId, formMsg).then(() => {
     }).catch((error: Base.BusinessError) => {
       Logger.info(this.tag, `Operation updateCardProgress failed. Cause: ${JSON.stringify(error)}`);
+      this.setFormId('')
     })
   }
 }
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/model/AllSingerDataSource.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/model/AllSingerDataSource.ets
index 6ff39b7e8f6538fced23eb9f471171d3098999d7..7bcbc67f6d696eb715f5fde154262ce953fcd99b 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/model/AllSingerDataSource.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/model/AllSingerDataSource.ets
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * 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
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/model/PlayListData.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/model/PlayListData.ets
index 046c2f8ba1fc8cbdb29b36f50f4e8bfd7a60b548..d104770269d4c3e99e0ca80e0086b2e2f5875623 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/model/PlayListData.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/model/PlayListData.ets
@@ -33,6 +33,7 @@ export default class PlayListData {
   subTitle: string;
   list: AudioData[] = [];
   isCustom = false;
+  count: number = 0;
 
   constructor(title: string, img: Resource, subTitle: string, list: AudioData[], others?: string) {
     this.title = title;
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/view/AllSinger.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/view/AllSinger.ets
index 9f2881530fb4335fdbcf2306c38696abc3241bd0..6805e766aa45c7da35a9a3be7bdb694ce6557e3d 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/view/AllSinger.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/view/AllSinger.ets
@@ -13,22 +13,21 @@
  * limitations under the License.
  */
 import AppConstants from "../constants/AppConstants";
-import AllSingerDataSource from "../model/AllSingerDataSource";
 import PlayListData from "../model/PlayListData";
 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";
+import AllSingerDataSource from "../model/AllSingerDataSource";
 
 @Component
 export default struct AllSinger {
   private tag = 'AllSinger';
-  @Link isShowSingerList: boolean;
-  @State count: number = 0
-  private aAllSingerDataSource: AllSingerDataSource = new AllSingerDataSource();
   private currentIndex: number = 0;
   private step: number = 100;
+  @State count: number = 0
+  @Link isShowSingerList: boolean;
+  private aAllSingerDataSource: AllSingerDataSource = new AllSingerDataSource();
 
   aboutToAppear() {
     HttpManager.getInstance().getAllSinger(0, this.step);
@@ -36,15 +35,14 @@ export default struct AllSinger {
       if (eventData.data !== undefined && eventData.data.item !== undefined) {
         let list = eventData.data.item as PlayListData[];
         if (list.length === 0) {
-          prompt.showToast({ message: AppConstants.NO_MORE_SINGER });
           return;
         }
-        Logger.info(this.tag, 'UPDATE_ALL_SINGER_LIST size:' + list.length);
         for (let index = 0; index < list.length; index++) {
           this.aAllSingerDataSource.addLastItem(list[index])
         }
         this.currentIndex += this.step;
         this.count = this.aAllSingerDataSource.totalCount();
+        HttpManager.getInstance().getAllSinger(this.currentIndex, this.currentIndex + this.step);
       }
     });
   }
@@ -71,7 +69,7 @@ export default struct AllSinger {
             .fontSize(24)
             .maxLines(1)
             .alignSelf(ItemAlign.Center)
-          Text('(' + this.count.toString() + ')')
+          Text('(' + this.count + ')')
             .fontSize(16)
             .fontColor(Color.Gray)
             .maxLines(1)
@@ -86,11 +84,6 @@ export default struct AllSinger {
           FlowItem() {
             SingerItem({ item })
           }
-          .onAppear(() => {
-            if (index + 10 == this.aAllSingerDataSource.totalCount()) {
-              HttpManager.getInstance().getAllSinger(this.currentIndex, this.currentIndex + this.step);
-            }
-          })
           .backgroundColor(Color.White)
           .borderRadius(12)
         }, (item: string) => item)
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerDetail.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerDetail.ets
index e1c671e561c9eb8fa360ab08d96851007277aad6..e8883da747b3a5b3c529516946f18d032ecef869 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerDetail.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerDetail.ets
@@ -42,13 +42,14 @@ export default struct PlayerDetail {
   @State lrcIndex: number = this.PlayerManager.getLrcIndex();
   @State albumImageContent: boolean = true;
   @State playMode: number = this.PlayerManager.getPlayMode();
-  @State noItem: boolean = false;
   @Link isShowCurrentPlayList: boolean;
   @Link isShowPlayerDetail: boolean;
   @Prop customPlayLists: PlayListData[];
   @Prop loginInfo: string;
   @State listOptions: Array<SelectOption> = [];
   @State inputListName: string = '';
+  @State transFlag: boolean =
+    (this.state === AppConstants.PLAYER_STATE_PLAYING || this.state === AppConstants.PLAYER_STATE_PAUSED);
   private scroller: Scroller = new Scroller()
   private isDialogOpened: boolean = false;
   private songIdToAdd: string = '';
@@ -90,8 +91,7 @@ export default struct PlayerDetail {
 
   aboutToAppear() {
     this.albumImageContent = (AppStorage.get(AppConstants.DETAIL_DEFAULT_SETTING) != AppConstants.TOGGLE_SETTING_ON);
-
-    if (this.lrcIndex - this.indexScrollStep > 0) {
+    if (this.lrcIndex - this.indexScrollStep > 0 && !this.albumImageContent) {
       setTimeout(() => {
         this.scroller.scrollToIndex(this.lrcIndex - this.indexScrollStep, true)
       }, 100)
@@ -112,7 +112,6 @@ export default struct PlayerDetail {
   }
 
   aboutToDisappear() {
-    Logger.info(this.tag, 'aboutToDisappear');
     emitter.off(AppConstants.DETAIL_UPDATE_LRC_INDEX);
     emitter.off(AppConstants.DETAIL_UPDATE_STATE);
     emitter.off(AppConstants.DETAIL_UPDATE_FAVOR_AND_QUALITY);
@@ -213,7 +212,7 @@ export default struct PlayerDetail {
 
 
       Column() {
-        if (!this.noItem) {
+        if (this.transFlag) {
           if (this.albumImageContent) {
             Column() {
               Image(this.item.id ?
@@ -225,7 +224,7 @@ export default struct PlayerDetail {
                 .margin(50)
                 .rotate({ angle: this.currentTime / 100 })
                 .animation({
-                  duration: 100,
+                  duration: (this.currentTime / 100) < 1 ? 0 : 200,
                   curve: Curve.Linear,
                   playMode: PlayMode.Normal
                 })
@@ -234,6 +233,12 @@ export default struct PlayerDetail {
                 .shadow({ radius: 1, color: Color.Gray })
                 .onClick(() => {
                   this.albumImageContent = false;
+                  this.lrcIndex = this.PlayerManager.getLrcIndex();
+                  if (this.lrcIndex - this.indexScrollStep > 0) {
+                    setTimeout(() => {
+                      this.scroller.scrollToIndex(this.lrcIndex - this.indexScrollStep, true)
+                    }, 100)
+                  }
                 })
 
               Row() {
@@ -415,21 +420,26 @@ export default struct PlayerDetail {
   }
 
   updateFavor() {
-    this.item = this.PlayerManager.getItem();
-    this.noItem = false;
+    setTimeout(() => {
+      if (this.item.id === this.PlayerManager.getItem().id) {
+        this.item.isFavor = this.PlayerManager.getItem().isFavor;
+      }
+    }, 1000);
   }
 
   updateLrc() {
-    this.item = this.PlayerManager.getItem();
+    setTimeout(() => {
+      if (this.item.id === this.PlayerManager.getItem().id) {
+        this.item.lrc = this.PlayerManager.getItem().lrc;
+      }
+    }, 1000);
   }
 
   updateLrcIndex(eventData: emitter.EventData) {
     if (eventData !== undefined && eventData.data !== undefined) {
       if (!this.albumImageContent) {
-        if (eventData.data.newLrcIndex != this.lrcIndex && eventData.data.newLrcIndex != -1) {
-          this.lrcIndex = eventData.data.newLrcIndex;
-          this.scroller.scrollToIndex(this.lrcIndex - this.indexScrollStep, true)
-        }
+        this.lrcIndex = eventData.data.newLrcIndex;
+        this.scroller.scrollToIndex(this.lrcIndex - this.indexScrollStep, true)
       }
     }
   }
@@ -437,15 +447,16 @@ export default struct PlayerDetail {
   updateState(eventData: emitter.EventData) {
     if (eventData !== undefined && eventData.data !== undefined) {
       Logger.info(this.tag, 'state:' + eventData.data.state);
-      if (eventData.data.state === AppConstants.PLAYER_STATE_IDLE) {
-        this.noItem = true;
+      if (eventData.data.state === AppConstants.PLAYER_STATE_PREPARED) {
+        setTimeout(() => {
+          this.transFlag = true;
+          this.item = this.PlayerManager.getItem();
+          this.listTitle = this.PlayerManager.getListTitle();
+          this.scroller.scrollToIndex(0, true)
+        }, 1000)
       }
-      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)
+      if (eventData.data.state === AppConstants.PLAYER_STATE_IDLE) {
+        this.transFlag = false;
       }
       this.state = eventData.data.state;
     }
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/view/SingerItem.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/view/SingerItem.ets
index c91a5c259215d50d12e8dc29cf858d5b62a33e7c..3821aeb4414908b02e146775e3a746957d8b51f5 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/view/SingerItem.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/view/SingerItem.ets
@@ -17,6 +17,7 @@ import ItemData from '../model/PlayListData';
 import AppConstants from '../constants/AppConstants';
 import PlayerManager from '../manager/PlayerManager';
 import emitter from '@ohos.events.emitter';
+import HttpManager from '../manager/HttpManager';
 
 /**
  * List item information component.
@@ -37,9 +38,9 @@ export default struct SingerItem {
     Column() {
       Text(this.item.title)
         .fontSize(20)
-        .fontColor(this.item.list.length > 70 ? this.colors[0] : this.item.list.length > 50 ? this.colors[1] :
-          this.item.list.length > 30 ? this.colors[2] :
-            this.item.list.length > 20 ? this.colors[3] : this.item.list.length > 10 ? this.colors[4] : this.colors[5])
+        .fontColor(this.item.count > 70 ? this.colors[0] : this.item.count > 50 ? this.colors[1] :
+          this.item.count > 30 ? this.colors[2] :
+            this.item.count > 20 ? this.colors[3] : this.item.count > 10 ? this.colors[4] : this.colors[5])
         .width(90)
         .textAlign(TextAlign.Center)
         .margin(4)
@@ -51,6 +52,9 @@ export default struct SingerItem {
     .alignItems(HorizontalAlign.Center)
     .clickEffect(AppConstants.CLICK_EFFECT)
     .onClick(() => {
+      if (this.item.list.length === 0) {
+        HttpManager.getInstance().getAllSongsBySinger(this.item.title);
+      }
       this.PlayerManager.setExploreList(this.item);
       emitter.emit(AppConstants.MAIN_SHOW_PLAYLIST, this.emitterOptions);
     })
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 f3e542019bccee652bdf380773bc2573202c168f..d6790282a9e70d26d83f33c34b0c4ddda784d766 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/widget/pages/WidgetCard.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/widget/pages/WidgetCard.ets
@@ -95,12 +95,17 @@ struct WidgetCard {
             .backgroundImage('memory://' + this.imgName)
             .backgroundImageSize(ImageSize.Cover)
             .rotate({ angle: this.currentTime / 100 })
-            .onClick(() => {
-              this.onItemClick(this.ACTION_TYPE_ROUTER, this.formId);
+            .animation({
+              duration: (this.currentTime / 100) < 1 ? 0 : 1000,
+              curve: Curve.Linear,
+              playMode: PlayMode.Normal
             })
         }
         .alignContent(Alignment.Center)
         .height(this.FULL_PERCENT)
+        .onClick(() => {
+          this.onItemClick(this.ACTION_TYPE_ROUTER, this.formId);
+        })
 
         Column() {
           Row() {