Blazor中点击按钮播放文件共享WAV音频的问题求助

问题描述 #

我希望在Blazor中点击按钮时，播放位于文件共享地址myabc.com/mysharedfolder/mysharedfile.wav的WAV音频。

尝试方案1：HTML <audio>标签 #

使用以下代码时控制台报错：

<audio autoplay controls><source src="@mylocation" /></audio>

错误信息：

Not allowed to load local resource:
file://myabc.com/mysharedfolder/mysharedfile.wav

但将路径file://myabc.com/mysharedfolder/mysharedfile.wav直接复制到Edge浏览器地址栏，音频可正常播放。

尝试方案2：NAudio后端播放 #

按钮绑定点击事件：

OnClick="@(async () => await PlaySound())"

C#实现代码：

using NAudio.Wave;

private async Task PlaySound()
{
    string mylocation = "myabc.com/mysharedfolder/mysharedfile.wav";

    if (File.Exists(mylocation))
    {
        byte[] bytes = System.IO.File.ReadAllBytes(mylocation);

        using (var stream = new MemoryStream(bytes))
        {
            using (var reader = new WaveFileReader(stream))
            {
                using (var waveOut = new WaveOutEvent())
                {
                    waveOut.Init(reader);
                    waveOut.Play();
                    while (waveOut.PlaybackState == PlaybackState.Playing)
                    {
                        System.Threading.Thread.Sleep(200);
                    }
                }
            }
        }
    }
}   

这段代码在本地能正常播放，但部署到网站后无声音。

可行解决方法 #

1. 用Web服务器API代理共享文件 #

浏览器沙箱禁止直接加载file://协议的网络资源，部署后的Blazor应用无法绕过这个限制。可以在Web服务器上写一个API接口，负责读取共享文件并以流的形式返回给前端。

示例ASP.NET Core API：

[ApiController]
[Route("api/audio")]
public class AudioController : ControllerBase
{
    [HttpGet("{fileName}")]
    public IActionResult GetAudio(string fileName)
    {
        // 确保服务器进程有权限访问该共享文件夹
        string sharedFilePath = @"\\myabc.com\mysharedfolder\" + fileName;
        if (!System.IO.File.Exists(sharedFilePath))
        {
            return NotFound();
        }

        var fileStream = new FileStream(sharedFilePath, FileMode.Open, FileAccess.Read);
        return File(fileStream, "audio/wav");
    }
}

Blazor前端调用方式：

<button @onclick="PlayAudio">播放音频</button>
<audio @ref="_audioElement" src="/api/audio/mysharedfile.wav" />

@code {
    private ElementReference _audioElement;

    private async Task PlayAudio()
    {
        await _audioElement.InvokeAsync("play");
    }
}

2. 将共享文件夹映射为Web服务器静态资源 #

如果用IIS部署，可把网络共享文件夹映射为站点的虚拟目录，让文件能通过HTTP/HTTPS访问：

• 打开IIS管理器，找到你的Blazor站点，右键添加虚拟目录
• 别名设为audio，物理路径填写\\myabc.com\mysharedfolder
• 配置应用池身份，确保它有权限访问该共享文件夹

前端直接通过虚拟目录路径访问：

<button @onclick="() => _audioElement.PlayAsync()">播放音频</button>
<audio @ref="_audioElement" src="/audio/mysharedfile.wav" />

@code {
    private ElementReference _audioElement;
}

3. WebDAV协议直接访问（仅限内网场景） #

如果共享文件夹所在服务器配置了WebDAV服务，可将file://路径替换为HTTP形式（比如http://myabc.com/mysharedfolder/mysharedfile.wav），直接用<audio>标签加载，前提是浏览器能访问这个WebDAV地址且有权限。

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