The blob url of song can not be decoded

this is my songDetailComponent:

import { Component, Input, OnInit } from '@angular/core';
import { SongApiService } from '../song-api.service';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';


@Component({
  selector: 'app-song-detail',
  standalone: true,
  imports: [CommonModule, FormsModule, RouterLink],
  templateUrl: './song-detail.component.html',
  styleUrl: './song-detail.component.css'
})

export class SongDetailComponent implements OnInit {

  @Input() songId: number = 0;

  song: any;
  songFileUrl!: SafeUrl;
  

  constructor(
    private songApiService: SongApiService,
    private route: ActivatedRoute,
    private sanitizer: DomSanitizer
    ) {}


  ngOnInit(): void {
    this.route.params.subscribe(params => {
      const songId = +params['id'];
      // const songPath = +params['musicPath']
      this.getSongDetails(songId);
    });
  }

  getSongDetails(songId: number): void {
    this.songApiService.getDetail(songId).subscribe(response => {

      this.song = response.song;
      const fileBytes = response.fileBytes;
      console.log('File Bytes:', fileBytes);
      const blob = new Blob([fileBytes], { type: 'audio/mpeg' });
      const url = URL.createObjectURL(blob);
      this.songFileUrl = this.sanitizer.bypassSecurityTrustUrl(url);
      console.log('Safe URL:', this.songFileUrl);

      console.log(this.songFileUrl);
    });
  }
}

this is my .net service:

    public async Task<SongWithFileDto> GetSongByIdAsync (int id) {
        var song = await _songRepository.GetSongByIdAsync(id) ?? throw new KeyNotFoundException("Song not found");

        if (!System.IO.File.Exists(song.MusicPath)) {
            throw new  FileNotFoundException("File Not Found");
        }
        var fileBytes = await File.ReadAllBytesAsync(song.MusicPath);

        Console.WriteLine($"File Path: {song.MusicPath}");
        Console.WriteLine($"File Size: {fileBytes.Length} bytes");

        return new SongWithFileDto {
            Song = song,
            FileBytes = fileBytes
        };

    }
    

this is my html:

<div *ngIf="song" class="container mt-4">
  <div class="card">
    <div class="card-body">
      <h2 class="card-title">{{ song.MusicName }}</h2>
      <p class="card-text"><strong>Artist:</strong> {{ song.Genre }}</p>
      <p class="card-text"><strong>Album:</strong> {{ song.Album }}</p>
      <p class="card-text"><strong>Release Date:</strong> {{ song.ReleaseDate }}</p>

      <audio *ngIf="songFileUrl" controls class="w-100 mt-3">
        <source [src]="songFileUrl" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>

      <div class="mt-3">
        <a [routerLink]="['/song/delete', song.id]" class="btn btn-danger me-2">
          <i class="fas fa-trash-alt"></i> Delete
        </a>
        <a [routerLink]="['/song/update', song.id]" class="btn btn-primary">
          <i class="fas fa-edit"></i> Update
        </a>
      </div>
    </div>
  </div>
</div>

and this is how I save the file:

   private string SaveFile(IFormFile file)

    {
        string directoryPath;

        if (file.ContentType.StartsWith("image/")) {
            directoryPath = _configuration["FileSettings:ImageFilesPath"];
        } else {
            directoryPath = _configuration["FileSettings:SongFilesPath"];
        }

        if (!Directory.Exists(directoryPath))
        {
            Directory.CreateDirectory(directoryPath);
        }

        var filePath = Path.Combine(directoryPath, file.FileName);
        using var stream = new FileStream(filePath, FileMode.Create);
        file.CopyToAsync(stream).Wait();
        return filePath;

    }

I tried with different songs, but still same error.
my song file is in mp3 format.
the errors I got:
Media resource blob:http://127.0.0.1:4200/070299b6-04b5-4bb7-8973-ac3979a188fc could not be decoded, error: Error Code: NS_ERROR_DOM_MEDIA_METADATA_ERR (0x806e0006)
All candidate resources failed to load. Media load paused.
Response has been truncated