[英]Serve files embedded in .net library to HTML in Blazor
我正在创建一个Blazor项目v0.5.1,该项目使用.NET Standard库提供所有业务逻辑。 该库具有存储为嵌入式资源的多个WAV文件。
可以使用引用此库的典型.NET技术(WinForms,WPF等)中的一种资源来完成此工作:
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();
我想在Blazor中做同样的事情。 现在,通过将wav文件复制/粘贴到项目的wwwroot\\sounds
文件夹中,我可以在应用程序中正常工作了,以便将其作为静态HTML内容使用。 然后,在JavaScript中,我可以这样玩:
const audio = new Audio"\sounds\mysound.wave"]);
audio.currentTime = 0;
audio.play();
但是我真正想做的是避免复制粘贴,并且以某种方式动态地将文件作为这些端点提供服务,因此对JS透明。
好吧,我能够得到它。 不确定最好的方法,但似乎效果很好。
我必须添加blazor Storage扩展名:
https://github.com/BlazorExtensions/Storage
它充当.NET的JavaScript SessionStorage和LocalStorage的代理。 加载后,我像这样从.NET添加了每个嵌入式wav文件:
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
);
}
ToBase64
是相当标准的.NET流操作:
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);
}
现在,所有数据都以字符串形式存储在JavaScript SessionStorage中。 现在,技巧是将其解码为音频。 借助此JS helper方法(由于此StackOverflow post ):
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
const byteCharacters = atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
return new Blob(byteArrays, { type: contentType });
}
将其放在BlazorComponent的JsInterop.js文件中:
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;
},
};
最后,声音可以通过.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]
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.