HTML5 的 volume 属性为 0.0–1.0 浮点数，需在 loadedmetadata 后设置；受用户交互、muted 状态、Web Audio API 及移动端策略限制，常导致设值无效。
HTML5 <audio></audio> 标签本身不支持直接通过 HTML 属性控制音量，必须用 JavaScript 操作 volume 属性；且该属性值范围是 0.0（静音）到 1.0（最大），不是百分比或整数。
怎么用 JS 设置和读取 <audio></audio> 的音量
音量由元素的 volume 属性控制，它是可读写的浮点数。注意：该操作必须在音频元素已加载元数据（loadedmetadata）之后进行，否则可能被忽略或抛错。
-
volume值小于 0 或大于 1 会被自动截断为 0 或 1 - 设为
0等效于静音，但不会触发muted属性变化 - 浏览器可能限制初始音量（尤其移动端），首次用户手势触发播放后才允许修改
const audio = document.querySelector('audio');
audio.addEventListener('loadedmetadata', () => {
audio.volume = 0.7; // 设为 70%
console.log(audio.volume); // 输出 0.7（不是 70）
});
为什么 volume=0.5 没生效？常见原因
音量设置失败通常不是代码写错，而是受生命周期或策略限制：
- 在
autoplay失败或未触发用户交互（如 click）前，部分浏览器（Chrome、Safari）会忽略volume修改 - 音频尚未完成加载（
readyState ），此时赋值无效 - 元素被设为
muted="true"，此时volume被强制为 0，且修改无效 - 使用了 Web Audio API 接管播放（如通过
AudioContext创建节点），原生<audio></audio>的volume将失效
用 muted 和 volume 配合实现静音切换
单独靠 volume=0 不够直观，用户需要“静音/取消静音”反馈。应同时管理 muted 属性，并在切换时保存原始音量值：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
let lastVolume = 1;
const audio = document.querySelector('audio');
function toggleMute() {
if (audio.muted) {
audio.muted = false;
audio.volume = lastVolume;
} else {
lastVolume = audio.volume;
audio.muted = true;
}
}
注意：muted 是布尔值，设为 true 后，即使 volume 是 1，也听不到声音；且 muted 状态优先级高于 volume。
移动端音量控制的现实约束
iOS Safari 和 Android Chrome 对音量干预极强：
- 无法通过 JS 控制系统音量，只能影响当前音频元素的相对响度
- 若页面未获得音频播放权限（即没发生过用户手势触发的
play()），volume设置会被忽略 - 某些安卓 WebView 会将
volume固定为 1，仅响应系统硬件音量键 - 不要依赖
volumechange事件监听用户调音——它在移动端几乎不触发
真正能稳定调节的，只有用户自己按手机侧边音量键；JS 能做的，是在合法时机把音量“映射”到那个范围内，并配合 muted 提供开关语义。
