*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
2025-09-05 10:48:07 -04:00
parent a04bf06327
commit 7f78545a02
24 changed files with 1316 additions and 18 deletions
@@ -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(
@@ -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}");
+    }
+}
@@ -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);
+        }
+    }
+}
@@ -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");
+    }
+}
@@ -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>
@@ -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; }
-
-    private void HandlePlayClick()
+    [Parameter] public required TrackEntity Track { get; set; }
+    [Inject] public required TrackMediaClient Client { get; set; }
+    
+    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();
    }
 }
@@ -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>

@@ -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>


@@ -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();
@@ -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; }
+}
@@ -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>();
+    }
 }
@@ -4,5 +4,8 @@
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
+  },
+  "ApiUrls": {
+    "ContentApi": "https://localhost:54493"
  }
 }