7f78545a02
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
312 lines
8.7 KiB
Plaintext
312 lines
8.7 KiB
Plaintext
@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);
|
|
}
|
|
}
|
|
} |