有没有其他方法实现特定样式的音频控件？

Question

audio的样式是否能改成这样的？

有没有别的办法可以改成这种样式的音频控件，audio好像没法改成这中，有别的方法吗

Answer 1

需要自定义样式, 其实就是用DIV写一个

1. 隐藏原生audio标签
2. 通过div实现自定义样式
3. 控制div操作audio 对象的属性和方法

参考这个:

https://blog.csdn.net/qdm13209211861/article/details/131187893
https://juejin.cn/post/7120613556050984967

Answer 2

对于音频控件样式的修改，一般来说，你可以通过CSS进行定制。CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等衍生语言）文档的呈现。你可以为音频元素添加内联样式，或者使用外部和内部样式表。

如果你希望改变音频控件的样式，你可以尝试以下方法：

1. 使用HTML5的<audio>元素，并使用内联CSS进行样式定制。例如：

<audio controls style="background-color: red;">  <source src="your-audio-file.mp3" type="audio/mpeg">  Your browser does not support the audio element.</audio>

上面的代码将音频控件的背景色改为红色。

2. 使用JavaScript来动态改变样式。你可以通过JavaScript获取音频元素，并更改其样式属性。例如：

var audioElement = document.querySelector('audio');audioElement.style.backgroundColor = 'red';

3. 如果你需要的样式比较复杂，或者需要重复使用，你可能需要创建一个自定义的CSS类。例如：

.custom-audio {  background-color: red;  /* 其他样式属性 */}

然后在HTML中应用这个类：

<audio controls class="custom-audio">  <source src="your-audio-file.mp3" type="audio/mpeg">  Your browser does not support the audio element.</audio>

需要注意的是，CSS可以用于更改音频控件的很多方面，包括但不限于颜色、字体、尺寸、边框等。你可以根据你的具体需求来定制样式。