Serve files embedded in .net library to HTML in Blazor

I am creating a Blazor project v0.5.1 that is using a .NET Standard library to provided all of the business logic. This library has several WAV files stored as Embedded Resources.

Consuming one of the resources in a typical .NET technology (WinForms, WPF, etc.) that reference this library can be done with this:

var assemName = "MyLibName";
var assembly = AppDomain
.CurrentDomain
.GetAssemblies()
.First(a => a.GetName().Name == assemName);

//memory stream
var stream = assembly.GetManifestResourceStream($"assemName.mysound.wav");

//Can play the file at some point later
var player = new SoundPlayer(stream)
player.Play();


I would like to do the equivalent in Blazor. Right now, I have sounds working in the app by copy/pasting the wav files into wwwrootsounds folder of the project so it is served as static HTML content. Then, in JavaScript, I can play one like this:

wwwrootsounds

const audio = new Audio"soundsmysound.wave"]);
audio.currentTime = 0;
audio.play();


But what I would really like to do is avoid the copy-paste and somehow serve out the files dynamically as those endpoints so it is transparent to JS.

1 Answer
1

Well, I was able to get it. Not sure it if the the best way but it seems to work well.

I had to add the blazor Storage extension:

https://github.com/BlazorExtensions/Storage

which acts as a proxy to the JavaScript SessionStorage and LocalStorage from .NET. Once loaded, I added each embedded wav file from .NET like this:

foreach (var kvp in SoundStreamDictionary)

await sessionStorage.SetItem(
kvp.Key.ToString().ToLower() //Key is the name of the sound
, kvp.Value.ToBase64() //Value is a Stream object
);



The ToBase64 is pretty standard .NET stream manipulation:

ToBase64

public static string ToBase64(this Stream stream)

byte bytes;
using (var memoryStream = new MemoryStream())

stream.Position = 0;
stream.CopyTo(memoryStream);
bytes = memoryStream.ToArray();


return Convert.ToBase64String(bytes);



Now all data is stored in JavaScript SessionStorage as strings. Trick is now to decode that to audio. With the help of this JS helper method (thanks to this StackOverflow post):

function b64toBlob(b64Data, contentType, sliceSize) '';
sliceSize = sliceSize


Put that and this in the JsInterop.js file of the BlazorComponent:

const soundAudios = ;

window.JsSound =

loadSounds: function (sounds)
sounds.forEach(sound =>
//Blazor.Storage extension adds extra double quotes so trim
const str64 = sessionStorage.getItem(sound.path).slice(1, -1);

const blob = b64toBlob(str64, "audio/wav");
const blobUrl = URL.createObjectURL(blob);

const audio = new Audio(blobUrl);
soundAudios[sound.id] = audio;
);

return true;
,

play: function (id)
const audio = soundAudios[id];
audio.currentTime = 0;
audio.play();

return true;
,
;


And FINALLY the sounds can be invoked by name from .Net:

private IDictionary<string, int> soundDict = new Dictionary<string, int>();

public Task<string> LoadSounds(IEnumerable<string> fileNames)

var sounds = fileNames
.Select(name =>

var snd = new

id = soundDict.Count,
path = name
;
soundDict.Add(name, snd.id);

return snd;
)
.ToList();

return JSRuntime.Current.InvokeAsync<string>(
"JsSound.loadSounds"
, sounds
);


public Task<string> Play(string name)

return JSRuntime.Current.InvokeAsync<string>(
"JsSound.play"
, soundDict[name]
);



Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.