WKWebView输入框听写功能无法启用的原因及解决方法咨询

核心原因 #

1. WKWebView默认配置限制：原生UIKit/SwiftUI输入框由系统直接托管，听写功能是系统级默认支持；但WKWebView加载的网页输入框属于Web内容，WebKit默认未完全开放语音输入的桥接权限，需要手动配置。
2. 缺少隐私权限声明：即使原生输入框能绕过部分权限校验，WKWebView访问麦克风必须依赖Info.plist中的明确权限声明，否则系统会直接拦截权限请求。
3. 网页端未适配WebKit语音输入：网页输入框若未添加对应属性或调用Web Speech API，WebKit无法识别其听写需求，自然不会显示麦克风按钮。

修复步骤 #

1. 添加麦克风权限声明 #

在项目的Info.plist文件中添加麦克风权限描述，这是系统强制要求的：

<key>NSMicrophoneUsageDescription</key>
<string>需要访问麦克风以提供语音听写功能</string>

2. 配置WKWebView支持媒体访问 #

初始化WKWebView时，修改配置以允许网页访问麦克风等媒体设备，同时确保JavaScript启用（Web语音功能依赖JS）：

let webConfig = WKWebViewConfiguration()
// 允许网页无需额外用户交互即可调用媒体设备（适配语音输入场景）
webConfig.mediaTypesRequiringUserActionForPlayback = []
// 确保JavaScript开启（默认已启用，若项目中禁用需手动开启）
webConfig.preferences.javaScriptEnabled = true

// 用配置初始化WKWebView
let webView = WKWebView(frame: view.bounds, configuration: webConfig)
view.addSubview(webView)

3. 适配网页端输入框 #

如果网页由你开发，给输入框添加适配WebKit的属性，或使用标准Web Speech API实现听写：

方式1：使用WebKit专属属性（快速适配）

<input type="text" x-webkit-speech />

方式2：使用标准Web Speech API（更灵活）

<input type="text" id="dictInput" placeholder="点击开始听写" />
<script>
const input = document.getElementById('dictInput');
const recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;

recognition.onresult = function(e) {
  input.value = e.results[0][0].transcript;
};

// 输入框聚焦时启动听写
input.addEventListener('focus', () => recognition.start());
</script>

4. 主动请求麦克风权限（可选） #

在应用启动或使用听写前主动请求权限，避免WKWebView触发权限请求时出现异常：

import AVFoundation

func requestMicPermission() {
    AVAudioSession.sharedInstance().requestRecordPermission { granted in
        DispatchQueue.main.async {
            if !granted {
                // 提示用户开启权限
                let alert = UIAlertController(title: "权限提示", message: "请在设置中开启麦克风权限以使用听写功能", preferredStyle: .alert)
                alert.addAction(UIAlertAction(title: "确定", style: .default))
                UIApplication.shared.keyWindow?.rootViewController?.present(alert, animated: true)
            }
        }
    }
}

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