如何让WKWebView中嵌入的Twitch播放器可反复切换静音状态？

我之前也碰到过类似的Twitch嵌入播放器交互问题！这种情况大多是因为播放器实例引用失效或者没有动态获取当前静音状态导致的，下面给你一步步的解决方案：

核心问题分析 #

首次调用toggleAudio()有效，但后续无效，大概率是这两个原因：

1. 你可能缓存了播放器的初始状态，但Twitch播放器在运行中可能会因为页面动态更新、重新加载导致实例引用失效；
2. 切换逻辑依赖的是固定的状态值，而不是实时从播放器获取当前静音状态。

修正后的实现方案 #

1. 调整HTML中的Twitch播放器JS逻辑 #

确保每次切换音频时，都从播放器实例中实时获取当前静音状态，再执行反转操作，同时监听播放器就绪事件，避免过早调用函数：

<div id="twitch-embed"></div>
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<script>
  let twitchPlayer;

  // 初始化Twitch播放器
  function initTwitchPlayer() {
    twitchPlayer = new Twitch.Embed("twitch-embed", {
      width: 854,
      height: 480,
      channel: "your-target-channel", // 替换成你的目标频道
      autoplay: false,
      muted: true // 初始静音状态可自定义
    });

    // 监听播放器就绪事件，确保后续操作有效
    twitchPlayer.addEventListener(Twitch.Embed.READY, () => {
      console.log("Twitch播放器已就绪");
      // 可选：通知iOS端播放器就绪，启用按钮
      window.webkit.messageHandlers.playerReady.postMessage(null);
    });
  }

  // 修正后的音频切换函数
  function toggleAudio() {
    if (!twitchPlayer) return; // 播放器未初始化时直接返回

    // 实时获取当前静音状态，再反转
    const currentMutedState = twitchPlayer.getMuted();
    twitchPlayer.setMuted(!currentMutedState);

    // 可选：打印状态用于调试
    console.log(`音频已切换至${!currentMutedState ? "非静音" : "静音"}`);
  }

  // 页面加载完成后初始化播放器
  window.onload = initTwitchPlayer;
</script>

2. iOS端WKWebView的配套处理 #

确保你的WKWebView配置允许JS交互，并且在播放器就绪后再允许点击按钮，避免无效调用：

初始化WKWebView时添加消息监听

import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    @IBOutlet weak var twitchWebView: WKWebView!
    @IBOutlet weak var toggleAudioBtn: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupWebView()
        // 初始禁用按钮，等待播放器就绪
        toggleAudioBtn.isEnabled = false
    }

    private func setupWebView() {
        let contentController = WKUserContentController()
        // 添加消息监听，接收播放器就绪通知
        contentController.add(self, name: "playerReady")

        let config = WKWebViewConfiguration()
        config.userContentController = contentController

        twitchWebView = WKWebView(frame: view.bounds, configuration: config)
        view.addSubview(twitchWebView)

        // 加载你的HTML文件（本地或远程）
        if let htmlPath = Bundle.main.path(forResource: "twitch-embed", ofType: "html") {
            let htmlUrl = URL(fileURLWithPath: htmlPath)
            twitchWebView.loadFileURL(htmlUrl, allowingReadAccessTo: htmlUrl.deletingLastPathComponent())
        }
    }

    // 接收JS发来的播放器就绪消息
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "playerReady" {
            toggleAudioBtn.isEnabled = true
        }
    }

    // 按钮点击调用JS的toggleAudio函数
    @IBAction func toggleAudioTapped(_ sender: UIButton) {
        twitchWebView.evaluateJavaScript("toggleAudio()") { result, error in
            if let error = error {
                print("调用音频切换函数出错：\(error.localizedDescription)")
            }
        }
    }
}

关键注意点 #

• 不要缓存静音状态：每次切换都通过twitchPlayer.getMuted()实时获取，避免状态不同步；
• 等待播放器就绪：必须确保Twitch播放器完全初始化后再调用切换函数，否则会出现实例引用无效的问题；
• 调试排查：可以在JS和iOS端分别打印日志，确认函数是否被调用、播放器实例是否存在。

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