Front End Work

- Redesign component wiring for audio playback
 - Removed playback logic from the player control and moved it to injectable audio player engine service
 - Chunked/buffered stream loading from Content API passed to Web Audio API playback in 8K blocks

DeepDrftContent/Controllers/TrackController.cs

@@ -21,7 +21,8 @@ public class TrackController : ControllerBase
     {
         var file = await _fileDatabase.LoadResourceAsync<AudioBinary>(VaultConstants.Tracks, trackId);
         if (file == null) { return NotFound(); }
-        return File(file.Buffer, MimeTypeExtensions.GetMimeType(file.Extension));
+
+        return File(file.Buffer, MimeTypeExtensions.GetMimeType(file.Extension), enableRangeProcessing: true);
     }
 
     [ApiKeyAuthorize]

DeepDrftWeb.Client/Clients/TrackMediaClient.cs

@@ -2,6 +2,18 @@ using Microsoft.Extensions.DependencyInjection;
 
 namespace DeepDrftWeb.Client.Clients;
 
+public class TrackMediaResponse
+{
+    public Stream Stream { get; }
+    public long ContentLength { get; }
+    
+    public TrackMediaResponse(Stream stream, long contentLength)
+    {
+        Stream = stream;
+        ContentLength = contentLength;
+    }
+}
+
 public class TrackMediaClient
 {
     private readonly HttpClient _http;
@@ -11,8 +23,14 @@ public class TrackMediaClient
         _http = httpClientFactory.CreateClient("DeepDrft.Content");
     }
 
-    public async Task<Stream> GetTrackMedia(string trackId)
+    public async Task<TrackMediaResponse> GetTrackMedia(string trackId)
     {
-        return await _http.GetStreamAsync($"api/track/{trackId}");
+        var response = await _http.GetAsync($"api/track/{trackId}");
+        response.EnsureSuccessStatusCode();
+        
+        var contentLength = response.Content.Headers.ContentLength ?? 0;
+        var stream = await response.Content.ReadAsStreamAsync();
+        
+        return new TrackMediaResponse(stream, contentLength);
     }
 }

DeepDrftWeb.Client/Controls/AudioPlayer.razor

@@ -1,312 +0,0 @@
-@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/AudioPlayerBar.razor

@@ -1,5 +1,4 @@
-<MudContainer>
+<MudPaper MaxWidth="1600px" Square="true">
-    <MudPaper Class="bottom-bar" Square="true">
     <MudStack Row AlignItems="AlignItems.Center" Spacing="4" Class="px-4 py-2">
         <MudStack Class="pb-2">
             <MudStack Row AlignItems="AlignItems.Center">
@@ -26,7 +25,7 @@
                    Max="@Duration"
                    Step="0.1"
                    Value="@CurrentTime"
-                       ValueChanged="OnSeek"
+                   ValueChanged="@OnSeek"
                    Disabled="!IsLoaded"
                    Style="flex: 1; margin-right: 8px;"/>
 
@@ -37,7 +36,7 @@
                        Max="1"
                        Step="0.01"
                        Value="@Volume"
-                           ValueChanged="OnVolumeChange"
+                       ValueChanged="@OnVolumeChange"
                        Style="flex: 1;"/>
         </div>
     </MudStack>
@@ -47,5 +46,4 @@
             @ErrorMessage
         </MudAlert>
     }
-    </MudPaper>
+</MudPaper>
-</MudContainer>

DeepDrftWeb.Client/Controls/AudioPlayerBar.razor.cs

@@ -1,4 +1,6 @@
-using Microsoft.AspNetCore.Components;
+using DeepDrftModels.Entities;
+using DeepDrftWeb.Client.Clients;
+using Microsoft.AspNetCore.Components;
 using DeepDrftWeb.Client.Services;
 using MudBlazor;
 
