Blazor 和 Superpowered Web Audio SDK，如何将 arrayBuffer 返回给 C#

如何解决Blazor 和 Superpowered Web Audio SDK，如何将 arrayBuffer 返回给 C#

首先，对于这样一个悬而未决的问题，我深表歉意。我认为这个问题来自于对 WASM 和 .Net 中 JSInterop 的性质缺乏了解。

我只是想联系在 Blazor 中使用 Superpowered Web Audio SDK 的任何人，并了解他们在我使用 JSInterop 时是如何使用它的，而且我觉得不使用基于 Javascript 的框架。

我已经设置了一个带有 C# 类的 Blazor 客户端 Web 程序集项目，它充当一个非常简单的 Javascript 文件的接口来下载和解码音频文件：

Public Function ScreenResolution() As String
        Dim intX As Integer = Screen.PrimaryScreen.Bounds.Width
        Dim intY As Integer = Screen.PrimaryScreen.Bounds.Height
        Return intX & " × " & intY
End Function

当 C# 方法 DownloadAndDecode() 被调用时，它会将自身的引用传递给 javascript 函数 downloadAndDecode() 以在缓冲区准备好时使用回调：

public class AudioTest
{
        [Inject]
        IJSRuntime js;

        DotNetobjectReference<AudioTest> objRef;

        protected override void OnInitialized()
        {
            objRef = DotNetobjectReference.Create(this);
        }

        public async void DownloadAndDecode(string url)
        {
            byte[] buffer = await superpoweredModule.InvokeAsync<byte[]>("downloadAndDecode",url,objRef);

            Console.WriteLine(buffer.Length);
        }
       
        [JSInvokable]
        public void ReceiveDecodedBuffer(string url,byte[] buffer)
        {
            Console.WriteLine(buffer);
        }
}

但是，这会在转换 base64 缓冲区时导致运行时错误。我已经尝试在发送之前从 base64 转换音频缓冲区（这太慢了）。我也尝试过未编组的 Javascript 调用，但它们只支持同步调用。在 C#、JS 之间传递时必须转换缓冲区，反之亦然，这太慢了。

我计划在 C# 和 JS 上处理音频缓冲区。但感觉就像我应该离开 JS 一边并在那里管理缓冲区。有没有人对此有建议？或者我应该把它留在 Javascript 端？或者干脆改变我的设计/方法和框架来支持 Superpowered 库。

解决方法

安装 .net 6 preview 6 并再次创建我的项目提供了一种在 Blazor 和 JavaScript 之间传递大字节 [] 的快速有效的方法。如果不创建新项目，它会在返回/发送 byte[] 时导致奇怪的行为。

这是我的源代码示例。该代码需要 Superpowered Web Audio 库。 ByteArrayTest.razor

<h3>ByteArrayTest</h3>

<button @onclick="SendNetBytes">Send bytes to javascript</button>
<button @onclick="GetJavaBytes">Get bytes from javascript</button>
<button @onclick="DownloadAndDecode">Download And Decode .mp3</button>
<button @onclick="DownloadAndDecodeUsingCallback">Download And Decode .mp3 Using Callback</button>

@code {
    [Inject]
    IJSRuntime jsRuntime { get; set; }
    IJSObjectReference module;
    DotNetObjectReference<ByteArrayTest> objRef;

    protected override async Task OnInitializedAsync()
    {
        objRef = DotNetObjectReference.Create(this);
        module = await jsRuntime.InvokeAsync<IJSObjectReference>("import","/byteArray.js");
    }

    public async ValueTask DisposeAsync()
    {
        objRef.Dispose();
        await module.DisposeAsync();
    }

    public async void SendNetBytes()
    {
        byte[] bytes = new byte[] { 1,5,7 };
        await module.InvokeVoidAsync("getNetBytes",bytes);
    }

    public async void GetJavaBytes()
    {
        byte[] buffer = await module.InvokeAsync<byte[]>("getJavaBytes");
        Console.WriteLine(buffer.Length);
        foreach (byte b in buffer)
        {
            Console.WriteLine(b);
        }
    }

    public async void DownloadAndDecode()
    {
        byte[] buffer = await module.InvokeAsync<byte[]>("downloadAndDecode","/track.mp3");
        Console.WriteLine(buffer.Length);
        await module.InvokeVoidAsync("getNetBytes",buffer);
    }

    public async void DownloadAndDecodeUsingCallback()
    {
        await module.InvokeVoidAsync("downloadAndDecodeUsingCallback","/track.mp3",objRef);
    }

    [JSInvokable]
    public async void ReceiveDecodedBuffer(byte[] buffer)
    {
        Console.WriteLine("Got buffer!");
        Console.WriteLine(buffer.Length);
        await module.InvokeVoidAsync("getNetBytes",buffer);
    }
}

wwwroot/byteArray.js

export function getNetBytes(bytes) {
    console.log(bytes);
}

export function getJavaBytes() {
    return new Uint8Array([1,2,3,4,5]);
}

import { SuperpoweredTrackLoader } from '/superpowered/SuperpoweredTrackLoaderModule.js';

export async function downloadAndDecode(url) {
    const promise = new Promise((resolve) => {
        SuperpoweredTrackLoader.downloadAndDecode(url,async (message) => {
            const buffer = new Uint8Array(message.SuperpoweredLoaded.buffer);
            resolve(buffer);
        });
    });

    const buffer = await promise;
    return buffer;
}

export function downloadAndDecodeUsingCallback(url,dotNetRef) {
    SuperpoweredTrackLoader.downloadAndDecode(url,async (message) => {
        const buffer = new Uint8Array(message.SuperpoweredLoaded.buffer);
        await dotNetRef.invokeMethodAsync('ReceiveDecodedBuffer',buffer);
    });
}