controlslist="noplaybackrate"不生效是因为该属性支持度极低，Chrome、Firefox、Safari均忽略该值；唯一可靠方案是移除controls属性并自定义播放控制UI。
audio controlslist="noplaybackrate" 不生效的常见原因
直接写 controlslist="noplaybackrate" 在多数浏览器里确实不会隐藏倍速按钮——这不是你代码写错了，而是这个属性本身支持度极低且行为不一致。
Chrome 从 76 开始支持 controlslist，但仅限部分值；noplaybackrate 虽然被文档提及，实际只有 Edge（旧版）和极少数 Chromium 版本曾短暂实现过。当前主流 Chrome、Firefox、Safari 均**忽略该值**，倍速按钮照常显示。
-
controlslist是实验性属性，未进入 HTML 标准，各浏览器实现随意 - 即使设为
controlslist="nodownload noremoteplayback"，noplaybackrate也大概率被静默丢弃 - DevTools 里能看到属性存在，但
getComputedStyles或audio.controlsList都不暴露其实际效果
真正能禁用倍速的可行方式：移除原生控件 + 自定义 UI
想彻底隐藏倍速按钮，唯一可靠路径是放弃 controls 属性，自己用 JS 控制播放，并用 CSS 隐藏默认控件。
核心思路：关掉原生控件 → 监听 play/pause → 手动调用 play()/pause() → 不暴露 playbackRate 设置入口。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 去掉
controls属性：<audio src="a.mp3"></audio>（不要加controls） - 用 JS 绑定自定义按钮：
document.querySelector('button#play-btn').addEventListener('click', () => audio.play()) - 关键：别提供任何修改
audio.playbackRate的 UI，用户就无法调出倍速选项 - 若需兼容键盘快捷键（如 Chrome 的
Ctrl+Shift+.快进），得监听keydown并preventDefault()
为什么不能靠 CSS 隐藏倍速按钮
试图用 audio::-webkit-media-controls-playback-rate-button { display: none; } 这类伪元素样式，在现代 Chrome 中已失效。
- Chromium 从 98 起废弃了大部分
::-webkit-media-controls-*伪元素，包括倍速按钮 - Firefox 和 Safari 从未支持此类伪元素选择器
- 即便旧版本生效，用户右键「显示控件」或按
F12切换设备模式仍可能触发原生控件重绘
如果必须保留原生 controls，接受倍速按钮的存在
目前没有跨浏览器、无 JS、纯 HTML 的方案能隐藏它。强行 hack 只会带来维护成本和兼容性风险。
真实项目中，更常见的做法是：明确告知产品同学，倍速是现代浏览器的默认能力，用户预期如此；若合规要求严格（如考试系统），则必须走自定义播放器路线——这时候 controlslist 就不是起点，而是可有可无的装饰。
容易被忽略的一点：iOS Safari 下，即使你禁用了所有 JS 控制，只要启用了 controls，用户长按播放器仍能呼出倍速菜单——这是系统级行为，网页层无法拦截。
