*Audio Playback*

Content API:
 - Enabling CORS for access from Blazor app
Web Server:
 - Content API URL environment config
 - Web Audio API JS Interop layer in TypeScript
 - HttpClient configs
Web Client:
 - Audio Tack player controls
 - Audio Player example page
 - Audio Interop Service Layer
 - Named HttpClients

.gitignore

@@ -303,3 +303,6 @@ __pycache__/
 
 # File Database files
 Database/Vaults/*
+
+# TypeScript output
+**/wwwroot/js/*

DeepDrftContent/Controllers/TrackController.cs

@@ -1,6 +1,5 @@
 using DeepDrftContent.Constants;
 using DeepDrftContent.FileDatabase.Models;
-using DeepDrftContent.FileDatabase.Services;
 using DeepDrftContent.Middleware;
 using Microsoft.AspNetCore.Mvc;
 

DeepDrftContent/Models/CorsSettings.cs

@@ -0,0 +1,6 @@
+namespace DeepDrftContent.Models;
+
+public class CorsSettings
+{
+    public string[] AllowedOrigins { get; set; } = [];
+}

DeepDrftContent/Program.cs

@@ -12,6 +12,24 @@ builder.Services.AddControllers();
 // Learn more about configuring OpenAPI at https://aka.ms/aspnet/openapi
 builder.Services.AddOpenApi();
 
+// Add CORS policy using configured origins
+var corsSettings = builder.Configuration.GetSection(nameof(CorsSettings)).Get<CorsSettings>();
+if (corsSettings?.AllowedOrigins == null || corsSettings.AllowedOrigins.Length == 0)
+{
+    throw new Exception("CorsSettings.AllowedOrigins configuration is required for CORS policy");
+}
+
+builder.Services.AddCors(options =>
+{
+    options.AddPolicy("ContentApiPolicy", policy =>
+    {
+        policy.WithOrigins(corsSettings.AllowedOrigins)
+              .AllowAnyMethod()
+              .AllowAnyHeader()
+              .AllowCredentials();
+    });
+});
+
 // Load API key configuration
 builder.Configuration.AddJsonFile("environment/apikey.json", optional: false, reloadOnChange: true);
 var apiKeySettings = builder.Configuration.GetSection(nameof(ApiKeySettings)).Get<ApiKeySettings>();
@@ -25,6 +43,7 @@ if (app.Environment.IsDevelopment())
     app.MapOpenApi();
 }
 
+app.UseCors("ContentApiPolicy");
 app.UseApiKeyAuthentication(apiKeySettings.ApiKey);
 app.UseAuthorization();
 

DeepDrftContent/appsettings.Development.json

@@ -4,5 +4,13 @@
       "Default": "Information",
       "Microsoft.AspNetCore": "Warning"
     }
+  },
+  "CorsSettings": {
+    "AllowedOrigins": [
+      "http://localhost:5070",
+      "https://localhost:5071",
+      "http://localhost:3000",
+      "http://127.0.0.1:5070"
+    ]
   }
 }

DeepDrftContent/appsettings.json

@@ -5,5 +5,8 @@
       "Microsoft.AspNetCore": "Warning"
     }
   },
-  "AllowedHosts": "*"
+  "AllowedHosts": "*",
+  "CorsSettings": {
+    "AllowedOrigins": []
+  }
 }

DeepDrftWeb.Client/Clients/TrackClient.cs

@@ -4,6 +4,7 @@ using NetBlocks.Models;
 using System.Text.Json;
 using System.Web;
 using Microsoft.AspNetCore.Http;
+using Microsoft.Extensions.DependencyInjection;
 
 namespace DeepDrftWeb.Client.Clients;
 
@@ -11,9 +12,9 @@ public class TrackClient
 {
     private readonly HttpClient _http;
 
-    public TrackClient(HttpClient http)
+    public TrackClient(IHttpClientFactory httpClientFactory)
     {
-        _http = http;
+        _http = httpClientFactory.CreateClient("DeepDrft.API");
     }
 
     public async Task<ApiResult<PagedResult<TrackEntity>>> GetPage(

DeepDrftWeb.Client/Clients/TrackMediaClient.cs

@@ -0,0 +1,18 @@
+using Microsoft.Extensions.DependencyInjection;
+
+namespace DeepDrftWeb.Client.Clients;
+
+public class TrackMediaClient
+{
+    private readonly HttpClient _http;
+    
+    public TrackMediaClient(IHttpClientFactory httpClientFactory)
+    {
+        _http = httpClientFactory.CreateClient("DeepDrft.Content");
+    }
+
+    public async Task<Stream> GetTrackMedia(string trackId)
+    {
+        return await _http.GetStreamAsync($"api/track/{trackId}");
+    }
+}

DeepDrftWeb.Client/Controls/AudioPlayer.razor

@@ -0,0 +1,312 @@
+@using DeepDrftWeb.Client.Services
+
+@implements IAsyncDisposable
+
+@inject AudioInteropService AudioInterop
+
+<MudPaper Elevation="2" Class="pa-4">
+    <MudStack Spacing="4">
+        <MudStack Row Spacing="3" AlignItems="AlignItems.Center">
+            <MudIconButton Icon="@GetPlayIcon()" 
+                          Color="Color.Primary" 
+                          Size="Size.Large"
+                          OnClick="@TogglePlayPause"
+                          Disabled="!IsLoaded" />
+            
+            <MudIconButton Icon="Icons.Material.Filled.Stop" 
+                          Color="Color.Secondary"
+                          OnClick="Stop"
+                          Disabled="!IsLoaded" />
+            
+            <MudText Typo="Typo.body2" Class="font-monospace" Style="min-width: 120px">
+                @FormatTime(CurrentTime) / @FormatTime(Duration)
+            </MudText>
+        </MudStack>
+
+        <MudStack Spacing="2">
+            <MudSlider T="double" 
+                       Min="0" 
+                       Max="@Duration"
+                       Step="0.1"
+                       Value="@CurrentTime"
+                       ValueChanged="OnSeek"
+                       Disabled="!IsLoaded" />
+            
+            @if (ShowLoadProgress && LoadProgress < 100)
+            {
+                <MudStack Row Spacing="2" AlignItems="AlignItems.Center">
+                    <MudProgressLinear Value="@LoadProgress" Size="Size.Small" Color="Color.Info" Class="flex-grow-1" />
+                    <MudText Typo="Typo.caption">Loading: @LoadProgress.ToString("F1")%</MudText>
+                </MudStack>
+            }
+        </MudStack>
+
+        <MudStack Row Spacing="2" AlignItems="AlignItems.Center" Style="max-width: 200px">
+            <MudIcon Icon="@GetVolumeIcon()" />
+            <MudSlider T="double" 
+                       Min="0" 
+                       Max="1"
+                       Step="0.01"
+                       Value="@Volume"
+                       ValueChanged="OnVolumeChange"
+                       Class="flex-grow-1" />
+        </MudStack>
+
+        @if (!string.IsNullOrEmpty(ErrorMessage))
+        {
+            <MudAlert Severity="Severity.Error" ShowCloseIcon="true" CloseIconClicked="ClearError">
+                @ErrorMessage
+            </MudAlert>
+        }
+    </MudStack>
+</MudPaper>
+
+
+@code {
+    [Parameter] public string? AudioUrl { get; set; }
+    [Parameter] public bool ShowLoadProgress { get; set; } = true;
+    [Parameter] public EventCallback<double> OnProgressChanged { get; set; }
+    [Parameter] public EventCallback OnPlaybackEnded { get; set; }
+
+    private string PlayerId = Guid.NewGuid().ToString();
+    private bool IsLoaded = false;
+    private bool IsPlaying = false;
+    private bool IsPaused = false;
+    private double CurrentTime = 0;
+    private double Duration = 0;
+    private double Volume = 0.8;
+    private double LoadProgress = 0;
+    private string? ErrorMessage;
+    private Timer? progressTimer;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var result = await AudioInterop.CreatePlayerAsync(PlayerId);
+        if (!result.Success)
+        {
+            ErrorMessage = $"Failed to initialize audio player: {result.Error}";
+            return;
+        }
+
+        await AudioInterop.SetOnProgressCallbackAsync(PlayerId, OnProgress);
+        await AudioInterop.SetOnEndCallbackAsync(PlayerId, OnPlaybackEnd);
+        await AudioInterop.SetOnLoadProgressCallbackAsync(PlayerId, OnLoadProgress);
+        
+        await AudioInterop.SetVolumeAsync(PlayerId, Volume);
+    }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        if (IsLoaded) return;
+
+        try
+        {
+            AudioLoadResult? loadResult = null;
+
+            if (!string.IsNullOrEmpty(AudioUrl))
+            {
+                loadResult = await AudioInterop.LoadAudioFromUrlAsync(PlayerId, AudioUrl);
+            }
+
+            if (loadResult?.Success == true)
+            {
+                IsLoaded = true;
+                Duration = loadResult.Duration;
+                LoadProgress = loadResult.LoadProgress;
+                ErrorMessage = null;
+                StateHasChanged();
+            }
+            else
+            {
+                ErrorMessage = $"Failed to load audio: {loadResult?.Error ?? "No audio source provided"}";
+            }
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Error loading audio: {ex.Message}";
+        }
+    }
+
+    private async Task TogglePlayPause()
+    {
+        if (!IsLoaded) return;
+
+        try
+        {
+            AudioOperationResult result;
+
+            if (IsPlaying)
+            {
+                result = await AudioInterop.PauseAsync(PlayerId);
+                if (result.Success)
+                {
+                    IsPlaying = false;
+                    IsPaused = true;
+                }
+            }
+            else
+            {
+                result = await AudioInterop.PlayAsync(PlayerId);
+                if (result.Success)
+                {
+                    IsPlaying = true;
+                    IsPaused = false;
+                }
+            }
+
+            if (!result.Success)
+            {
+                ErrorMessage = $"Playback error: {result.Error}";
+            }
+            else
+            {
+                ErrorMessage = null;
+            }
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Error controlling playback: {ex.Message}";
+        }
+
+        StateHasChanged();
+    }
+
+    private async Task Stop()
+    {
+        if (!IsLoaded) return;
+
+        try
+        {
+            var result = await AudioInterop.StopAsync(PlayerId);
+            if (result.Success)
+            {
+                IsPlaying = false;
+                IsPaused = false;
+                CurrentTime = 0;
+                ErrorMessage = null;
+            }
+            else
+            {
+                ErrorMessage = $"Stop error: {result.Error}";
+            }
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Error stopping playback: {ex.Message}";
+        }
+
+        StateHasChanged();
+    }
+
+    private async Task OnSeek(double position)
+    {
+        if (!IsLoaded) return;
+
+        try
+        {
+            var result = await AudioInterop.SeekAsync(PlayerId, position);
+            if (result.Success)
+            {
+                CurrentTime = position;
+                ErrorMessage = null;
+            }
+            else
+            {
+                ErrorMessage = $"Seek error: {result.Error}";
+            }
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Error seeking: {ex.Message}";
+        }
+
+        StateHasChanged();
+    }
+
+    private async Task OnVolumeChange(double volume)
+    {
+        Volume = volume;
+
+        if (IsLoaded)
+        {
+            try
+            {
+                var result = await AudioInterop.SetVolumeAsync(PlayerId, volume);
+                if (!result.Success)
+                {
+                    ErrorMessage = $"Volume error: {result.Error}";
+                    StateHasChanged();
+                }
+            }
+            catch (Exception ex)
+            {
+                ErrorMessage = $"Error setting volume: {ex.Message}";
+                StateHasChanged();
+            }
+        }
+    }
+
+    private async Task OnProgress(double currentTime)
+    {
+        CurrentTime = currentTime;
+        if (OnProgressChanged.HasDelegate)
+        {
+            await OnProgressChanged.InvokeAsync(currentTime);
+        }
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task OnPlaybackEnd()
+    {
+        IsPlaying = false;
+        IsPaused = false;
+        CurrentTime = 0;
+        
+        if (OnPlaybackEnded.HasDelegate)
+        {
+            await OnPlaybackEnded.InvokeAsync();
+        }
+        
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task OnLoadProgress(double progress)
+    {
+        LoadProgress = progress;
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private string GetPlayIcon()
+    {
+        return IsPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow;
+    }
+
+    private string GetVolumeIcon()
+    {
+        if (Volume == 0) return Icons.Material.Filled.VolumeOff;
+        if (Volume < 0.5) return Icons.Material.Filled.VolumeDown;
+        return Icons.Material.Filled.VolumeUp;
+    }
+
+    private static string FormatTime(double seconds)
+    {
+        var timeSpan = TimeSpan.FromSeconds(seconds);
+        return timeSpan.ToString(timeSpan.TotalHours >= 1 ? @"h\:mm\:ss" : @"m\:ss");
+    }
+
+    private void ClearError()
+    {
+        ErrorMessage = null;
+        StateHasChanged();
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        progressTimer?.Dispose();
+        
+        if (IsLoaded)
+        {
+            await AudioInterop.DisposePlayerAsync(PlayerId);
+        }
+    }
+}

DeepDrftWeb.Client/Controls/AudioPlayerExample.razor

@@ -0,0 +1,98 @@
+@page "/audio-example"
+
+<PageTitle>Audio Player Example</PageTitle>
+
+<MudContainer MaxWidth="MaxWidth.Large">
+    <MudText Typo="Typo.h3" GutterBottom="true">Audio Player Example</MudText>
+    
+    <div style="padding: 24px;">
+        <MudText Typo="Typo.h5" GutterBottom="true">Load Audio from URL</MudText>
+        
+        <MudTextField @bind-Value="audioUrl" 
+                      Label="Audio URL" 
+                      Placeholder="https://example.com/audio.mp3"
+                      FullWidth="true"
+                      Margin="Margin.Normal" />
+        
+        <MudButton Variant="Variant.Filled" 
+                   Color="Color.Primary" 
+                   OnClick="@LoadFromUrl"
+                   StartIcon="Icons.Material.Filled.CloudDownload">
+            Load Audio
+        </MudButton>
+        
+        @if (showUrlPlayer)
+        {
+            <div style="margin-top: 24px;">
+                <AudioPlayer AudioUrl="@audioUrl" 
+                           OnProgressChanged="OnProgressChanged"
+                           OnPlaybackEnded="OnPlaybackEnded" />
+            </div>
+        }
+    </div>
+    
+    @if (!string.IsNullOrEmpty(statusMessage))
+    {
+        <MudAlert Severity="Severity.Info" Style="margin-top: 24px;">
+            @statusMessage
+        </MudAlert>
+    }
+    
+    <div style="margin-top: 32px;">
+        <MudText Typo="Typo.h6" GutterBottom="true">Usage Instructions</MudText>
+        <MudList T="string">
+            <MudListItem T="string"
+                         Icon="Icons.Material.Filled.Audiotrack" 
+                         Text="Load audio directly from a web URL" />
+            <MudListItem T="string"
+                         Icon="Icons.Material.Filled.PlayArrow" 
+                         Text="Use play/pause controls to control playback" />
+            <MudListItem T="string"
+                         Icon="Icons.Material.Filled.VolumeUp" 
+                         Text="Adjust volume with the volume slider" />
+            <MudListItem T="string"
+                         Icon="Icons.Material.Filled.Timeline" 
+                         Text="Seek through the audio using the progress slider" />
+        </MudList>
+    </div>
+</MudContainer>
+
+@code {
+    private string audioUrl = "";
+    private bool showUrlPlayer = false;
+    private string statusMessage = "";
+
+    private void LoadFromUrl()
+    {
+        if (string.IsNullOrWhiteSpace(audioUrl))
+        {
+            statusMessage = "Please enter a valid audio URL";
+            return;
+        }
+
+        showUrlPlayer = true;
+        statusMessage = $"Loading audio from: {audioUrl}";
+        StateHasChanged();
+    }
+
+    private Task OnProgressChanged(double currentTime)
+    {
+        // Update status with current playback time
+        statusMessage = $"Playing: {FormatTime(currentTime)}";
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
+    private Task OnPlaybackEnded()
+    {
+        statusMessage = "Playback completed";
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
+    private static string FormatTime(double seconds)
+    {
+        var timeSpan = TimeSpan.FromSeconds(seconds);
+        return timeSpan.ToString(timeSpan.TotalHours >= 1 ? @"h\:mm\:ss" : @"m\:ss");
+    }
+}

DeepDrftWeb.Client/Controls/TrackPlayer.razor

@@ -73,9 +73,9 @@
             
             <MudFab Color="Color.Primary" 
                     Size="Size.Medium"
-                    StartIcon="@Icons.Material.Filled.PlayArrow"
-                    OnClick="@HandlePlayClick"
-                    Elevation="4" />
+                    StartIcon="@_playPauseIcon"
+                    OnClick="@HandlePlayClick"/>
+            <audio class="d-none" src="@_audioStream" autoplay></audio>
         </div>
         
     </MudCardContent>

DeepDrftWeb.Client/Controls/TrackPlayer.razor.cs

@@ -1,14 +1,29 @@
 using Microsoft.AspNetCore.Components;
 using DeepDrftModels.Entities;
+using DeepDrftWeb.Client.Clients;
+using MudBlazor;
 
 namespace DeepDrftWeb.Client.Controls;
 
 public partial class TrackPlayer : ComponentBase
 {
-    [Parameter] public TrackEntity? Track { get; set; }
+    [Parameter] public required TrackEntity Track { get; set; }
+    [Inject] public required TrackMediaClient Client { get; set; }
     
-    private void HandlePlayClick()
+    private Stream? _audioStream = null;
+    private bool _isPlaying = false;
+    private string _playPauseIcon => _isPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow;
+    private async Task HandlePlayClick()
     {
-        // TODO: Implement play functionality with injected service
+        if (_audioStream == null)
+        {
+            _audioStream = await Client.GetTrackMedia(Track.EntryKey);
+            PlayAudio();
+        }
+    }
+
+    private void PlayAudio()
+    {
+        throw new NotImplementedException();
     }
 }

DeepDrftWeb.Client/DeepDrftWeb.Client.csproj

@@ -11,6 +11,7 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.*" />
     <PackageReference Include="Microsoft.AspNetCore.Http.Abstractions" Version="2.3.0" />
+    <PackageReference Include="Microsoft.Extensions.Http" Version="9.*" />
     <PackageReference Include="MudBlazor" Version="8.*" />
   </ItemGroup>
 

DeepDrftWeb.Client/Layout/NavMenu.razor

@@ -2,6 +2,7 @@
 <MudNavMenu>
     <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
     <MudNavLink Href="/tracks" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.BrowseGallery">Track Gallery</MudNavLink>
+    <MudNavLink Href="/audio-example" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.LibraryMusic">Audio Test</MudNavLink>
 </MudNavMenu>
 
 

DeepDrftWeb.Client/Program.cs

@@ -1,14 +1,19 @@
 using DeepDrftWeb.Client;
+using DeepDrftWeb.Client.Services;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using MudBlazor.Services;
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
 
 Console.WriteLine(builder.HostEnvironment.BaseAddress);
-builder.Services.AddScoped<HttpClient>(_ => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+
+var contentApiUrl = builder.Configuration["ApiUrls:ContentApi"] ?? "https://localhost:7001";
 
 builder.Services.AddMudServices();
+builder.Services.AddScoped<AudioInteropService>();
 
+Startup.ConfigureApiHttpClient(builder.Services, builder.HostEnvironment.BaseAddress);
+Startup.ConfigureCommonServices(builder.Services, contentApiUrl);
 Startup.ConfigureDomainServices(builder.Services);
 
-await builder.Build().RunAsync();
+var app = builder.Build();

DeepDrftWeb.Client/Services/AudioInteropService.cs

@@ -0,0 +1,275 @@
+using Microsoft.JSInterop;
+
+namespace DeepDrftWeb.Client.Services;
+
+public class AudioInteropService : IAsyncDisposable
+{
+    private readonly IJSRuntime _jsRuntime;
+    private readonly Dictionary<string, DotNetObjectReference<AudioPlayerCallback>> _callbacks = new();
+
+    public AudioInteropService(IJSRuntime jsRuntime)
+    {
+        _jsRuntime = jsRuntime;
+    }
+
+    public async Task<AudioOperationResult> CreatePlayerAsync(string playerId)
+    {
+        try
+        {
+            var result = await _jsRuntime.InvokeAsync<AudioOperationResult>("DeepDrftAudio.createPlayer", playerId);
+            return result;
+        }
+        catch (Exception ex)
+        {
+            return new AudioOperationResult { Success = false, Error = ex.Message };
+        }
+    }
+
+    public async Task<AudioLoadResult> LoadAudioFromUrlAsync(string playerId, string url)
+    {
+        try
+        {
+            var result = await _jsRuntime.InvokeAsync<AudioLoadResult>("DeepDrftAudio.loadAudioFromUrl", playerId, url);
+            return result;
+        }
+        catch (Exception ex)
+        {
+            return new AudioLoadResult { Success = false, Error = ex.Message };
+        }
+    }
+
+
+    public async Task<AudioOperationResult> PlayAsync(string playerId)
+    {
+        try
+        {
+            var result = await _jsRuntime.InvokeAsync<AudioOperationResult>("DeepDrftAudio.play", playerId);
+            return result;
+        }
+        catch (Exception ex)
+        {
+            return new AudioOperationResult { Success = false, Error = ex.Message };
+        }
+    }
+
+    public async Task<AudioOperationResult> PauseAsync(string playerId)
+    {
+        try
+        {
+            var result = await _jsRuntime.InvokeAsync<AudioOperationResult>("DeepDrftAudio.pause", playerId);
+            return result;
+        }
+        catch (Exception ex)
+        {
+            return new AudioOperationResult { Success = false, Error = ex.Message };
+        }
+    }
+
+    public async Task<AudioOperationResult> StopAsync(string playerId)
+    {
+        try
+        {
+            var result = await _jsRuntime.InvokeAsync<AudioOperationResult>("DeepDrftAudio.stop", playerId);
+            return result;
+        }
+        catch (Exception ex)
+        {
+            return new AudioOperationResult { Success = false, Error = ex.Message };
+        }
+    }
+
+    public async Task<AudioOperationResult> SeekAsync(string playerId, double position)
+    {
+        try
+        {
+            var result = await _jsRuntime.InvokeAsync<AudioOperationResult>("DeepDrftAudio.seek", playerId, position);
+            return result;
+        }
+        catch (Exception ex)
+        {
+            return new AudioOperationResult { Success = false, Error = ex.Message };
+        }
+    }
+
+    public async Task<AudioOperationResult> SetVolumeAsync(string playerId, double volume)
+    {
+        try
+        {
+            var result = await _jsRuntime.InvokeAsync<AudioOperationResult>("DeepDrftAudio.setVolume", playerId, volume);
+            return result;
+        }
+        catch (Exception ex)
+        {
+            return new AudioOperationResult { Success = false, Error = ex.Message };
+        }
+    }
+
+    public async Task<double> GetCurrentTimeAsync(string playerId)
+    {
+        try
+        {
+            return await _jsRuntime.InvokeAsync<double>("DeepDrftAudio.getCurrentTime", playerId);
+        }
+        catch (Exception)
+        {
+            return 0;
+        }
+    }
+
+    public async Task<AudioPlayerState?> GetStateAsync(string playerId)
+    {
+        try
+        {
+            return await _jsRuntime.InvokeAsync<AudioPlayerState>("DeepDrftAudio.getState", playerId);
+        }
+        catch (Exception)
+        {
+            return null;
+        }
+    }
+
+    public async Task<AudioOperationResult> SetOnProgressCallbackAsync(string playerId, Func<double, Task> callback)
+    {
+        try
+        {
+            var callbackWrapper = new AudioPlayerCallback();
+            callbackWrapper.OnProgress = callback;
+            
+            var dotNetObjectRef = DotNetObjectReference.Create(callbackWrapper);
+            _callbacks[playerId + "_progress"] = dotNetObjectRef;
+
+            var result = await _jsRuntime.InvokeAsync<AudioOperationResult>("DeepDrftAudio.setOnProgressCallback", 
+                playerId, dotNetObjectRef, "OnProgressCallback");
+            
+            return result;
+        }
+        catch (Exception ex)
+        {
+            return new AudioOperationResult { Success = false, Error = ex.Message };
+        }
+    }
+
+    public async Task<AudioOperationResult> SetOnEndCallbackAsync(string playerId, Func<Task> callback)
+    {
+        try
+        {
+            var callbackWrapper = new AudioPlayerCallback();
+            callbackWrapper.OnEnd = callback;
+            
+            var dotNetObjectRef = DotNetObjectReference.Create(callbackWrapper);
+            _callbacks[playerId + "_end"] = dotNetObjectRef;
+
+            var result = await _jsRuntime.InvokeAsync<AudioOperationResult>("DeepDrftAudio.setOnEndCallback", 
+                playerId, dotNetObjectRef, "OnEndCallback");
+            
+            return result;
+        }
+        catch (Exception ex)
+        {
+            return new AudioOperationResult { Success = false, Error = ex.Message };
+        }
+    }
+
+    public async Task<AudioOperationResult> SetOnLoadProgressCallbackAsync(string playerId, Func<double, Task> callback)
+    {
+        try
+        {
+            var callbackWrapper = new AudioPlayerCallback();
+            callbackWrapper.OnLoadProgress = callback;
+            
+            var dotNetObjectRef = DotNetObjectReference.Create(callbackWrapper);
+            _callbacks[playerId + "_loadprogress"] = dotNetObjectRef;
+
+            var result = await _jsRuntime.InvokeAsync<AudioOperationResult>("DeepDrftAudio.setOnLoadProgressCallback", 
+                playerId, dotNetObjectRef, "OnLoadProgressCallback");
+            
+            return result;
+        }
+        catch (Exception ex)
+        {
+            return new AudioOperationResult { Success = false, Error = ex.Message };
+        }
+    }
+
+    public async Task<AudioOperationResult> DisposePlayerAsync(string playerId)
+    {
+        try
+        {
+            // Clean up callbacks
+            var keysToRemove = _callbacks.Keys.Where(k => k.StartsWith(playerId + "_")).ToList();
+            foreach (var key in keysToRemove)
+            {
+                _callbacks[key]?.Dispose();
+                _callbacks.Remove(key);
+            }
+
+            var result = await _jsRuntime.InvokeAsync<AudioOperationResult>("DeepDrftAudio.disposePlayer", playerId);
+            return result;
+        }
+        catch (Exception ex)
+        {
+            return new AudioOperationResult { Success = false, Error = ex.Message };
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        foreach (var callback in _callbacks.Values)
+        {
+            callback?.Dispose();
+        }
+        _callbacks.Clear();
+    }
+}
+
+public class AudioPlayerCallback
+{
+    public Func<double, Task>? OnProgress { get; set; }
+    public Func<Task>? OnEnd { get; set; }
+    public Func<double, Task>? OnLoadProgress { get; set; }
+
+    [JSInvokable]
+    public async Task OnProgressCallback(double currentTime)
+    {
+        if (OnProgress != null)
+            await OnProgress(currentTime);
+    }
+
+    [JSInvokable]
+    public async Task OnEndCallback()
+    {
+        if (OnEnd != null)
+            await OnEnd();
+    }
+
+    [JSInvokable]
+    public async Task OnLoadProgressCallback(double progress)
+    {
+        if (OnLoadProgress != null)
+            await OnLoadProgress(progress);
+    }
+}
+
+public class AudioOperationResult
+{
+    public bool Success { get; set; }
+    public string? Error { get; set; }
+}
+
+public class AudioLoadResult : AudioOperationResult
+{
+    public double Duration { get; set; }
+    public int SampleRate { get; set; }
+    public int NumberOfChannels { get; set; }
+    public double LoadProgress { get; set; }
+}
+
+public class AudioPlayerState
+{
+    public bool IsPlaying { get; set; }
+    public bool IsPaused { get; set; }
+    public double CurrentTime { get; set; }
+    public double Duration { get; set; }
+    public double Volume { get; set; }
+    public double LoadProgress { get; set; }
+}

DeepDrftWeb.Client/Startup.cs

@@ -13,4 +13,21 @@ public static class Startup
         services.AddScoped<TrackClient>();
         services.AddScoped<TracksViewModel>();
     }
+
+    public static void ConfigureApiHttpClient(IServiceCollection services, string baseAddress)
+    {
+        services.AddHttpClient("DeepDrft.API", client => 
+        {
+            client.BaseAddress = new Uri(baseAddress);
+        });
+    }
+
+    public static void ConfigureCommonServices(IServiceCollection services, string contentApiUrl)
+    {
+        services.AddHttpClient("DeepDrft.Content", client => 
+        {
+            client.BaseAddress = new Uri(contentApiUrl);
+        });
+        services.AddScoped<TrackMediaClient>();
+    }
 }

DeepDrftWeb.Client/wwwroot/appsettings.json

@@ -4,5 +4,8 @@
       "Default": "Information",
       "Microsoft.AspNetCore": "Warning"
     }
+  },
+  "ApiUrls": {
+    "ContentApi": "https://localhost:54493"
   }
 }

DeepDrftWeb/Components/App.razor

@@ -16,6 +16,7 @@
     <Routes @rendermode="InteractiveAuto" />
     <script src="_framework/blazor.web.js"></script>
     <script src=@Assets["_content/MudBlazor/MudBlazor.min.js"]></script>
+    <script src="js/webaudio.js"></script>
 </body>
 
 </html>

DeepDrftWeb/DeepDrftWeb.csproj

@@ -24,4 +24,16 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="9.*" />
   </ItemGroup>
 
+  <ItemGroup>
+      <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="5.9.2">
+          <PrivateAssets>all</PrivateAssets>
+          <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+      </PackageReference>
+      <Folder Include="wwwroot\js\" />
+      <Content Update="Interop\webaudio.js">
+          <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+          <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+  </ItemGroup>
+
 </Project>

DeepDrftWeb/Interop/webaudio.ts

@@ -0,0 +1,476 @@
+interface AudioResult {
+    success: boolean;
+    error?: string;
+}
+
+interface LoadAudioResult extends AudioResult {
+    duration?: number;
+    sampleRate?: number;
+    numberOfChannels?: number;
+    loadProgress?: number;
+}
+
+interface AudioState {
+    isPlaying: boolean;
+    isPaused: boolean;
+    currentTime: number;
+    duration: number;
+    volume: number;
+    loadProgress: number;
+}
+
+type ProgressCallback = (currentTime: number) => void;
+type EndCallback = () => void;
+type LoadProgressCallback = (progress: number) => void;
+
+interface Window {
+    webkitAudioContext?: typeof AudioContext;
+    DeepDrftAudio: typeof DeepDrftAudio;
+}
+
+class AudioPlayer {
+    private audioContext: AudioContext | null = null;
+    private audioBuffer: AudioBuffer | null = null;
+    private source: AudioBufferSourceNode | null = null;
+    private gainNode: GainNode | null = null;
+    private isPlaying: boolean = false;
+    private isPaused: boolean = false;
+    private startTime: number = 0;
+    private pauseOffset: number = 0;
+    private duration: number = 0;
+    private onProgressCallback: ProgressCallback | null = null;
+    private onEndCallback: EndCallback | null = null;
+    private onLoadProgressCallback: LoadProgressCallback | null = null;
+    private progressInterval: number | null = null;
+
+    async initialize(): Promise<AudioResult> {
+        try {
+            this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            this.gainNode = this.audioContext.createGain();
+            this.gainNode.connect(this.audioContext.destination);
+            return { success: true };
+        } catch (error) {
+            return { success: false, error: (error as Error).message };
+        }
+    }
+
+    async loadAudioFromUrl(url: string): Promise<LoadAudioResult> {
+        try {
+            const response = await fetch(url);
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            const contentLength = response.headers.get('Content-Length');
+            const reader = response.body?.getReader();
+            
+            if (reader && contentLength) {
+                // Stream with progress tracking
+                const total = parseInt(contentLength, 10);
+                let loaded = 0;
+                const chunks: Uint8Array[] = [];
+                
+                // Initial progress
+                if (this.onLoadProgressCallback) {
+                    this.onLoadProgressCallback(0);
+                }
+                
+                let readAttempts = 0;
+                const maxReadAttempts = 10000; // Prevent infinite loop
+                
+                while (readAttempts < maxReadAttempts) {
+                    try {
+                        const { done, value } = await reader.read();
+                        if (done) break;
+                        
+                        chunks.push(value);
+                        loaded += value.length;
+                        
+                        const progress = (loaded / total) * 100;
+                        if (this.onLoadProgressCallback) {
+                            this.onLoadProgressCallback(progress);
+                        }
+                        
+                        readAttempts++;
+                    } catch (readerError) {
+                        break;
+                    }
+                }
+                
+                
+                // Combine chunks into single ArrayBuffer
+                const arrayBuffer = new ArrayBuffer(loaded);
+                const view = new Uint8Array(arrayBuffer);
+                let offset = 0;
+                for (const chunk of chunks) {
+                    view.set(chunk, offset);
+                    offset += chunk.length;
+                }
+                
+                this.audioBuffer = await this.audioContext!.decodeAudioData(arrayBuffer);
+                this.duration = this.audioBuffer.duration;
+                
+                // Final progress
+                if (this.onLoadProgressCallback) {
+                    this.onLoadProgressCallback(100);
+                }
+            } else {
+                // Fallback to original method if streaming not possible
+                const arrayBuffer = await response.arrayBuffer();
+                this.audioBuffer = await this.audioContext!.decodeAudioData(arrayBuffer);
+                this.duration = this.audioBuffer.duration;
+                
+                // Report 100% immediately for non-streaming responses
+                if (this.onLoadProgressCallback) {
+                    this.onLoadProgressCallback(100);
+                }
+            }
+            
+            return { 
+                success: true, 
+                duration: this.duration,
+                sampleRate: this.audioBuffer.sampleRate,
+                numberOfChannels: this.audioBuffer.numberOfChannels,
+                loadProgress: 100
+            };
+        } catch (error) {
+            return { success: false, error: (error as Error).message };
+        }
+    }
+
+
+    play(): AudioResult {
+        if (!this.audioBuffer) {
+            return { success: false, error: "No audio loaded" };
+        }
+
+        try {
+            if (this.audioContext!.state === 'suspended') {
+                this.audioContext!.resume();
+            }
+
+            this.source = this.audioContext!.createBufferSource();
+            this.source.buffer = this.audioBuffer;
+            this.source.connect(this.gainNode!);
+
+            this.source.onended = () => {
+                this.isPlaying = false;
+                this.isPaused = false;
+                this.startTime = 0;
+                this.pauseOffset = 0;
+                if (this.onEndCallback) {
+                    this.onEndCallback();
+                }
+            };
+
+            if (this.isPaused) {
+                this.source.start(0, this.pauseOffset);
+                this.startTime = this.audioContext!.currentTime - this.pauseOffset;
+            } else {
+                this.source.start(0);
+                this.startTime = this.audioContext!.currentTime;
+            }
+
+            this.isPlaying = true;
+            this.isPaused = false;
+            this.startProgressTracking();
+
+            return { success: true };
+        } catch (error) {
+            return { success: false, error: (error as Error).message };
+        }
+    }
+
+    pause(): AudioResult {
+        if (!this.isPlaying) {
+            return { success: false, error: "Audio is not playing" };
+        }
+
+        try {
+            this.source!.stop();
+            this.pauseOffset += this.audioContext!.currentTime - this.startTime;
+            this.isPlaying = false;
+            this.isPaused = true;
+            this.stopProgressTracking();
+
+            return { success: true };
+        } catch (error) {
+            return { success: false, error: (error as Error).message };
+        }
+    }
+
+    stop(): AudioResult {
+        try {
+            if (this.source) {
+                this.source.stop();
+            }
+            this.isPlaying = false;
+            this.isPaused = false;
+            this.startTime = 0;
+            this.pauseOffset = 0;
+            this.stopProgressTracking();
+
+            return { success: true };
+        } catch (error) {
+            return { success: false, error: (error as Error).message };
+        }
+    }
+
+    seek(position: number): AudioResult {
+        if (!this.audioBuffer || position < 0 || position > this.duration) {
+            return { success: false, error: "Invalid seek position" };
+        }
+
+        try {
+            const wasPlaying = this.isPlaying;
+            
+            if (this.isPlaying) {
+                this.source!.stop();
+            }
+
+            this.pauseOffset = position;
+            
+            if (wasPlaying) {
+                this.source = this.audioContext!.createBufferSource();
+                this.source.buffer = this.audioBuffer;
+                this.source.connect(this.gainNode!);
+                
+                this.source.onended = () => {
+                    this.isPlaying = false;
+                    this.isPaused = false;
+                    this.startTime = 0;
+                    this.pauseOffset = 0;
+                    if (this.onEndCallback) {
+                        this.onEndCallback();
+                    }
+                };
+
+                this.source.start(0, position);
+                this.startTime = this.audioContext!.currentTime - position;
+            } else {
+                this.isPaused = true;
+            }
+
+            return { success: true };
+        } catch (error) {
+            return { success: false, error: (error as Error).message };
+        }
+    }
+
+    setVolume(volume: number): AudioResult {
+        if (!this.gainNode) {
+            return { success: false, error: "Audio not initialized" };
+        }
+
+        try {
+            const clampedVolume = Math.max(0, Math.min(1, volume));
+            this.gainNode.gain.setValueAtTime(clampedVolume, this.audioContext!.currentTime);
+            return { success: true };
+        } catch (error) {
+            return { success: false, error: (error as Error).message };
+        }
+    }
+
+    getCurrentTime(): number {
+        if (!this.isPlaying && !this.isPaused) {
+            return 0;
+        }
+
+        if (this.isPlaying) {
+            return Math.min(this.pauseOffset + (this.audioContext!.currentTime - this.startTime), this.duration);
+        } else {
+            return this.pauseOffset;
+        }
+    }
+
+    getState(): AudioState {
+        return {
+            isPlaying: this.isPlaying,
+            isPaused: this.isPaused,
+            currentTime: this.getCurrentTime(),
+            duration: this.duration,
+            volume: this.gainNode ? this.gainNode.gain.value : 0,
+            loadProgress: 100
+        };
+    }
+
+    private startProgressTracking(): void {
+        this.stopProgressTracking();
+        this.progressInterval = setInterval(() => {
+            if (this.onProgressCallback) {
+                this.onProgressCallback(this.getCurrentTime());
+            }
+        }, 100);
+    }
+
+    private stopProgressTracking(): void {
+        if (this.progressInterval) {
+            clearInterval(this.progressInterval);
+            this.progressInterval = null;
+        }
+    }
+
+    setOnProgressCallback(callback: ProgressCallback): void {
+        this.onProgressCallback = callback;
+    }
+
+    setOnEndCallback(callback: EndCallback): void {
+        this.onEndCallback = callback;
+    }
+
+    setOnLoadProgressCallback(callback: LoadProgressCallback): void {
+        this.onLoadProgressCallback = callback;
+    }
+
+    dispose(): void {
+        this.stop();
+        this.stopProgressTracking();
+        if (this.audioContext && this.audioContext.state !== 'closed') {
+            this.audioContext.close();
+        }
+        this.audioContext = null;
+        this.audioBuffer = null;
+        this.gainNode = null;
+    }
+}
+
+// Global player instances
+const audioPlayers = new Map<string, AudioPlayer>();
+
+// Define .NET interop types
+interface DotNetObjectReference {
+    invokeMethodAsync(methodName: string, ...args: any[]): Promise<any>;
+}
+
+// JavaScript interop functions for Blazor
+const DeepDrftAudio = {
+    createPlayer: async (playerId: string): Promise<AudioResult> => {
+        try {
+            const player = new AudioPlayer();
+            const result = await player.initialize();
+            if (result.success) {
+                audioPlayers.set(playerId, player);
+            }
+            return result;
+        } catch (error) {
+            return { success: false, error: (error as Error).message };
+        }
+    },
+
+    loadAudioFromUrl: async (playerId: string, url: string): Promise<LoadAudioResult> => {
+        const player = audioPlayers.get(playerId);
+        if (!player) {
+            return { success: false, error: "Player not found" };
+        }
+        return await player.loadAudioFromUrl(url);
+    },
+
+
+    play: (playerId: string): AudioResult => {
+        const player = audioPlayers.get(playerId);
+        if (!player) {
+            return { success: false, error: "Player not found" };
+        }
+        return player.play();
+    },
+
+    pause: (playerId: string): AudioResult => {
+        const player = audioPlayers.get(playerId);
+        if (!player) {
+            return { success: false, error: "Player not found" };
+        }
+        return player.pause();
+    },
+
+    stop: (playerId: string): AudioResult => {
+        const player = audioPlayers.get(playerId);
+        if (!player) {
+            return { success: false, error: "Player not found" };
+        }
+        return player.stop();
+    },
+
+    seek: (playerId: string, position: number): AudioResult => {
+        const player = audioPlayers.get(playerId);
+        if (!player) {
+            return { success: false, error: "Player not found" };
+        }
+        return player.seek(position);
+    },
+
+    setVolume: (playerId: string, volume: number): AudioResult => {
+        const player = audioPlayers.get(playerId);
+        if (!player) {
+            return { success: false, error: "Player not found" };
+        }
+        return player.setVolume(volume);
+    },
+
+    getCurrentTime: (playerId: string): number => {
+        const player = audioPlayers.get(playerId);
+        if (!player) {
+            return 0;
+        }
+        return player.getCurrentTime();
+    },
+
+    getState: (playerId: string): AudioState | null => {
+        const player = audioPlayers.get(playerId);
+        if (!player) {
+            return null;
+        }
+        return player.getState();
+    },
+
+    setOnProgressCallback: (playerId: string, dotNetObjectReference: DotNetObjectReference, methodName: string): AudioResult => {
+        const player = audioPlayers.get(playerId);
+        if (!player) {
+            return { success: false, error: "Player not found" };
+        }
+        
+        player.setOnProgressCallback((currentTime: number) => {
+            dotNetObjectReference.invokeMethodAsync(methodName, currentTime);
+        });
+        
+        return { success: true };
+    },
+
+    setOnEndCallback: (playerId: string, dotNetObjectReference: DotNetObjectReference, methodName: string): AudioResult => {
+        const player = audioPlayers.get(playerId);
+        if (!player) {
+            return { success: false, error: "Player not found" };
+        }
+        
+        player.setOnEndCallback(() => {
+            dotNetObjectReference.invokeMethodAsync(methodName);
+        });
+        
+        return { success: true };
+    },
+
+    setOnLoadProgressCallback: (playerId: string, dotNetObjectReference: DotNetObjectReference, methodName: string): AudioResult => {
+        const player = audioPlayers.get(playerId);
+        if (!player) {
+            return { success: false, error: "Player not found" };
+        }
+        
+        player.setOnLoadProgressCallback((progress: number) => {
+            dotNetObjectReference.invokeMethodAsync(methodName, progress);
+        });
+        
+        return { success: true };
+    },
+
+    disposePlayer: (playerId: string): AudioResult => {
+        const player = audioPlayers.get(playerId);
+        if (player) {
+            player.dispose();
+            audioPlayers.delete(playerId);
+            return { success: true };
+        }
+        return { success: false, error: "Player not found" };
+    }
+};
+
+// Assign to window for global access
+window.DeepDrftAudio = DeepDrftAudio;

DeepDrftWeb/Program.cs

@@ -1,4 +1,5 @@
 using DeepDrftWeb;
+using DeepDrftWeb.Client.Services;
 using MudBlazor.Services;
 using DeepDrftWeb.Components;
 
@@ -7,13 +8,16 @@ var builder = WebApplication.CreateBuilder(args);
 // Add MudBlazor services
 builder.Services.AddMudServices();
 
-// Add HttpClient services for prerendering
-builder.Services.AddHttpClient("DeepDrft.API", client => client.BaseAddress = new Uri(Startup.GetKestrelUrl(builder)));
-builder.Services.AddScoped(sp => 
-    sp.GetRequiredService<IHttpClientFactory>().CreateClient("DeepDrft.API"));
+// Add AudioInteropService for both server and client rendering
+builder.Services.AddScoped<AudioInteropService>();
+
+var baseUrl = Startup.GetKestrelUrl(builder);
+var contentApiUrl = builder.Configuration["ApiUrls:ContentApi"] ?? "https://localhost:7001";
 
 Startup.ConfigureDomainServices(builder);
 
+DeepDrftWeb.Client.Startup.ConfigureApiHttpClient(builder.Services, baseUrl);
+DeepDrftWeb.Client.Startup.ConfigureCommonServices(builder.Services, contentApiUrl);
 DeepDrftWeb.Client.Startup.ConfigureDomainServices(builder.Services);
 
 builder.Services.AddControllers();

DeepDrftWeb/appsettings.json

@@ -8,5 +8,8 @@
   "AllowedHosts": "*",
   "ConnectionStrings": {
     "DefaultConnection": "Data Source=../Database/deepdrft.db"
+  },
+  "ApiUrls": {
+    "ContentApi": "https://localhost:54493"
   }
 }

DeepDrftWeb/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "module": "ES6", // or "ESNext" 
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "outDir": "wwwroot/js"
+  },
+  "include": [
+    "Interop/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}