@@ -6,219 +8,25 @@ namespace DeepDrftWeb.Client.Controls;
 
 public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
 {
-    [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; }
     
-    [Inject] public required AudioInteropService AudioInterop { get; set; }
+    [Parameter] public required AudioPlaybackEngine AudioPlaybackEngine { get; set; }
     
-    private string PlayerId = Guid.NewGuid().ToString();
+    private bool IsLoaded => AudioPlaybackEngine.IsLoaded;
-    private bool IsLoaded = false;
+    private bool IsPlaying => AudioPlaybackEngine.IsPlaying;
-    private bool IsPlaying = false;
+    private bool IsPaused => AudioPlaybackEngine.IsPaused;
-    private bool IsPaused = false;
+    private double CurrentTime => AudioPlaybackEngine.CurrentTime;
-    private double CurrentTime = 0;
+    private double Duration => AudioPlaybackEngine.Duration;
-    private double Duration = 0;
+    private double Volume => AudioPlaybackEngine.Volume;
-    private double Volume = 0.8;
+    private double LoadProgress => AudioPlaybackEngine.LoadProgress;
-    private double LoadProgress = 0;
+    private string? ErrorMessage => AudioPlaybackEngine.ErrorMessage;
-    private string? ErrorMessage;
-    private Timer? progressTimer;
 
     protected override async Task OnInitializedAsync()
     {
-        var result = await AudioInterop.CreatePlayerAsync(PlayerId);
+        await base.OnInitializedAsync();
-        if (!result.Success)
-        {
-            ErrorMessage = $"Failed to initialize audio player: {result.Error}";
-            return;
-        }
 
-        await AudioInterop.SetOnProgressCallbackAsync(PlayerId, OnProgress);
+        AudioPlaybackEngine.OnProgressChanged += async _ => StateHasChanged();
-        await AudioInterop.SetOnEndCallbackAsync(PlayerId, OnPlaybackEnd);
+        AudioPlaybackEngine.OnPlaybackEnded += async () => await Stop(); // TODO unload the engine track instead of stopping
-        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()
@@ -239,19 +47,38 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
         return timeSpan.ToString(timeSpan.TotalHours >= 1 ? @"h\:mm\:ss" : @"m\:ss");
     }
 
+    private async Task TogglePlayPause()
+    {
+        await AudioPlaybackEngine.TogglePlayPause();
+        StateHasChanged();
+    }
+
+    private async Task Stop()
+    {
+        await AudioPlaybackEngine.Stop();
+        StateHasChanged();
+    }
+
+    private async Task OnSeek(double position)
+    {
+        await AudioPlaybackEngine.OnSeek(position);
+        StateHasChanged();
+    }
+
+    private async Task OnVolumeChange(double volume)
+    {
+        await AudioPlaybackEngine.OnVolumeChange(volume);
+        StateHasChanged();
+    }
+    
     private void ClearError()
     {
-        ErrorMessage = null;
+        AudioPlaybackEngine.ClearError();
         StateHasChanged();
     }
     
     public async ValueTask DisposeAsync()
     {
-        progressTimer?.Dispose();
+        await AudioPlaybackEngine.DisposeAsync();
-        
-        if (IsLoaded)
-        {
-            await AudioInterop.DisposePlayerAsync(PlayerId);
-        }
     }
 }

DeepDrftWeb.Client/Controls/AudioPlayerBar.razor.css

@@ -1,10 +0,0 @@
-.bottom-bar {
-    justify-self: center; 
-    max-width: 1800px; 
-    position: fixed;
-    bottom: 0;
-    left: var(--mud-drawer-width-left);
-    right: 0;
-    margin: 0 1.5rem 1.5rem 1.5rem;
-    z-index: 1000;
-}

DeepDrftWeb.Client/Controls/AudioPlayerExample.razor

@@ -1,98 +0,0 @@
-@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/TrackCard.razor.cs

@@ -9,16 +9,15 @@ public partial class TrackCard : ComponentBase
 {
     [Parameter] public required TrackEntity TrackModel { get; set; }
     [Parameter] public EventCallback<TrackEntity> OnPlay { get; set; }
+    [Parameter] public bool IsPlaying { get; set; } = false;
     
-    private bool _isPlaying = false;
+    private string PlayPauseIcon => IsPlaying ? Icons.Material.Filled.MusicNote : Icons.Material.Filled.PlayArrow;
-    private string PlayPauseIcon => _isPlaying ? Icons.Material.Filled.MusicNote : Icons.Material.Filled.PlayArrow;
 
     private async Task PlayClick()
     {
-        if (!_isPlaying)
+        if (!IsPlaying && OnPlay.HasDelegate)
         {
-            _isPlaying = true;
+            await OnPlay.InvokeAsync(TrackModel);
-            await OnPlay.InvokeAsync();
         }
     }
 }

