用vue编写一个音乐播放器

好的，这里提供一个基于Vue.js的简单音乐播放器示例。

首先，我们需要准备一个音乐文件和一些歌曲信息。在这个示例中，我们将使用以下歌曲信息：

[
  {
    id: 1,
    title: "Shape of You",
    artist: "Ed Sheeran",
    album: "÷",
    duration: 233
    url: "https://xxx.xxx/shape_of_you.mp3"
  },
  {
    id: 2,
    title: "Sugar",
    artist: "Maroon 5",
    album: "V",
    duration: 235
    url: "https://xxx.xxx/sugar.mp3"
  },
  // ...
]

接下来，我们可以编写一个音乐播放器组件`MusicPlayer`，如下所示：

<template>
  <div class="music-player">
    <div class="music-info">
      <div class="music-title">{{ currentSong.title }}</div>
      <div class="music-artist">{{ currentSong.artist }}</div>
    </div>
    <div class="music-controls">
      <button class="play-btn" :class="{ 'playing': isPlaying }" @click="togglePlay"></button>
      <div class="progress-bar">
        <div class="progress" :style="{ width: progress + '%' }"></div>
      </div>
      <div class="time">{{ currentTime }} / {{ duration }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      songs: [
        {
          id: 1,
          title: "Shape of You",
          artist: "Ed Sheeran",
          album: "÷",
          duration: 233,
          url: "https://xxx.xxx/shape_of_you.mp3"
        },
        {
          id: 2,
          title: "Sugar",
          artist: "Maroon 5",
          album: "V",
          duration: 235,
          url: "https://xxx.xxx/sugar.mp3"
        },
        // ...
      ],
      currentSongIndex: 0,
      isPlaying: false,
      currentTime: 0,
      duration: 0,
      progress: 0,
      audio: null
    };
  },
  computed: {
    currentSong() {
      return this.songs[this.currentSongIndex];
    }
  },
  mounted() {
    this.audio = new Audio();
    this.audio.addEventListener("timeupdate", this.updateTime);
    this.audio.addEventListener("ended", this.nextSong);
    this.loadSong();
  },
  methods: {
    loadSong() {
      this.audio.src = this.currentSong.url;
      this.audio.load();
      this.duration = this.currentSong.duration;
    },
    togglePlay() {
      if (this.isPlaying) {
        this.audio.pause();
      } else {
        this.audio.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    updateTime() {
      this.currentTime = Math.floor(this.audio.currentTime);
      this.progress = (this.currentTime / this.duration) * 100;
    },
    nextSong() {
      this.currentSongIndex = (this.currentSongIndex + 1) % this.songs.length;
      this.loadSong();
      this.audio.play();
      this.isPlaying = true;
    }
  }
};
</script>

<style scoped>
.music-player {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 300px;
  padding: 20px;
  background-color: #f2f2f2;
}

.music-info {
  text-align: center;
  margin-bottom: 20px;
}

.music-title {
  font-size: 24px;
  font-weight: bold;
}

.music-artist {
  font-size: 16px;
  color: #999;
}

.music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.play-btn {
  display: block;
  width: 80px;
  height: 80px;
  border: none;
  border-radius: 50%;
  background-color: #f44336;
  background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_play_circle_filled_48px-512.png");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.playing {
  background-color: #4caf50;
}

.playing:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-left: 40px solid #fff;
  border-bottom: 25px solid transparent;
  margin-left: 20px;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background-color: #ccc;
  margin: 10px 0;
}

.progress {
  width: 0;
  height: 100%;
  background-color: #f44336;
}

.time {
  font-size: 14px;
  color: #999;
}
</style>

在这个示例中，我们定义了一个`MusicPlayer`组件，并使用`data`属性来存储歌曲列表、当前歌曲索引、播放状态、当前播放时间、音频对象等信息。我们还使用计算属性`currentSong`来获取当前歌曲的信息。

在`mounted`钩子函数中，我们创建了一个`Audio`对象，并添加了`timeupdate`和`ended`事件的监听器，分别用于更新当前播放时间和切换到下一首歌曲。我们还调用了`loadSong`方法来加载当前歌曲信息，并将歌曲时长设置为`duration`属性的值。

在`methods`属性中，我们定义了一些方法来控制音乐播放器的行为。`loadSong`方法用于加载当前歌曲信息，`togglePlay`方法用于切换播放状态，`updateTime`方法用于更新当前播放时间和进度条，`nextSong`方法用于切换到下一首歌曲。

最后，我们在模板中使用了一些Vue.js的指令和事件监听器，来渲染音乐播放器的界面并控制其行为。

以上就是一个简单的基于Vue.js的音乐播放器示例，您可以根据自己的需求进行修改和扩展。