从标准Html5音频播放器中删除静音/音量条?

时间:2022-01-07 18:58:50

Given the standard html5 audio player,

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

HTML:

<audio controls></audio>

(Picture)

Is there a way to remove only the "mute" button and volume slider? I'd like to keep the play/pause button and the track-position slider.

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

1 个解决方案

#1


To change these you can use some crafty CSS. With the border radius altered on the right hand side this looks like what you are after.

要更改这些,您可以使用一些狡猾的CSS。边框半径在右侧改变,这看起来就像你追求的那样。

从标准Html5音频播放器中删除静音/音量条?

See this js fiddle http://jsfiddle.net/3j76551r/1/

看到这个js小提琴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;
}

Another option would be the javascript option. This would be to write your own player using the html audio element. There is a really good tutorial here that I have done in the past that teaches you how to write your own player with javascript.

另一种选择是javascript选项。这将是使用html audio元素编写自己的播放器。这里有一个非常好的教程,我过去曾教过你如何使用javascript编写自己的播放器。

#1


To change these you can use some crafty CSS. With the border radius altered on the right hand side this looks like what you are after.

要更改这些,您可以使用一些狡猾的CSS。边框半径在右侧改变,这看起来就像你追求的那样。

从标准Html5音频播放器中删除静音/音量条?

See this js fiddle http://jsfiddle.net/3j76551r/1/

看到这个js小提琴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;
}

Another option would be the javascript option. This would be to write your own player using the html audio element. There is a really good tutorial here that I have done in the past that teaches you how to write your own player with javascript.

另一种选择是javascript选项。这将是使用html audio元素编写自己的播放器。这里有一个非常好的教程,我过去曾教过你如何使用javascript编写自己的播放器。