DeepDrftWeb.Client/Controls/TracksGallery.razor

@@ -4,7 +4,7 @@
         {
             <MudItem xs="12" sm="6" md="4" lg="2" xl="2">
                 <div Style="display: flex; justify-content: center;">
-                    <TrackCard TrackModel="@track" OnPlay="@HandlePlayClick"/>
+                    <TrackCard TrackModel="@track" IsPlaying="@(track.Id == SelectedTrack?.Id)" OnPlay="@HandlePlayClick"/>
                 </div>
             </MudItem>
         }

DeepDrftWeb.Client/Controls/TracksGallery.razor.cs

@@ -6,23 +6,19 @@ namespace DeepDrftWeb.Client.Controls;
 
 public partial class TracksGallery : ComponentBase
 {
-    private Stream? _audioStream = null;
+    [Parameter] public IEnumerable<TrackEntity> Tracks { get; set; } = [];
-    [Parameter] public IEnumerable<TrackEntity> Tracks { get; set; } = Enumerable.Empty<TrackEntity>();
+    [Parameter] public TrackEntity? SelectedTrack { get; set; }
-    
+    [Parameter] public EventCallback<TrackEntity?> SelectedTrackChanged { get; set; }
-    [Inject] public required TrackMediaClient Client { get; set; }
     
     private async Task HandlePlayClick(TrackEntity track)
     {
-        if (_audioStream == null)
+        if (SelectedTrack == track) return;
-        {
+        SelectedTrack = track;
-            _audioStream = await Client.GetTrackMedia(track.EntryKey);
+        StateHasChanged();
-            PlayAudio();
-        }
-    }
 
-    private void PlayAudio()
+        if (SelectedTrackChanged.HasDelegate)
         {
-        throw new NotImplementedException();
+            await SelectedTrackChanged.InvokeAsync(track);
+        }
     }
-    
 }

DeepDrftWeb.Client/Layout/MainLayout.razor

@@ -5,7 +5,7 @@
 <MudDialogProvider />
 <MudSnackbarProvider />
 <MudLayout>
-    <MudThemeManagerButton OnClick="@((e) => OpenThemeManager(true))" />
+    @* <MudThemeManagerButton OnClick="@((e) => OpenThemeManager(true))" /> *@
     <MudThemeManager Open="_themeManagerOpen" OpenChanged="OpenThemeManager" Theme="_themeManager" ThemeChanged="UpdateTheme" />
     <MudAppBar Elevation="_themeManager.AppBarElevation">
         <MudAvatar Class="mr-2">

DeepDrftWeb.Client/Pages/TracksView.razor

@@ -9,29 +9,30 @@
         @if (ViewModel.Page != null)
         {
             <div class="tracks-content">
-                <TracksGallery Tracks="@ViewModel.Page.Items"/>
+                <TracksGallery Tracks="@ViewModel.Page.Items"
+                               SelectedTrack="_selectedTrack"
+                               SelectedTrackChanged="@PlayTrack"/>
             </div>
-
+            <div class="tracks-footer">
-            <div class="tracks-pagination">
+                <div class="py-4">
-                <MudContainer Class="d-flex justify-center py-2">
                     <MudPagination Count="@ViewModel.Page.TotalPages"
                                    Selected="@ViewModel.Page.Page"
-                                   SelectedChanged="i => SetPage(i)"
+                                   SelectedChanged="@SetPage"
                                    BoundaryCount="2"
                                    MiddleCount="3"/>
-                </MudContainer>
+                </div>
+                <AudioPlayerBar AudioPlaybackEngine="AudioPlaybackEngine" />
             </div>
         }
         else
         {
             <div class="tracks-content">
-                <MudSkeleton Height="100%" Class="pa-2 ma-2"/>
+                <MudSkeleton Height="95%" Class="pa-2 ma-6"/>
             </div>
-            <div class="tracks-pagination">
+            <div class="tracks-footer">
-                <MudSkeleton Height="60px"/>
+                <MudSkeleton Height="60px" Width="240px" Class="justify-center"/>
+                <MudSkeleton Height="120px" Width="460px"/>
             </div>
         }
     </div>
-
-    <AudioPlayerBar AudioUrl=""></AudioPlayerBar>
 </div>

