使用vue.js制作一个音乐播放器

好的，下面是一个简单的 Vue.js 音乐播放器的代码示例：

HTML模板：

<div id="app">
  <!-- 音乐列表 -->
  <ul>
    <li v-for="(item, index) in musicList" :key="index" @click="playMusic(index)">
      {{ item.name }}
    </li>
  </ul>

  <!-- 播放器组件 -->
  <van-sticky>
    <van-row>
      <van-col span="6">
        <img :src="currentMusic.cover" alt="" />
      </van-col>
      <van-col span="18">
        <h2>{{ currentMusic.name }}</h2>
        <p>{{ currentMusic.singer }}</p>
        <van-progress :percentage="playProgress" />
        <van-row>
          <van-col span="4">
            <van-icon :name="isPlay ? 'pause' : 'play'" @click="togglePlay" />
          </van-col>
          <van-col span="4">
            <van-icon name="skip-previous" @click="prevMusic" />
          </van-col>
          <van-col span="4">
            <van-icon name="skip-next" @click="nextMusic" />
          </van-col>
        </van-row>
      </van-col>
    </van-row>
  </van-sticky>

  <!-- 音乐播放器 -->
  <audio ref="audio" :src="currentMusic.url" @play="onPlay" @pause="onPause" @timeupdate="onTimeUpdate" />
</div>

CSS样式：

/* 引入vant组件库的样式 */
@import url("https://cdn.jsdelivr.net/npm/vant/lib/index.css");

/* 自定义样式 */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    padding: 10px;
    cursor: pointer;
    &:hover {
      background-color: #eee;
    }
  }
}

img {
  width: 100%;
}

h2 {
  font-size: 14px;
  margin: 0;
}

p {
  font-size: 12px;
  margin: 0;
}

/* 定义sticky组件的位置 */
.van-sticky {
  top: 0;
  width: 100%;
  z-index: 99;
  .van-row {
    background-color: #fff;
    .van-col {
      padding: 10px;
    }
  }
}

Vue.js代码：

new Vue({
  el: "#app",
  data: {
    musicList: [
      {
        name: "歌曲1",
        singer: "歌手1",
        cover: "http://xxx.jpg",
        url: "http://xxx.mp3"
      },
      {
        name: "歌曲2",
        singer: "歌手2",
        cover: "http://xxx.jpg",
        url: "http://xxx.mp3"
      },
      {
        name: "歌曲3",
        singer: "歌手3",
        cover: "http://xxx.jpg",
        url: "http://xxx.mp3"
      }
    ],
    currentMusic: {},
    isPlay: false,
    playProgress: 0
  },
  methods: {
    playMusic(index) {
      // 播放音乐
      this.currentMusic = this.musicList[index];
      this.isPlay = true;
      this.$refs.audio.play();
    },
    togglePlay() {
      // 切换播放状态
      if (this.isPlay) {
        this.$refs.audio.pause();
      } else {
        this.$refs.audio.play();
      }
      this.isPlay = !this.isPlay;
    },
    prevMusic() {
      // 上一曲
      let index = this.musicList.indexOf(this.currentMusic);
      if (index === 0) {
        index = this.musicList.length - 1;
      } else {
        index--;
      }
      this.playMusic(index);
    },
    nextMusic() {
      // 下一曲
      let index = this.musicList.indexOf(this.currentMusic);
      if (index === this.musicList.length - 1) {
        index = 0;
      } else {
        index++;
      }
      this.playMusic(index);
    },
    onPlay() {
      // 音乐开始播放
    },
    onPause() {
      // 音乐暂停
    },
    onTimeUpdate() {
      // 更新播放进度
      let currentTime = this.$refs.audio.currentTime;
      let duration = this.$refs.audio.duration;
      this.playProgress = (currentTime / duration) * 100;
    }
  }
});

这个示例中使用了 Vant 组件库中的 Sticky、Row、Col、Icon 和 Progress 组件，以及 HTML5 的 audio 标签来实现音乐播放器的功能。你可以根据自己的需要进行修改和扩展。