请写一份基于VUE的html可播放的音乐播放器代码（播放歌曲为Quinn葵因的《虚无主义者》，加上CSS和JS（记得区分），

以下是一份基于Vue.js的简单音乐播放器代码，包括HTML、CSS和JS。你可以将歌曲链接替换为Quinn葵因的《虚无主义者》的链接，以实现播放该歌曲的功能。

HTML:

<template>
  <div class="music-player">
    <div class="player-controls">
      <button @click="playPause">
        <i :class="isPlaying ? 'fa fa-pause' : 'fa fa-play'"></i>
      </button>
      <div class="progress-bar">
        <div class="progress" :style="{ width: progress + '%' }"></div>
      </div>
    </div>
    <audio ref="audio" :src="songUrl" @timeupdate="updateProgress"></audio>
  </div>
</template>

CSS:

.music-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 24px;
  margin: 0 10px;
  outline: none;
}

.progress-bar {
  background-color: #eee;
  height: 4px;
  width: 300px;
}

.progress {
  background-color: #333;
  height: 4px;
}

.fa {
  color: #333;
}

JS:

<script>
export default {
  data() {
    return {
      isPlaying: false,
      progress: 0,
      songUrl: 'https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3' // 歌曲链接
    }
  },
  methods: {
    playPause() {
      const audio = this.$refs.audio
      if (this.isPlaying) {
        audio.pause()
      } else {
        audio.play()
      }
      this.isPlaying = !this.isPlaying
    },
    updateProgress() {
      const audio = this.$refs.audio
      const progress = (audio.currentTime / audio.duration) * 100
      this.progress = progress.toFixed(2)
    }
  }
}
</script>