DeepDrftWeb.Client/Pages/TracksView.razor.cs

@@ -1,5 +1,6 @@
 using DeepDrftModels.Entities;
 using DeepDrftModels.Models;
+using DeepDrftWeb.Client.Services;
 using DeepDrftWeb.Client.ViewModels;
 using Microsoft.AspNetCore.Components;
 
@@ -7,13 +8,17 @@ namespace DeepDrftWeb.Client.Pages;
 
 public partial class TracksView : ComponentBase
 {
-    [Inject]
+    [Inject] public required TracksViewModel ViewModel { get; set; }
-    public required TracksViewModel ViewModel { get; set; }
+    [Inject] public required AudioPlaybackEngine AudioPlaybackEngine { get; set; }
 
+    private TrackEntity? _selectedTrack = null;
     
     protected override async Task OnInitializedAsync()
     {
         await SetPage(1);
+        
+        if (!RendererInfo.IsInteractive) return;
+        await AudioPlaybackEngine.InitializeAudioPlayer();
     }
     
     private async Task SetPage(int newPage)
@@ -26,4 +31,12 @@ public partial class TracksView : ComponentBase
             ViewModel.PageSize = pageResult.PageSize;
         }
     }
+
+    private async Task PlayTrack(TrackEntity? track)
+    {
+        if (track == null) return;
+        
+        await AudioPlaybackEngine.LoadTrack(track);
+        StateHasChanged();
+    }
 }

DeepDrftWeb.Client/Pages/TracksView.razor.css

@@ -1,8 +1,8 @@
 .tracks-page-wrapper {
     display: flex;
     flex-direction: column;
-    height: calc(100dvh - 64px); /* Subtract app bar height (pt-16 = 4rem = 64px) */
+    height: calc(100dvh - 80px); /* Subtract app bar height (pt-16 = 4rem = 64px) */
-    margin: -16px; /* Counteract MudMainContent padding */
+    /*margin: -16px; !* Counteract MudMainContent padding *!*/
     padding-top: 16px; /* Restore top padding for spacing */
 }
 
@@ -17,12 +17,12 @@
 
 .tracks-content {
     flex: 1 1 auto;
-    overflow-y: scroll;
     min-height: 0;
     padding-top: 16px;
 }
 
-.tracks-pagination {
+.tracks-footer {
     flex: 0 0 auto;
     padding: 8px 0;
+    justify-items: center;
 }

DeepDrftWeb.Client/Program.cs

@@ -10,10 +10,9 @@ Console.WriteLine(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.ConfigureContentServices(builder.Services, contentApiUrl);
 Startup.ConfigureDomainServices(builder.Services);
 
 var app = builder.Build();

DeepDrftWeb.Client/Services/AudioInteropService.cs

@@ -25,83 +25,45 @@ public class AudioInteropService : IAsyncDisposable
         }
     }
 
