vue 修改audio默认样式

可以通过在 Vue 中使用 CSS 来修改 `audio` 元素的默认样式。以下是一些示例代码，你可以在其中修改 `audio` 元素的样式：

<template>
  <div>
    <audio controls>
      <source src="example.mp3" type="audio/mpeg">
    </audio>
  </div>
</template>

<style>
  /* 修改音频控件的默认样式 */
  audio {
    width: 100%;
    height: 50px;
    background-color: #f2f2f2;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 16px;
  }

  audio::-webkit-media-controls-panel {
    background-color: #f2f2f2;
  }

  audio::-webkit-media-controls-timeline {
    background-color: #ccc;
  }
</style>

在上面的代码中，我们通过 `audio` 元素的选择器来修改它的默认样式。我们添加了一些 CSS 属性，如 `width`、`height`、`background-color`、`border`、`outline`、`padding` 和 `font-size`，以更改音频控件的样式。此外，我们还使用了 `::-webkit-media-controls-panel` 和 `::-webkit-media-controls-timeline` 伪元素选择器来更改音频控件的进度条和控制面板的样式。

请注意，这些样式可能需要根据你的需求进行修改。