html 5音频标签较低的宽度不会在chrome中显示播放按钮答案

【问题标题】：html 5 audio tag lower width won't show play button in chromehtml 5音频标签较低的宽度不会在chrome中显示播放按钮
【发布时间】：2021-10-18 14:57:57
【问题描述】：

我想为 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 那样显示播放/暂停按钮，它会显示我试图将其删除的时间线：

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

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

【问题讨论】：

标签： html css html5-audio

【解决方案1】：

来自MDN 关于<audio> 元素：

除非指定了 controls 属性，否则该元素没有自己的内在视觉输出，在这种情况下会显示浏览器的默认控件。

默认控件的默认显示值为 inline，通常最好将该值设置为 block 以改善对定位和布局的控制，除非您希望它位于文本块或类似内容中。

您可以使用影响默认控件的属性设置默认控件的样式块作为一个单元，所以例如你可以给它一个边框和边框半径、内边距、边距等。您不能设置样式音频播放器内的单个组件（例如更改按钮大小或图标，更改字体等），控件不同跨不同的浏览器。

要在浏览器中获得一致的外观和感觉，您需要创建自定义控件；这些可以以任何方式标记和样式你想要的方式，然后 JavaScript 可以与 HTMLMediaElement API 来连接它们的功能。

【讨论】：