如何增大HTML音频播放器尺寸、放大播放按钮并修复进度条高度异常

问题原因 #

使用WebKit伪元素修改原生audio控件样式时，仅单独设置进度条容器高度，没有同步修改内部进度轨道、已播放区段、滑块的样式，会导致已播放深色段和灰色轨道高度错位；同时未给audio外层容器设置匹配的高度，容易出现放大后的控件被裁切的问题。

完整适配代码 #

将原有样式替换为以下代码即可实现控件整体放大、进度条高度对齐的效果：

<!DOCTYPE html>
<html>
<style>
    /* 播放器外层容器设置足够尺寸，避免内部放大的控件被裁切 */
    audio {
        width: 600px;
        height: 54px;
    }

    /* 放大播放/暂停按钮，预留边距避免和其他控件挤压 */
    audio::-webkit-media-controls-play-button {
        transform: scale(2);
        margin: 0 12px;
    }

    /* 进度条整体容器设置高度，清除默认内边距 */
    audio::-webkit-media-controls-timeline {
        height: 20px;
        padding: 0;
        margin: 0 16px;
    }

    /* 灰色进度轨道统一高度 */
    audio::-webkit-media-controls-timeline-track {
        height: 20px !important;
        border-radius: 10px;
    }

    /* 深色已播放区段和轨道保持同高 */
    audio::-webkit-media-controls-timeline-progress-bar {
        height: 20px !important;
        border-radius: 10px;
    }

    /* 放大进度滑块，提升点击识别度 */
    audio::-webkit-media-controls-timeline-thumb {
        height: 18px !important;
        width: 18px !important;
    }
</style>

<body>
    <h1>The audio element</h1>
    <audio controls controlsList="nodownload noplaybackrate">
        <source
            src="https://content.production.cdn.art19.com/segment_lists/d4e00ef7-1edc-41c2-b4c4-505f1742d71d/20220607-VGhlVGltRmVycmlzc1Nob3dfSW5zaWdodHMgZXAgMV9lZGl0ICgxKS5tcDM-697d12ab-6cb9-4ec3-8856-2bbd8d9c4152.mp3"
            type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
</body>
</html>

注意事项 #

• 上述WebKit专属伪元素属于浏览器非标准API，仅适配Chrome、Edge、Safari等基于Chromium或WebKit内核的浏览器。如果需要兼容Firefox，需要额外补充::-moz-range-*系列伪元素的对应样式。
• 样式中添加!important是为了覆盖浏览器内置的默认高优先级样式，避免自定义样式不生效。
• 调整后播放按钮、进度滑块尺寸都做了放大，进度条轨道和已播放区段高度完全对齐，整体播放器尺寸更方便用户识别操作。

内容的提问来源于stack exchange，提问作者Koref Koref