当前位置：首页 > VUE

vue 实现音乐

2026-03-07 12:52:51VUE

Vue 实现音乐播放功能

使用 Vue 实现音乐播放功能可以通过以下步骤完成，结合 HTML5 的 <audio> 元素和 Vue 的数据绑定特性。

创建 Vue 项目

确保已安装 Vue CLI，通过以下命令创建新项目：

vue create music-player
cd music-player

安装依赖

如果需要使用第三方库（如 howler.js 或 vue-audio-visual），可以通过 npm 安装：

npm install howler.js

基本音乐播放器实现

在 Vue 组件中，使用 <audio> 标签和 Vue 的数据绑定控制播放状态。

<template>
  <div>
    <audio ref="audioPlayer" :src="currentSong.url" @timeupdate="updateTime"></audio>
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
    <input type="range" v-model="currentTime" max="100" @input="seek">
    <span>{{ formatTime(currentTime) }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSong: {
        url: 'path/to/your/music.mp3',
        title: '歌曲名称'
      },
      isPlaying: false,
      currentTime: 0,
      duration: 0
    };
  },
  methods: {
    togglePlay() {
      const audio = this.$refs.audioPlayer;
      if (this.isPlaying) {
        audio.pause();
      } else {
        audio.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    updateTime(e) {
      const audio = e.target;
      this.currentTime = (audio.currentTime / audio.duration) * 100;
      this.duration = audio.duration;
    },
    seek(e) {
      const audio = this.$refs.audioPlayer;
      audio.currentTime = (e.target.value / 100) * audio.duration;
    },
    formatTime(percent) {
      const time = (percent / 100) * this.duration;
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }
  }
};
</script>

使用第三方库（Howler.js）

如果需要更高级的功能（如音频可视化），可以使用 howler.js。

<template>
  <div>
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
  </div>
</template>

<script>
import { Howl } from 'howler';

export default {
  data() {
    return {
      sound: null,
      isPlaying: false
    };
  },
  created() {
    this.sound = new Howl({
      src: ['path/to/your/music.mp3'],
      onend: () => {
        this.isPlaying = false;
      }
    });
  },
  methods: {
    togglePlay() {
      if (this.isPlaying) {
        this.sound.pause();
      } else {
        this.sound.play();
      }
      this.isPlaying = !this.isPlaying;
    }
  }
};
</script>

实现播放列表

扩展功能以支持多首歌曲切换。

<template>
  <div>
    <audio ref="audioPlayer" :src="currentSong.url" @ended="nextSong"></audio>
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
    <button @click="prevSong">上一首</button>
    <button @click="nextSong">下一首</button>
    <ul>
      <li v-for="(song, index) in playlist" :key="index" @click="playSong(index)">
        {{ song.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playlist: [
        { url: 'path/to/song1.mp3', title: '歌曲1' },
        { url: 'path/to/song2.mp3', title: '歌曲2' }
      ],
      currentSongIndex: 0,
      isPlaying: false
    };
  },
  computed: {
    currentSong() {
      return this.playlist[this.currentSongIndex];
    }
  },
  methods: {
    togglePlay() {
      const audio = this.$refs.audioPlayer;
      if (this.isPlaying) {
        audio.pause();
      } else {
        audio.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    playSong(index) {
      this.currentSongIndex = index;
      this.isPlaying = true;
      this.$nextTick(() => {
        this.$refs.audioPlayer.play();
      });
    },
    prevSong() {
      this.currentSongIndex = (this.currentSongIndex - 1 + this.playlist.length) % this.playlist.length;
      this.playSong(this.currentSongIndex);
    },
    nextSong() {
      this.currentSongIndex = (this.currentSongIndex + 1) % this.playlist.length;
      this.playSong(this.currentSongIndex);
    }
  }
};
</script>

音频可视化

使用 vue-audio-visual 实现音频频谱可视化。

vue 实现音乐

npm install vue-audio-visual

<template>
  <div>
    <audio ref="audioPlayer" :src="currentSong.url"></audio>
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
    <vue-audio-visual
      :audio-element="$refs.audioPlayer"
      :width="300"
      :height="100"
      :bar-width="2"
      :gap="1"
      :fft-size="64"
    />
  </div>
</template>

<script>
import VueAudioVisual from 'vue-audio-visual';

export default {
  components: { VueAudioVisual },
  data() {
    return {
      currentSong: { url: 'path/to/your/music.mp3' },
      isPlaying: false
    };
  },
  methods: {
    togglePlay() {
      const audio = this.$refs.audioPlayer;
      if (this.isPlaying) {
        audio.pause();
      } else {
        audio.play();
      }
      this.isPlaying = !this.isPlaying;
    }
  }
};
</script>