vue中比较好看的音频播放器代码

有很多好看的Vue音频播放器组件可以使用，其中一款比较受欢迎的是Vue-Audio-Player。它是一个基于Vue.js和HTML5的音频播放器组件，支持拖动进度条、音量控制、播放列表等功能，并且可以自定义样式。以下是一个简单的示例代码：

1. 安装Vue-Audio-Player组件

npm install vue-audio-player --save

2. 在Vue项目中注册Vue-Audio-Player组件

import VueAudioPlayer from 'vue-audio-player';
import 'vue-audio-player/dist/vue-audio-player.css';

export default {
  components: {
    VueAudioPlayer
  }
}

3. 在Vue模板中使用Vue-Audio-Player组件

<vue-audio-player
  :src="audioSrc"
  :autoplay="false"
  :loop="false"
  :preload="true"
  @ended="onEnded"
  @timeupdate="onTimeupdate"
  :color="color"
  :waveColor="waveColor"
  :progressColor="progressColor"
  :sliderColor="sliderColor"
  :barWidth="barWidth"
  :sliderHeight="sliderHeight"
  :barHeight="barHeight"
  :sliderWidth="sliderWidth"
  :waveHeight="waveHeight"
  :waveWidth="waveWidth"
  :showFilledWave="showFilledWave"
  :mediaSession="mediaSession"
  :hideTime="false"
  :hideTitle="false"
  :title="title"
  :artist="artist"
  :album="album"
  :albumImage="albumImage"
  :preloadAudio="true"
  :maxTime="maxTime"
  :currentTime="currentTime"
  :initialVolume="initialVolume"
  @timeupdate="timeupdate"
  @volumechange="volumechange"
  @loadedmetadata="loadedmetadata"
  @audioprocess="audioprocess"
  @ended="ended"
  @pause="pause"
  @play="play"
  @seeked="seeked"
  @seeking="seeking"
  @stalled="stalled"
  @suspend="suspend"
  @waiting="waiting"
></vue-audio-player>

在上述代码中，我们使用Vue-Audio-Player组件来实现音频播放器，可以通过设置组件的各种属性来自定义样式和功能。比如，我们可以设置音频的src属性、autoplay属性、loop属性等来控制音频的播放。我们还可以设置组件的颜色、进度条颜色、音量控制器颜色、进度条高度、音波高度等等来自定义样式。

以上是一个简单的Vue-Audio-Player示例，你可以根据自己的需求进行修改和扩展。如果需要更多自定义功能，可以查看Vue-Audio-Player的官方文档。