audio Support

[gabriel-systems]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

It would be good to have support for audio in blazor; suporting audio features would allow the interaction of visually impaired users with audio prompts etc. via programmatic control. This would also give developers the ability when create blazor games with interactive audio and soundtracks adding atmosphere to the game context.

Describe the solution you'd like

var audioElement = await WebAudio.CreateDocumentAudioElementAsync("audio");
var audioContext = await WebAudio.CreateAudioContextAsync( );
var audioTrack = await audioContext.CreateMediaElementSourceAsync(audioElement);

audioTrack.ConnectAsync(audioContext.destination);
...

Additional context

No response

[KristofferStrube]

Related issue from 2021: #37719

The conclusion back then was that ASP.NET Core would not maintain wrappers for specific browser APIs unless that could be done automatically via something like source-gen. I don't think that has changed. So, for now, you would have to build this yourself using JSInterop or rely on what the community has built.

I have built a wrapper for the Web Audio API: Blazor.WebAudio. But I think there are also other alternatives out there. With it, you could play some sound from an MP3 file like so:

@page "/"
@using KristofferStrube.Blazor.WebAudio
@inject IJSRuntime JSRuntime
@inject HttpClient HttpClient
<h2>Playing Sound</h2>

<button @onclick="PlaySound">Play Sound</button>

@code {
    private async Task PlaySound()
    {
        await using AudioContext audioContext = await AudioContext.CreateAsync(JSRuntime);
        byte[] audioData = await HttpClient.GetByteArrayAsync("Data/file_example_MP3_700KB.mp3");
        await using AudioBuffer audioBuffer = await audioContext.DecodeAudioDataAsync(audioData);

        await using AudioBufferSourceNode sourceNode = await audioContext.CreateBufferSourceAsync();
        await sourceNode.SetBufferAsync(audioBuffer);

        await using AudioDestinationNode destination = await audioContext.GetDestinationAsync();
        await sourceNode.ConnectAsync(destination);
        await sourceNode.StartAsync();
    }
}