前言在web开发过程中，使用音频元素audio的场景有很多，比如音乐播放，语音播放等功能，但是原生组件有以下缺点：原生UIstyle丑陋，追求美感的页面需要重写元素样式，支持重写的样式不多。浏览器兼容性问题，不同的浏览器显示不同的音频元素。由于以上两个问题，我们很难修改原始音频。对于大部分的音频需求，我们可以选择符合我们要求的第三方组件库，比如：西瓜播放器MediaElement。对于UI需求，比如音乐播放器需求，我们必须遵循整个页面的UI主题，这时我们需要自定义编写一个音频组件。在本文中，我们将学习：如何修改音频元素的默认样式如何覆盖音频自定义样式如何修改音频元素的默认样式默认情况下，音频元素是不可见的。需要添加控件属性以使其控件可见。audio元素在CSS中有如下伪元素选择器：audio::-webkit-media-controls-panelaudio::-webkit-media-控件-静音按钮音频::-webkit-media-controls-play-buttonaudio::-webkit-media-controls-timeline-containeraudio::-webkit-media-controls-current-time-displayaudio::-webkit-media-控件-剩余时间-displayaudio::-webkit-media-controls-timelineaudio::-webkit-media-controls-volume-slider-containeraudio::-webkit-media-controls-volume-slideraudio::-webkit-media-控件-搜索后退按钮音频::-webkit-media-controls-seek-forward-buttonaudio::-webkit-media-controls-fullscreen-buttonaudio::-webkit-media-controls-rewind-buttonaudio::-webkit-media-controls-return-to-realtime-buttonaudio::-webkit-media-controls-toggle-closed-captions-button这个伪类选择器可以改变音频元素的基本样式，但是只在Chrome下有效浏览器。我给所有的伪类设置了不同的背景色，最终效果如下图：audio::-webkit-media-controls-xxx{background-color:randomcolor;}即只有一部分可以修改样式，没有提供更精细的修改。如果要设置进度条的颜色，基本上只能自定义和重写播放器。自定义音频播放器接下来，也是我们文章的重点，我们将创建我们自己的自定义音频播放器。我们的自定义播放器，它使用不同的元素来实现控件的UI。然后借助Javascript将音频元素的功能绑定到这些元素。首先我们写一个简单的布局音乐播放器
