macOS应用WebView中HTML Audio控件playbackRate按钮失效问题

我在面向macOS 12.0及以上版本开发的应用里，用WebView加载HTML Audio元素时遇到了问题：自带controls栏里的播放速度调整按钮始终处于未激活状态，无法点击使用。但测试发现playbackRate功能本身是正常的——手动通过JavaScript设置该属性，音频播放速度能正常改变。而在Safari浏览器中加载相同的HTML代码，所有控件按钮都能正常工作。

使用的代码与配置 #

HTML代码

<audio src="../Audio/013.mp3" controls="controls" style="width:370px;position: absolute;top:560px;left:200px;"></audio>

WebView配置（Swift）

webView.allowsLinkPreview = false
webView.allowsBackForwardNavigationGestures = true 
webView.configuration.allowsAirPlayForMediaPlayback = true 
webView.configuration.preferences.javaScriptCanOpenWindowsAutomatically = true
webView.configuration.preferences.javaScriptEnabled = true
webView.configuration.defaultWebpagePreferences.allowsContentJavaScript = true
webView.configuration.mediaTypesRequiringUserActionForPlayback = .audio

已开启App Sandbox的outgoing Connections (Client)权限，问题仍未解决。

解决方法 #

1. 调整媒体播放权限配置

macOS WebView的原生控件行为可能受媒体交互权限限制，尝试修改mediaTypesRequiringUserActionForPlayback配置：

webView.configuration.mediaTypesRequiringUserActionForPlayback = .none

如果需要保持用户交互触发播放的逻辑，可以在用户点击页面内元素后再初始化音频播放，确保控件状态能正确加载。

2. 替换为自定义播放控件

鉴于原生控件在WebView中的兼容性问题，直接实现自定义控件是更可靠的方案：

• 隐藏原生controls属性，添加自定义的播放、暂停及速度选择控件：

<audio id="audioPlayer" src="../Audio/013.mp3" style="width:370px;position: absolute;top:560px;left:200px;"></audio>
<div style="position: absolute;top:600px;left:200px;">
  <button onclick="document.getElementById('audioPlayer').play()">播放</button>
  <button onclick="document.getElementById('audioPlayer').pause()">暂停</button>
  <select onchange="document.getElementById('audioPlayer').playbackRate = this.value">
    <option value="0.5">0.5x</option>
    <option value="1" selected>1x</option>
    <option value="1.5">1.5x</option>
    <option value="2">2x</option>
  </select>
</div>

由于WebView已开启JavaScript支持，自定义控件可以直接控制音频的playbackRate，功能完全正常，且样式可按需调整。

3. 验证WebKit版本兼容性

macOS 12.0对应的WebKit框架可能存在原生控件的小缺陷，可尝试：

• 升级Xcode到最新版本，确保使用的WebKit框架是最新兼容版本
• 在更高版本的macOS（如13.0及以上）测试，确认问题是否为系统版本限制导致

内容的提问来源于stack exchange，提问作者I have a question