Firefox中的HTML5内置音频控制栏不正确

Question

我正在构建一个网站（使用nodejs），我计划使用HTML5内置音频类在其中嵌入一段音频。我在html文件中写了这个

<audio id="player" src="test.mp3" autoplay="autoplay" controls=true></audio>

然后我运行服务器并访问localhost上的网站。音频确实播放但我没有看到完整的控制栏出现。我看到这样的东西

不完整的控制栏

但是，如果我刷新页面，控制栏就会变成一个完整的控制栏，跟踪栏就是音量控制器。

为什么会这样？如何在第一次加载页面时确保它是完整的。

Answer 1

添加宽度的css，然后问题就解决了

audio { width: 200px; display: block; margin:20px; }

Answer 2

您需要提供宽度和进度。然后它会正常工作。 您可以参考https://m.dotdev.co/how-to-build-an-audio-player-with-html5-and-the-progress-element-487cbbbaebfc了解更多详情。