Blazor实现：点击表格文件名控制外部单个HTML audio元素播放

要实现点击表格文件名切换单个外部audio元素播放对应音频，只需做以下三处修改：

1. 调整UI结构，移除表格内的audio并添加全局单个audio #

把原来每行右侧单元格的audio元素删掉，在表格外部添加一个单独的audio控件，同时用@ref获取Blazor的元素引用，方便后续控制播放：

<div class="table-wrapper-scroll-y my-custom-scrollbar">
    <table class="table table-bordered table-striped mb-0">
        <tbody>  
            @if (filesList != null && filesList.Count > 0)
            {
                int auF = 0;
                @foreach (string file in filesList)
                {    
                    auF++;
                    <tr> 
                        <td>
                            <span>@auF.</span>
                            <span @onclick="@(e=>readFile(file))" style="cursor:pointer;">@file</span>
                        </td>
                        <!-- 移除原表格内的audio元素 -->
                    </tr>
                }
            }
            else
            {
                <tr>
                    <td>No files</td>
                </tr>
            }
        </tbody>
    </table>
</div>
<!-- 全局单个audio播放控件 -->
<audio controls @ref="audioPlayer" id="audioPlayer"></audio>

2. 添加状态变量并完善播放逻辑 #

在@code块里新增元素引用和状态变量，同时实现readFile方法的核心逻辑：

@code{
    List<string> filesList = new List<string>();
    string path = $"{Directory.GetCurrentDirectory()}{@"\path"}";
    // 存储audio元素的Blazor引用
    private ElementReference audioPlayer;
    // 记录当前选中的音频文件名
    private string currentAudioFile;

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

    public async Task readFile(string fileName)
    {
        // 点击已选中文件时，切换暂停/播放状态
        if (currentAudioFile == fileName)
        {
            await JS.InvokeVoidAsync("toggleAudioPlayback", audioPlayer);
            return;
        }

        currentAudioFile = fileName;
        // 更新音频源并加载
        await JS.InvokeVoidAsync("updateAudioSource", audioPlayer, fileName);
        // 自动播放新选中的音频
        await JS.InvokeVoidAsync("playAudio", audioPlayer);
    }
}

3. 添加JavaScript辅助方法 #

由于Blazor直接操作DOM的能力有限，需要在页面的<script>标签中添加几个简单的JS方法，用于控制audio元素：

<script>
    // 更新音频源并加载资源
    function updateAudioSource(audioElement, source) {
        audioElement.src = source;
        audioElement.load();
    }

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

    // 切换暂停/播放状态
    function toggleAudioPlayback(audioElement) {
        audioElement.paused ? audioElement.play() : audioElement.pause();
    }
</script>

补充提示 #

• 若不需要点击已选中文件切换播放状态的功能，可以删除if (currentAudioFile == fileName)分支的代码，直接执行更新源和播放逻辑。
• 注意音频文件的访问路径：如果是Blazor Server项目，需将音频文件放在wwwroot目录下，并调整fileName为相对路径（比如/audio/@fileName），确保浏览器能正确加载资源。

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