当前位置：首页 > VUE

vue实现音乐页面

2026-01-16 22:20:17VUE

使用 Vue 实现音乐页面

项目初始化

使用 Vue CLI 或 Vite 创建一个新的 Vue 项目。确保安装了必要的依赖，如 vue-router 和 axios。

npm create vue@latest music-app
cd music-app
npm install vue-router axios

页面结构设计

音乐页面通常包含以下组件：

音乐播放器（播放/暂停、进度条、音量控制）
音乐列表（歌曲列表、专辑封面）
搜索功能（按名称或艺术家搜索歌曲）

音乐播放器组件

创建一个 MusicPlayer.vue 组件，用于控制音乐播放。

vue实现音乐页面

<template>
  <div class="music-player">
    <audio ref="audioPlayer" :src="currentSong.url"></audio>
    <div class="controls">
      <button @click="togglePlay">{{ isPlaying ? 'Pause' : 'Play' }}</button>
      <input type="range" v-model="volume" min="0" max="1" step="0.1" @input="setVolume">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPlaying: false,
      currentSong: {},
      volume: 0.5
    };
  },
  methods: {
    togglePlay() {
      const audio = this.$refs.audioPlayer;
      if (this.isPlaying) {
        audio.pause();
      } else {
        audio.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    setVolume() {
      this.$refs.audioPlayer.volume = this.volume;
    }
  }
};
</script>

音乐列表组件

创建一个 MusicList.vue 组件，用于显示歌曲列表。

<template>
  <div class="music-list">
    <div v-for="song in songs" :key="song.id" @click="playSong(song)">
      {{ song.title }} - {{ song.artist }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    songs: {
      type: Array,
      required: true
    }
  },
  methods: {
    playSong(song) {
      this.$emit('play', song);
    }
  }
};
</script>

搜索功能

在 App.vue 中集成搜索功能。

vue实现音乐页面

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search songs...">
    <MusicList :songs="filteredSongs" @play="setCurrentSong" />
    <MusicPlayer :currentSong="currentSong" />
  </div>
</template>

<script>
import MusicList from './components/MusicList.vue';
import MusicPlayer from './components/MusicPlayer.vue';

export default {
  components: {
    MusicList,
    MusicPlayer
  },
  data() {
    return {
      songs: [],
      currentSong: {},
      searchQuery: ''
    };
  },
  computed: {
    filteredSongs() {
      return this.songs.filter(song =>
        song.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
        song.artist.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  },
  methods: {
    setCurrentSong(song) {
      this.currentSong = song;
    }
  },
  async created() {
    const response = await fetch('https://api.example.com/songs');
    this.songs = await response.json();
  }
};
</script>

路由配置

如果需要多页面，配置 vue-router。

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

export default router;

样式优化

使用 CSS 或 SCSS 美化页面。例如：

.music-list {
  display: grid;
  gap: 10px;
}

.music-player {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #f5f5f5;
  padding: 10px;
}