update

Author: devnamdev2003

public/assets/img/music_icon/waves.gif

@@ -12,8 +12,8 @@
   <!-- Songs List -->
   <div *ngFor="let song of songs()"
     class="flex items-center gap-4 py-4 px-2 rounded-md hover:bg-[var(--list-hover)] transition-all cursor-pointer"
-    [class.bg-[var(--list-hover)]]="currentSong?.url === getSongUrl(song)">
-    <div class="relative w-12 h-12 rounded-md overflow-hidden group" (click)="playSong(getSongUrl(song), song)">
+    (click)="playSong(getSongUrl(song), song)">
+    <div class="relative w-12 h-12 rounded-md overflow-hidden group">
       <img [src]="song.image?.[2]?.url || 'assets/img/music_icon/icons8-airpods-pro-max-100.png'" alt="{{ song.name }}"
         class="w-full h-full object-cover group-hover:brightness-75 transition-all duration-300 ease-in-out"
         [class.brightness-75]="currentSong?.url === getSongUrl(song)" />
@@ -22,14 +22,21 @@
         class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"
         [class.opacity-100]="currentSong?.url === getSongUrl(song)">
         <img
-          [src]="currentSong?.url === getSongUrl(song)? 'assets/img/music_icon/icons8-pause-50.png' :'assets/img/music_icon/icons8-play-50.png'"
+          [src]="((audio?.paused)) ? 'assets/img/music_icon/icons8-play-50.png' : currentSong?.url === getSongUrl(song) ?'assets/img/music_icon/icons8-pause-50.png' : 'assets/img/music_icon/icons8-play-50.png'"
           alt="Play" class="w-6 h-6 object-contain" style="filter: invert(100%);" />
       </div>
     </div>
 
     <div class="flex-1">
-      <div class="font-medium text-[var(--color-text)]">{{ song.name }}</div>
-      <div class="text-sm text-[var(--color-gray-500)]">{{ song.artists.primary[0]?.name || 'Unknown Artist' }}</div>
+      <div class="flex items-center space-x-2 font-medium"
+        [ngClass]="currentSong?.url === getSongUrl(song) ? 'text-[var(--theme-color)]' : 'text-[var(--color-text)]'">
+        <img *ngIf="currentSong?.url === getSongUrl(song)" src="assets/img/music_icon/waves.gif"
+          alt="playing animation" class="w-5 h-5" />
+        <span>{{ song.name }}</span>
+      </div>
+      <div class="text-sm text-[var(--color-gray-500)]">
+        {{ song.artists.primary[0]?.name || 'Unknown Artist' }}
+      </div>
     </div>
 
     <div class="text-sm text-[var(--color-gray-500)]">{{ formatTime(song.duration) }}</div>
@@ -43,7 +50,8 @@
   [ngStyle]="{'background-color': 'var(--color-surface)', 'color': 'var(--color-text)', 'z-index': '70'}">
 
   <!-- Song Image -->
-  <img (click)="openPlayerModal()" [src]="currentSong.image?.[2]?.url || 'assets/img/music_icon/icons8-airpods-pro-max-100.png'" alt="Cover"
+  <img (click)="openPlayerModal()"
+    [src]="currentSong.image?.[2]?.url || 'assets/img/music_icon/icons8-airpods-pro-max-100.png'" alt="Cover"
     class="w-12 h-12 rounded-md shadow-md shrink-0" />
 
   <!-- Song Info + Progress -->
@@ -62,7 +70,7 @@
         </div>
 
         <!-- Play/Pause Button -->
-        <button (click)="playSong(currentSong.url, currentSong); $event.stopPropagation();"
+        <button (click)="playSong(currentSong.url, currentSong, true); $event.stopPropagation();"
           class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-[var(--list-hover)] active:scale-90 transition-transform">
           <img
             [src]="audio?.paused ? 'assets/img/music_icon/icons8-play-50.png' : 'assets/img/music_icon/icons8-pause-50.png'"
@@ -159,7 +167,7 @@ <h2 class="text-xl md:text-2xl font-semibold text-[var(--color-text)] truncate">
       </button>
 
       <!-- Play/Pause -->
-      <button (click)="playSong(currentSong.url, currentSong)"
+      <button (click)="playSong(currentSong.url, currentSong, true)"
         class="bg-[var(--theme-color)] p-4 rounded-full active:scale-90 transition-transform">
         <img [src]="audio?.paused
           ? 'assets/img/music_icon/icons8-play-50.png'

src/app/features/music/music.component.html

@@ -99,13 +99,19 @@ export class MusicComponent implements OnDestroy {
    *
    * @param url URL of the song to play
    * @param song Song object
+   * @param isbuttonClick Indicates if the play/pause was triggered by a button click
    */
-  playSong(url: string, song: any): void {
+  playSong(url: string, song: any, isbuttonClick: boolean = false): void {
     if (!this.isBrowser) return;
     if (!this.audio) this.audio = new Audio();
 
     if (this.currentSong?.url === url) {
-      this.audio.paused ? this.audio.play() : this.audio.pause();
+      if (isbuttonClick) {
+        this.audio.paused ? this.audio.play() : this.audio.pause();
+      }
+      else {
+        this.audio.play();
+      }
     } else {
       this.audio.src = url;
       this.audio.play();