如何在Blazor WebAssembly客户端使用NAudio组件播放MP3文件？

NAudio的核心音频播放组件（如MediaFoundationReader、WASAPI相关类）依赖Windows平台特性，无法在Blazor WASM的浏览器沙箱环境中运行。要实现跨设备的MP3播放，你需要结合浏览器原生音频API，或仅利用NAudio的纯.NET解码能力配合Web Audio API。

方案一：直接使用HTML5 Audio元素（最简单） #

浏览器原生的<audio>元素支持MP3播放，无需依赖NAudio，是跨设备场景的首选方案。

示例Blazor组件 #

<div>
    <audio @ref="audioElement" controls>
        <source src="your-audio-file.mp3" type="audio/mpeg" />
        你的浏览器不支持音频播放
    </audio>

    <button @onclick="PlayAudio">播放</button>
    <button @onclick="PauseAudio">暂停</button>
</div>

@code {
    private ElementReference audioElement;

    private async Task PlayAudio()
    {
        await JS.InvokeVoidAsync("playAudio", audioElement);
    }

    private async Task PauseAudio()
    {
        await JS.InvokeVoidAsync("pauseAudio", audioElement);
    }
}

配套JavaScript（可放在wwwroot/js/interop.js） #

function playAudio(audioElement) {
    audioElement.play().catch(err => {
        console.error("播放失败：", err);
    });
}

function pauseAudio(audioElement) {
    audioElement.pause();
}

注意：浏览器要求音频播放必须由用户交互触发（如点击按钮），否则会被安全策略阻止。

方案二：用NAudio解码MP3 + Web Audio API播放 #

如果需要对MP3进行自定义解码处理（比如音频编辑、实时处理），可以使用NAudio的纯.NET Mp3FileReader解码MP3为PCM数据，再通过Web Audio API播放。

步骤1：安装NAudio NuGet包 #

Install-Package NAudio

步骤2：解码MP3并通过JS互操作播放 #

<button @onclick="DecodeAndPlayMP3">解码并播放本地MP3</button>
<input type="file" accept=".mp3" @onchange="HandleFileSelected" />

@code {
    private IBrowserFile selectedFile;

    private async void HandleFileSelected(InputFileChangeEventArgs e)
    {
        selectedFile = e.File;
    }

    private async Task DecodeAndPlayMP3()
    {
        if (selectedFile == null) return;

        // 读取文件字节流
        using var stream = selectedFile.OpenReadStream(maxAllowedSize: 1024 * 1024 * 50); // 限制50MB
        using var mp3Reader = new NAudio.Wave.Mp3FileReader(stream);
        
        // 读取所有PCM数据
        var pcmData = new List<byte>();
        var buffer = new byte[4096];
        int bytesRead;
        while ((bytesRead = mp3Reader.Read(buffer, 0, buffer.Length)) > 0)
        {
            pcmData.AddRange(buffer.Take(bytesRead));
        }

        // 获取音频格式参数
        var waveFormat = mp3Reader.WaveFormat;
        
        // 通过JS互操作调用Web Audio API播放
        await JS.InvokeVoidAsync("playPcmAudio", 
            pcmData.ToArray(), 
            waveFormat.SampleRate, 
            waveFormat.BitsPerSample, 
            waveFormat.Channels);
    }
}

配套JavaScript #

async function playPcmAudio(pcmData, sampleRate, bitsPerSample, channels) {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const buffer = audioContext.createBuffer(channels, pcmData.length / (bitsPerSample / 8) / channels, sampleRate);

    // 将PCM数据写入AudioBuffer
    for (let channel = 0; channel < channels; channel++) {
        const channelData = buffer.getChannelData(channel);
        let offset = channel * (bitsPerSample / 8);
        for (let i = 0; i < channelData.length; i++) {
            // 转换为-1到1之间的浮点数（根据位深处理）
            let sample;
            if (bitsPerSample === 16) {
                sample = new Int16Array(pcmData.buffer, offset, 1)[0] / 32768;
            } else if (bitsPerSample === 32) {
                sample = new Float32Array(pcmData.buffer, offset, 1)[0];
            } else {
                // 8位音频处理
                sample = (new Uint8Array(pcmData.buffer, offset, 1)[0] - 128) / 128;
            }
            channelData[i] = sample;
            offset += channels * (bitsPerSample / 8);
        }
    }

    // 创建音频源并播放
    const source = audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(audioContext.destination);
    source.start();
}

关键注意事项 #

• 用户交互要求：所有音频播放操作必须绑定到用户的点击、触摸等交互事件，否则浏览器会阻止播放。
• 内存管理：处理大文件时，避免一次性读取全部PCM数据，建议分块流式解码并播放。
• NAudio限制：仅使用NAudio的纯.NET组件（如Mp3FileReader），避免依赖平台的播放类（如WaveOutEvent、WasapiOut）。

内容的提问来源于stack exchange，提问作者Tyson Gibby