嘿，这个问题完全有可行的解决办法！我来给你详细讲讲用CSS和JavaScript两种方式隐藏HTML5 audio标签的静音按钮和音量控制条：

不同浏览器对原生audio控件的样式实现不一样，所以需要针对主流浏览器写对应的伪元素样式：

/* 针对 Chrome、Safari、Edge 浏览器 */
audio::-webkit-media-controls-mute-button {
    display: none !important;
}
audio::-webkit-media-controls-volume-slider {
    display: none !important;
}
/* 可以直接隐藏整个音量控制容器，更彻底 */
audio::-webkit-media-controls-volume-control-container {
    display: none !important;
}

/* 针对 Firefox 浏览器 */
audio::-moz-mute-button {
    display: none !important;
}
audio::-moz-volume-slider {
    display: none !important;
}

注意事项： #

• 加上 !important 是为了覆盖浏览器原生样式的优先级，确保生效；
• 部分浏览器的伪元素命名可能会随版本更新变化，记得在目标浏览器里测试；
• 移动端浏览器的控件布局可能不同，需要针对性调整。

如果需要更灵活的控制（比如禁止用户调整音量），可以结合JS来实现：

const audioEl = document.querySelector('audio');

// 动态注入CSS隐藏音量控件
const hideVolumeStyle = document.createElement('style');
hideVolumeStyle.textContent = `
    audio::-webkit-media-controls-mute-button,
    audio::-webkit-media-controls-volume-slider,
    audio::-moz-mute-button,
    audio::-moz-volume-slider {
        display: none !important;
    }
`;
document.head.appendChild(hideVolumeStyle);

// 锁定音量和静音状态，防止用户通过其他方式修改
audioEl.volume = 0.8; // 设置固定音量（0-1之间）
audioEl.muted = false; // 固定静音状态，可根据需求设为true

// 监听音量变化事件，强制恢复设定值
audioEl.addEventListener('volumechange', (e) => {
    e.preventDefault();
    audioEl.volume = 0.8;
    audioEl.muted = false;
});

更彻底的方案：自定义控件 #

如果不想依赖原生控件的样式，可以直接去掉audio标签的controls属性，自己写一套播放/暂停控件，完全掌控界面：

<audio id="customAudio" src="your-audio-file.mp3"></audio>
<div class="custom-controls">
    <button onclick="document.getElementById('customAudio').play()">播放</button>
    <button onclick="document.getElementById('customAudio').pause()">暂停</button>
    <!-- 你可以自定义其他需要的控件，比如进度条 -->
</div>

这种方式完全避开了原生控件的样式限制，自由度最高。

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