如何分离Razor组件中的音频元素？实现跨组件分位置调用

1. 创建独立音频播放器组件 #

新建AudioPlayer.razor组件，将原音频元素封装进去，添加参数和播放控制方法：

<audio @ref="audioElement" controls>
</audio>

@code {
    private ElementReference audioElement;
    [Parameter] public string AudioUrl { get; set; }

    public async Task PlayAudio(string url)
    {
        AudioUrl = url;
        await audioElement.InvokeAsync("load");
        await audioElement.InvokeAsync("play");
    }
}

2. 改造CallComponent移除内部音频元素 #

删除CallComponent.razor里的<audio>标签，添加回调事件用于向父组件传递播放请求：

<tr>
    <td>
        <a @onclick="@(() => OnPlayAudio?.Invoke(Mp3.Url))"
           class="link-primary"
           role="button">
            @fileGroup.Key
        </a>
    </td>
</tr>

@code {
    [Parameter] public FileGroup fileGroup { get; set; } // 替换为你实际的文件组类型
    [Parameter] public Action<string> OnPlayAudio { get; set; }
}

3. 在Index.razor中集成组件 #

在需要展示音频的位置调用独立音频组件，同时处理CallComponent的播放回调：

<!-- 这里放置独立的音频组件，可自由调整位置 -->
<AudioPlayer @ref="audioPlayer" />

...
<tbody>
    @foreach (var fileGroup in GroupedAndSorted)
    {
        <CallComponent fileGroup="fileGroup" OnPlayAudio="HandlePlayAudio" />
    }
</tbody>
...

@code {
    private AudioPlayer audioPlayer;

    private void HandlePlayAudio(string url)
    {
        audioPlayer?.PlayAudio(url);
    }
}

这样改造后，音频组件只会被实例化一次，不会随循环重复创建，且可以放在页面任意位置，所有CallComponent的播放请求都会统一控制这个独立音频元素。

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