.NET MAUI中播放新音频时自动停止旧音频的实现方法

问题场景 #

在.NET MAUI应用中使用Community Toolkit的MediaElement和WebView播放音频时，导航到新页面播放其他音频，旧页面的音频会持续播放，导致多音频同时播放。

解决方案 #

1. 实现全局音频管理器 #

创建全局单例类统一管控所有活跃的音频播放实例，确保新音频启动前停止所有旧播放：

public static class AudioPlayerManager
{
    private static List<MediaElement> _activeMediaElements = new();
    private static List<WebView> _activeWebViews = new();

    // 注册MediaElement实例
    public static void RegisterMediaElement(MediaElement element)
    {
        if (!_activeMediaElements.Contains(element))
            _activeMediaElements.Add(element);
    }

    // 注册WebView实例
    public static void RegisterWebView(WebView webView)
    {
        if (!_activeWebViews.Contains(webView))
            _activeWebViews.Add(webView);
    }

    // 停止所有音频播放
    public static void StopAllAudio()
    {
        // 停止所有MediaElement
        foreach (var element in _activeMediaElements)
        {
            if (element.CurrentState == MediaElementState.Playing)
                element.Stop();
        }
        // 注入JS停止WebView内的音频
        foreach (var webView in _activeWebViews)
        {
            if (webView.CanGoBack)
                webView.EvaluateJavaScriptAsync("document.querySelectorAll('audio, video').forEach(el => el.pause());");
        }
        // 清理已销毁页面的实例，避免内存泄漏
        _activeMediaElements.RemoveAll(e => e.Parent == null);
        _activeWebViews.RemoveAll(w => w.Parent == null);
    }
}

2. 页面集成管理器 #

在包含音频播放组件的页面中，利用生命周期方法完成实例注册与清理：

MediaElement页面：

protected override void OnAppearing()
{
    base.OnAppearing();
    AudioPlayerManager.RegisterMediaElement(audioplayer);
}

protected override void OnDisappearing()
{
    base.OnDisappearing();
    audioplayer.Stop();
    AudioPlayerManager._activeMediaElements.Remove(audioplayer);
}

WebView页面：

protected override void OnAppearing()
{
    base.OnAppearing();
    AudioPlayerManager.RegisterWebView(audio_webview);
}

protected override void OnDisappearing()
{
    base.OnDisappearing();
    audio_webview.EvaluateJavaScriptAsync("document.querySelectorAll('audio, video').forEach(el => el.pause());");
    AudioPlayerManager._activeWebViews.Remove(audio_webview);
}

3. 启动新音频前停止旧音频 #

在任何页面准备播放新音频时，先调用全局管理器的停止方法：

MediaElement播放前：

AudioPlayerManager.StopAllAudio();
audioplayer.Source = MediaSource.FromUri(new Uri("新音频地址"));
audioplayer.Play();

WebView加载音频页面前：

AudioPlayerManager.StopAllAudio();
audio_webview.Source = new UrlWebViewSource { Url = "包含音频的网页地址" };

4. 额外优化：监听全局导航事件 #

在App.xaml.cs中监听导航事件，自动触发音频停止：

protected override void OnNavigated(NavigatedEventArgs args)
{
    base.OnNavigated(args);
    AudioPlayerManager.StopAllAudio();
}

注意事项 #

• WebView的音频控制依赖JS注入，需确保网页未限制相关权限
• 定期清理管理器中的无效实例，避免内存泄漏
• 需在Android和iOS平台分别测试JS注入的兼容性，部分网页可能需要调整JS代码

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