-    public async Task<AudioLoadResult> LoadAudioFromUrlAsync(string playerId, string url)
+    public async Task<AudioOperationResult> InitializeBufferedPlayerAsync(string playerId)
     {
-        try
+        return await InvokeJsAsync<AudioOperationResult>("DeepDrftAudio.initializeBufferedPlayer", playerId);
-        {
-            var result = await _jsRuntime.InvokeAsync<AudioLoadResult>("DeepDrftAudio.loadAudioFromUrl", playerId, url);
-            return result;
     }
-        catch (Exception ex)
+
+    public async Task<AudioOperationResult> AppendAudioBlockAsync(string playerId, byte[] audioBlock)
     {
-            return new AudioLoadResult { Success = false, Error = ex.Message };
+        return await InvokeJsAsync<AudioOperationResult>("DeepDrftAudio.appendAudioBlock", playerId, audioBlock);
     }
+
+    public async Task<AudioLoadResult> FinalizeAudioBufferAsync(string playerId)
+    {
+        return await InvokeJsAsync<AudioLoadResult>("DeepDrftAudio.finalizeAudioBuffer", playerId);
     }
 
 
     public async Task<AudioOperationResult> PlayAsync(string playerId)
     {
-        try
+        return await InvokeJsAsync<AudioOperationResult>("DeepDrftAudio.play", playerId);
-        {
-            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
+        return await InvokeJsAsync<AudioOperationResult>("DeepDrftAudio.pause", playerId);
-        {
-            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
+        return await InvokeJsAsync<AudioOperationResult>("DeepDrftAudio.stop", playerId);
-        {
-            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
+        return await InvokeJsAsync<AudioOperationResult>("DeepDrftAudio.seek", playerId, position);
-        {
-            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
+        return await InvokeJsAsync<AudioOperationResult>("DeepDrftAudio.setVolume", playerId, volume);
-        {
-            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)
@@ -130,60 +92,56 @@ public class AudioInteropService : IAsyncDisposable
 
     public async Task<AudioOperationResult> SetOnProgressCallbackAsync(string playerId, Func<double, Task> callback)
     {
-        try
+        return await SetCallbackAsync(playerId, "_progress", "setOnProgressCallback", "OnProgressCallback", 
-        {
+            wrapper => wrapper.OnProgress = callback);
-            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
+        return await SetCallbackAsync(playerId, "_end", "setOnEndCallback", "OnEndCallback", 
-        {
+            wrapper => wrapper.OnEnd = callback);
-            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)
+    {
+        return await SetCallbackAsync(playerId, "_loadprogress", "setOnLoadProgressCallback", "OnLoadProgressCallback", 
+            wrapper => wrapper.OnLoadProgress = callback);
+    }
+
+    public async Task<AudioOperationResult> DisposePlayerAsync(string playerId)
+    {
+        CleanupPlayerCallbacks(playerId);
+        return await InvokeJsAsync<AudioOperationResult>("DeepDrftAudio.disposePlayer", playerId);
+    }
+
+    private async Task<T> InvokeJsAsync<T>(string identifier, params object[] args)
+    {
+        try
+        {
+            return await _jsRuntime.InvokeAsync<T>(identifier, args);
+        }
+        catch (Exception ex)
+        {
+            if (typeof(T) == typeof(AudioOperationResult))
+                return (T)(object)new AudioOperationResult { Success = false, Error = ex.Message };
+            if (typeof(T) == typeof(AudioLoadResult))
+                return (T)(object)new AudioLoadResult { Success = false, Error = ex.Message };
+            throw;
+        }
+    }
+
+    private async Task<AudioOperationResult> SetCallbackAsync(string playerId, string suffix, string jsMethod, string callbackMethod, Action<AudioPlayerCallback> configureCallback)
     {
         try
         {
             var callbackWrapper = new AudioPlayerCallback();
-            callbackWrapper.OnLoadProgress = callback;
+            configureCallback(callbackWrapper);
             
             var dotNetObjectRef = DotNetObjectReference.Create(callbackWrapper);
-            _callbacks[playerId + "_loadprogress"] = dotNetObjectRef;
+            _callbacks[playerId + suffix] = dotNetObjectRef;
 
-            var result = await _jsRuntime.InvokeAsync<AudioOperationResult>("DeepDrftAudio.setOnLoadProgressCallback", 
+            return await _jsRuntime.InvokeAsync<AudioOperationResult>($"DeepDrftAudio.{jsMethod}", 
-                playerId, dotNetObjectRef, "OnLoadProgressCallback");
+                playerId, dotNetObjectRef, callbackMethod);
-            
-            return result;
         }
         catch (Exception ex)
         {
@@ -191,25 +149,14 @@ public class AudioInteropService : IAsyncDisposable
         }
     }
 
-    public async Task<AudioOperationResult> DisposePlayerAsync(string playerId)
+    private void CleanupPlayerCallbacks(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()

DeepDrftWeb.Client/Services/AudioPlaybackEngine.cs

@@ -0,0 +1,233 @@
+using DeepDrftModels.Entities;
+using DeepDrftWeb.Client.Clients;
+using NetBlocks.Models;
+
+namespace DeepDrftWeb.Client.Services;
+
+public class AudioPlaybackEngine : IAsyncDisposable
+{
+    public event Events.EventAsync<double>? OnProgressChanged;
+    public event Events.EventAsync? OnPlaybackEnded;
+    
+    public required TrackMediaClient Client { get; set; }
+    public required AudioInteropService AudioInterop { get; set; }
+
+    public string PlayerId { get; private set; } = Guid.NewGuid().ToString();
+    public bool IsLoaded { get; private set; } = false;
+    public bool IsPlaying { get; private set; } = false;
+    public bool IsPaused { get; private set; } = false;
+    public double CurrentTime { get; private set; } = 0;
+    public double Duration { get; private set; } = 0;
+    public double Volume { get; private set; } = 0.8;
+    public double LoadProgress { get; private set; } = 0;
+    public string? ErrorMessage { get; private set; }
+
+    public AudioPlaybackEngine(AudioInteropService audioInterop, TrackMediaClient client)
+    {
+        AudioInterop = audioInterop;
+        Client = client;
+    }
+
+    public async Task InitializeAudioPlayer()
+    {
+        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);
+    }
+
+    public async Task LoadTrack(TrackEntity track)
+    {
+        if (IsLoaded) return;
+
+        try
+        {
+            AudioOperationResult? loadResult = await AudioInterop.InitializeBufferedPlayerAsync(PlayerId);
+            TrackMediaResponse? audio = await Client.GetTrackMedia(track.EntryKey);
+
+            if (loadResult?.Success == true)
+            {
+                IsLoaded = true;
+                ErrorMessage = null;
+                await StreamAndPlay(audio);
+            }
+            else
+            {
+                ErrorMessage = $"Failed to play audio: {loadResult?.Error ?? "No audio source provided"}";
+            }
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Error loading audio: {ex.Message}";
+        }
+    }
+
+    private async Task StreamAndPlay(TrackMediaResponse audio)
+    {
+        int bytesRead = 0;
+        do
+        {
+            var buffer = new byte[8 * 1024];
+            int newBytes = await audio.Stream.ReadAsync(buffer, 0, buffer.Length);
+            bytesRead += newBytes;
+            if (bytesRead == 0) break;
+            await AudioInterop.AppendAudioBlockAsync(PlayerId, buffer);
+        } while (bytesRead < audio.ContentLength);
+        await AudioInterop.FinalizeAudioBufferAsync(PlayerId);
+    }
+
+    public 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}";
+        }
+    }
+
+    public 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}";
+        }
+    }
+
+    public 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}";
+        }
+    }
+
+    public 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}";
+                }
+            }
+            catch (Exception ex)
+            {
+                ErrorMessage = $"Error setting volume: {ex.Message}";
+            }
+        }
+    }
+
+    private async Task OnProgress(double currentTime)
+    {
+        CurrentTime = currentTime;
+        if (OnProgressChanged != null)
+        {
+            await OnProgressChanged(currentTime);
+        }
+    }
+
+    private async Task OnPlaybackEnd()
+    {
+        IsPlaying = false;
+        IsPaused = false;
+        CurrentTime = 0;
+        
+        if (OnPlaybackEnded != null)
+        {
+            await OnPlaybackEnded();
+        }
+    }
+
+    private async Task OnLoadProgress(double progress)
+    {
+        LoadProgress = progress;
+    }
+    
+    public void ClearError()
+    {
+        ErrorMessage = null;
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        await AudioInterop.DisposePlayerAsync(PlayerId);
+    }
+}

