从标准 Html5 音频播放器中删除静音/音量栏？答案

【问题标题】：Remove mute/volume bar from standard Html5 audio player?从标准 Html5 音频播放器中删除静音/音量栏？
【发布时间】：2020-09-22 23:43:56
【问题描述】：

鉴于标准的 html5 音频播放器，

HTML：

<audio controls></audio>

(Picture)

有没有办法只删除“静音”按钮和音量滑块？我想保留播放/暂停按钮和轨道位置滑块。

【问题讨论】：

标签： javascript css html

【解决方案1】：

要更改这些，您可以使用一些巧妙的 CSS。在右侧更改边界半径后，这看起来就像您所追求的那样。

看这个 js fiddle http://jsfiddle.net/3j76551r/1/

 div {
    width: 260px;
    overflow: hidden;
    direction: ltl;
    border-top-right-radius: 0.5em 0.5em;
    border-bottom-right-radius: 1em 0.7em;
}

另一个选项是 javascript 选项。这将是使用 html 音频元素编写您自己的播放器。我过去做过一个非常好的教程here，它教你如何使用 javascript 编写自己的播放器。

【讨论】：

还有这个：stackoverflow.com/a/51644040/4934640audio::-webkit-media-controls-mute-button { display: none !important; } audio::-webkit-media-controls-volume-slider { display: none !important; }

【解决方案2】：

我找到了一种方法来通过操纵 css 来解决这个问题，特定于音频标签。这样，您可以删除和修改与控件容器相关的元素。请在此处查看更多详细信息： https://stackoverflow.com/a/64012853/13334628

【讨论】：