Play Audio from file share in Blazor

Question

I want to play audio(.wav) file on a button click from a file share location: myabc.com/mysharedfolder/mysharedfile.wav.

When I try to access it using the below code, I get an error in the console.

 <audio autoplay controls><source src="@mylocation" /></audio>

Error says:

Not allowed to load local resource: file://myabc.com/mysharedfolder/mysharedfile.wav

But when I copy the path file://myabc.com/mysharedfolder/mysharedfile.wav into the browser window, the audio plays fine. I'm using Edge for all this testing.

I also tried reading the code on c# side.

OnClick="@(async () => await PlaySound())"

using NAudio.Wave;

private async Task PlaySound()
{
    string mylocation = myabc.com/mysharedfolder/mysharedfile.wav";

    if (File.Exists(mylocation))
    {

        byte[] bytes = System.IO.File.ReadAllBytes(mylocation);

        using (var stream = new MemoryStream(bytes))
        {
            using (var reader = new WaveFileReader(stream))
            {
                using (var waveOut = new WaveOutEvent())
                {
                    waveOut.Init(reader);
                    waveOut.Play();
                    while (waveOut.PlaybackState == PlaybackState.Playing)
                    {
                        System.Threading.Thread.Sleep(200);
                    }
                }
            }
        }
    }
}   

This plays the sound on my local machine but there is no sound on the deployed website. What else can I try to make it work ?

Answer 1

The primary problem is that you are trying to use File.Exists and File.ReadAllBytes in Blazor WebAssembly which will not work as you are expecting them to. In Blazor WASM, the System.IO.File methods only have access to an empty in memory file system (MEMFS) dedicated to the single page it is running on. See my explanation in my answer here.

Working example that does what you want

• Play a wav from a URL where the method does not return until the audio playing is complete.

With a fresh .Net 8 "Blazor WebAssembly Standalone App":

• Add Nuget package SpawnDev.BlazorJS
  -- Allows direct access to DOM and all browser APIs. I am the author of this open source library. GitHub repo: SpawnDev.BlazorJS
  -- In this example, this gives us access to the Audio object.

• Initialize the SpawnDev.BlazorJS runtime in Program.cs:

// add using
using SpawnDev.BlazorJS;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
// add below line to init SpawnDev.BlazorJS runtime
builder.Services.AddBlazorJSRuntime();
// rest of Program.cs

• Replace Counter.razor code with the code below

@page "/counter"
@using SpawnDev.BlazorJS.JSObjects

<PageTitle>Play WAV</PageTitle>

<h1>Play WAV</h1>

<button disabled="@IsPlaying" class="btn btn-primary" @onclick="PlaySound">Click me</button>

@code {
    bool IsPlaying = false;

    private async Task PlaySound()
    {
        IsPlaying = true;
        string mylocation = "https://www2.cs.uic.edu/~i101/SoundFiles/CantinaBand3.wav";
        using var audio = new Audio(mylocation);
        var tcs = new TaskCompletionSource();
        var onError = new Action(() => tcs.SetException(new Exception("Play failed")));
        var OnEnded = new Action(() => tcs.SetResult());
        audio.OnError += onError;
        audio.OnEnded += OnEnded;
        try
        {
            await audio.Play();
            // wait for error or ended event
            await tcs.Task;
        }
        finally
        {
            audio.OnError -= onError;
            audio.OnEnded -= OnEnded;
            IsPlaying = false;
        }
    }
}

Clicking the Play button will play the URL in mylocation. The play button will be disabled while the sound is playing.