DeepDrftWeb.Client/Startup.cs

@@ -1,4 +1,5 @@
 using DeepDrftWeb.Client.Clients;
+using DeepDrftWeb.Client.Services;
 using DeepDrftWeb.Client.ViewModels;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using NetBlocks.Models;
@@ -22,12 +23,14 @@ public static class Startup
         });
     }
 
-    public static void ConfigureCommonServices(IServiceCollection services, string contentApiUrl)
+    public static void ConfigureContentServices(IServiceCollection services, string contentApiUrl)
     {
         services.AddHttpClient("DeepDrft.Content", client => 
         {
             client.BaseAddress = new Uri(contentApiUrl);
         });
         services.AddScoped<TrackMediaClient>();
+        services.AddScoped<AudioInteropService>();
+        services.AddScoped<AudioPlaybackEngine>();
     }
 }

DeepDrftWeb/Interop/webaudio.ts

@@ -42,6 +42,9 @@ class AudioPlayer {
     private onEndCallback: EndCallback | null = null;
     private onLoadProgressCallback: LoadProgressCallback | null = null;
     private progressInterval: number | null = null;
+    private bufferChunks: Uint8Array[] = [];
+    private expectedSize: number = 0;
+    private currentSize: number = 0;
 
     async initialize(): Promise<AudioResult> {
         try {
@@ -54,55 +57,40 @@ class AudioPlayer {
         }
     }
 
-    async loadAudioFromUrl(url: string): Promise<LoadAudioResult> {
+    initializeBuffered(): AudioResult {
         try {
-            const response = await fetch(url);
+            this.bufferChunks = [];
-            if (!response.ok) {
+            this.currentSize = 0;
-                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            this.expectedSize = 0;
+            return { success: true };
+        } catch (error) {
+            return { success: false, error: (error as Error).message };
+        }
     }
 
-            const contentLength = response.headers.get('Content-Length');
+    appendAudioBlock(audioBlock: Uint8Array): AudioResult {
-            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();
+            this.bufferChunks.push(audioBlock);
-                        if (done) break;
+            this.currentSize += audioBlock.length;
             
-                        chunks.push(value);
+            if (this.expectedSize > 0 && this.onLoadProgressCallback) {
-                        loaded += value.length;
+                const progress = (this.currentSize / this.expectedSize) * 100;
-                        
+                this.onLoadProgressCallback(Math.min(progress, 100));
-                        const progress = (loaded / total) * 100;
-                        if (this.onLoadProgressCallback) {
-                            this.onLoadProgressCallback(progress);
             }
             
-                        readAttempts++;
+            return { success: true };
-                    } catch (readerError) {
+        } catch (error) {
-                        break;
+            return { success: false, error: (error as Error).message };
         }
     }
 
-                
+    async finalizeAudioBuffer(): Promise<LoadAudioResult> {
-                // Combine chunks into single ArrayBuffer
+        try {
-                const arrayBuffer = new ArrayBuffer(loaded);
+            const arrayBuffer = new ArrayBuffer(this.currentSize);
             const view = new Uint8Array(arrayBuffer);
             let offset = 0;
-                for (const chunk of chunks) {
+            
+            for (const chunk of this.bufferChunks) {
                 view.set(chunk, offset);
                 offset += chunk.length;
             }
@@ -110,21 +98,12 @@ class AudioPlayer {
             this.audioBuffer = await this.audioContext!.decodeAudioData(arrayBuffer);
             this.duration = this.audioBuffer.duration;
             
-                // Final progress
+            this.bufferChunks = [];
-                if (this.onLoadProgressCallback) {
+            this.currentSize = 0;
-                    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, 
@@ -331,6 +310,8 @@ class AudioPlayer {
         this.audioContext = null;
         this.audioBuffer = null;
         this.gainNode = null;
+        this.bufferChunks = [];
+        this.currentSize = 0;
     }
 }
 
@@ -357,12 +338,28 @@ const DeepDrftAudio = {
         }
     },
 
-    loadAudioFromUrl: async (playerId: string, url: string): Promise<LoadAudioResult> => {
+    initializeBufferedPlayer: (playerId: string): AudioResult => {
         const player = audioPlayers.get(playerId);
         if (!player) {
             return { success: false, error: "Player not found" };
         }
-        return await player.loadAudioFromUrl(url);
+        return player.initializeBuffered();
+    },
+
+    appendAudioBlock: (playerId: string, audioBlock: Uint8Array): AudioResult => {
+        const player = audioPlayers.get(playerId);
+        if (!player) {
+            return { success: false, error: "Player not found" };
+        }
+        return player.appendAudioBlock(audioBlock);
+    },
+
+    finalizeAudioBuffer: async (playerId: string): Promise<LoadAudioResult> => {
+        const player = audioPlayers.get(playerId);
+        if (!player) {
+            return { success: false, error: "Player not found" };
+        }
+        return await player.finalizeAudioBuffer();
     },
 
 

DeepDrftWeb/Program.cs

@@ -17,8 +17,8 @@ var contentApiUrl = builder.Configuration["ApiUrls:ContentApi"] ?? "https://loca
 Startup.ConfigureDomainServices(builder);
 
 DeepDrftWeb.Client.Startup.ConfigureApiHttpClient(builder.Services, baseUrl);
-DeepDrftWeb.Client.Startup.ConfigureCommonServices(builder.Services, contentApiUrl);
 DeepDrftWeb.Client.Startup.ConfigureDomainServices(builder.Services);
+DeepDrftWeb.Client.Startup.ConfigureContentServices(builder.Services, contentApiUrl);
 
 builder.Services.AddControllers();