我正在創建一個Blazor項目v0.5.1,該項目使用.NET標準庫來提供所有業務邏輯。該庫有幾個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中。 Trick現在將其解碼為音頻。在這個JS幫助器方法的幫助下(感謝這個StackOverflow帖子 ):
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]
);
}