質問
私はBlazorプロジェクトv0.5.1を作成しています。 このプロジェクトでは、.NET標準ライブラリを使用してすべてのビジネスロジックを提供しています。このライブラリには、埋め込みリソースとして保存されたいくつかのWAVファイルがあります。
このライブラリを参照する典型的な.NETテクノロジ（WinForms、WPFなど）のリソースの1つを消費するには、次のようにします。
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で同等のことをしたいと思います。今は、プロジェクトのwwwroot\soundsフォルダにwavファイルをコピー/貼り付けて、静的なHTMLコンテンツとして提供されるように、アプリケーションで作業しているサウンドwwwroot\soundsます。 JavaScriptで、私は次のように再生できます：
const audio = new Audio"\sounds\mysound.wave"]);
audio.currentTime = 0;
audio.play();
しかし、私が本当にやりたいことは、コピー・ペーストを避け、ファイルを動的にそれらのエンドポイントとして提供することです。そのため、JSに対してトランスペアレントです。
人気のある回答
まあ、私はそれを得ることができました。最善の方法だと確信していませんが、うまくいくようです。
私はblazorストレージエクステンションを追加しなければならなかった：
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ヘルパーメソッドの助けを借りて（この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]
);
}