Blazor实现目录音频文件列表与播放功能问题求助

我用Blazor实现了一个功能，目标是将服务器目录中的音频文件列表展示到网页，点击列表中的文件即可播放对应的音频。目前文件列表能正常加载，但点击文件后音频无法播放。

现有代码 #

<div class="row">
    <div class="col-md-3">
        <button class="btn btn-primary" @onclick="loadMidiFiles">Load files</button>
        <hr />
        <h2>File List</h2>
        <hr />
        @if(filesList != null && filesList.Count > 0)
        {
            int auF = 0;
            @foreach (string file in filesList)
            {
                auF++;
                <br />
                <span>@auF.</span>
                <span @onclick="@(e=>readFile(file))" style="cursor:pointer;
                      text-decoration:underline;color:blue;">@file</span>
            }
        }
    </div>    
    <div class="col-md-9">
        <h3>Title: @midName</h3>
        <audio controls="controls"> 
            <source src="@mid" type="audio/mp3">
        </audio>
    </div>
</div> 

@code{
    string mid = "";
    string midName= "N/A";
    List<string> filesList = new List<string>();
    string path = $"{Directory.GetCurrentDirectory()}{@"\wwwroot\uploadedFile"}";

    public void loadMidiFiles()
    {
        var files = Directory.GetFiles(path);
        foreach (var file in files)
        {
            filesList.Add(Path.GetFileName(file));
        }
    }

    public void readFile(string fileName)
    {
        midName = fileName.Split('.')[0];
        mid = "wwwroot/uploadedFile/" + fileName;
    }
}

问题原因及修复方案 #

1. 静态文件路径错误

Blazor中wwwroot是Web应用的静态文件根目录，浏览器请求静态资源时不需要包含wwwroot前缀。当前代码中mid的路径写法错误，导致浏览器无法找到音频文件。

修复：修改readFile方法中的路径赋值：

mid = $"/uploadedFile/{fileName}";

2. Audio元素未触发重新加载

Blazor更新src属性后，浏览器不会自动重新加载音频资源，需要手动触发加载操作。

修复：给audio元素添加引用，并在切换文件时调用加载方法：

• 在组件中添加audio元素引用：

private ElementReference audioElement;

• 修改audio标签：

<audio controls="controls" @ref="audioElement"> 
    <source src="@mid" type="audio/mp3">
</audio>

• 更新readFile方法，添加加载逻辑：

public async Task readFile(string fileName)
{
    midName = fileName.Split('.')[0];
    mid = $"/uploadedFile/{fileName}";
    // 等待Blazor更新DOM后，触发音频加载
    await Task.Delay(10);
    await audioElement.InvokeAsync("load");
}

3. 文件类型匹配问题

确保type属性与实际文件类型一致：

• 如果是MP3文件，使用type="audio/mpeg"（更标准）或audio/mp3
• 如果是MIDI文件，需改为type="audio/midi"

修复后的完整代码 #

<div class="row">
    <div class="col-md-3">
        <button class="btn btn-primary" @onclick="loadMidiFiles">Load files</button>
        <hr />
        <h2>File List</h2>
        <hr />
        @if(filesList != null && filesList.Count > 0)
        {
            int auF = 0;
            @foreach (string file in filesList)
            {
                auF++;
                <br />
                <span>@auF.</span>
                <span @onclick="@(e=>readFile(file))" style="cursor:pointer;
                      text-decoration:underline;color:blue;">@file</span>
            }
        }
    </div>    
    <div class="col-md-9">
        <h3>Title: @midName</h3>
        <audio controls="controls" @ref="audioElement"> 
            <source src="@mid" type="audio/mpeg">
        </audio>
    </div>
</div> 

@code{
    string mid = "";
    string midName= "N/A";
    List<string> filesList = new List<string>();
    string path = $"{Directory.GetCurrentDirectory()}{@"\wwwroot\uploadedFile"}";
    private ElementReference audioElement;

    public void loadMidiFiles()
    {
        var files = Directory.GetFiles(path);
        foreach (var file in files)
        {
            filesList.Add(Path.GetFileName(file));
        }
    }

    public async Task readFile(string fileName)
    {
        midName = fileName.Split('.')[0];
        mid = $"/uploadedFile/{fileName}";
        await Task.Delay(10);
        await audioElement.InvokeAsync("load");
    }
}

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