写一个vue音乐播放器组件代码

好的，以下是一个简单的Vue音乐播放器组件的代码示例：

<template>
<div class="music-player">
<!-- 音乐播放器界面 -->
<audio ref="audio" :src="audioSrc" @play="onPlay" @pause="onPause" @timeupdate="onTimeUpdate"></audio>
<div class="audio-info">
<div class="audio-title">{{ title }}</div>
<div class="audio-artist">{{ artist }}</div>
</div>
<div class="audio-controls">
<div class="play-pause-btn" @click="togglePlay">
<i v-if="playing" class="fa fa-pause"></i>
<i v-else class="fa fa-play"></i>
</div>
<div class="time-bar">
<div class="time-progress" :style="{ width: timeProgress }"></div>
</div>
</div>
</div>
</template>

<script>
export default {
name: 'MusicPlayer',
props: {
audioSrc: String,
title: String,
artist: String
},
data() {
return {
audio: null,
playing: false,
currentTime: 0,
totalTime: 0,
}
},
methods: {
onPlay() {
this.playing = true
},
onPause() {
this.playing = false
},
togglePlay() {
if (this.playing) {
this.audio.pause()
} else {
this.audio.play()
}
},
onTimeUpdate() {
this.currentTime = this.audio.currentTime
this.totalTime = this.audio.duration
},
},
computed: {
timeProgress() {