html 5 音频标签下宽度不会在 chrome 中显示播放按钮

Question

我想为 chrome 和 firefox 使用 HTML 5 音频标签：

      <audio controls preload="metadata" style=" width:50px;  border-radius: 100px;margin-top: 15px; float: left;">
        <source src="https://s4.uupload.ir/filelink/MeiZSg8dmNUl_a0ba664242/koe_no_katachi_a_silent_voice_-_lit_(feora_remix)_pe7w.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>

但是当我使用 chrome 时，它不会像 firefox 那样显示 play/pause 按钮，它会显示时间轴，我试图用以下方法删除它：

audio::-webkit-media-controls-timeline {
    display: none !important;}

3 点按钮包含播放、下载和静音按钮。我不想使用任何 javascript 代码来制作 play/pause 按钮，我只想使用 CSS 和 HTML。我怎样才能像 firefox 一样在 chrome 中显示像 50px 这样的较低宽度的播放按钮？

Answer 1

来自 MDN 关于 <audio> 元素：

The element has no intrinsic visual output of its own unless the controls attribute is specified, in which case the browser's default controls are shown.

The default controls have a display value of inline by default, and it is often a good idea set the value to block to improve control over positioning and layout, unless you want it to sit within a text block or similar.

You can style the default controls with properties that affect the block as a single unit, so for example you can give it a border and border-radius, padding, margin, etc. You can't however style the individual components inside the audio player (e.g. change the button size or icons, change the font, etc.), and the controls are different across the different browsers.

To get a consistent look and feel across browsers, you'll need to create custom controls; these can be marked up and styled in whatever way you want, and then JavaScript can be used along with the HTMLMediaElement API to wire up their functionality.

html 5 音频标签下宽度不会在 chrome 中显示播放按钮

html 5 audio tag lower width won't show play button in chrome

html

css

html5-audio