当前位置：首页 > VUE

vue实现音乐跳转

2026-02-17 23:32:53VUE

Vue 实现音乐跳转功能

音乐跳转功能通常涉及音频播放器的控制，包括播放、暂停、跳转到指定时间点等操作。以下是基于 Vue 的实现方法：

使用 HTML5 Audio API

在 Vue 中可以通过 HTML5 的 <audio> 元素或 JavaScript 的 Audio 对象来控制音乐播放和跳转。

<template>
  <div>
    <audio ref="audioPlayer" :src="currentSong.url"></audio>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
    <input type="range" v-model="currentTime" @change="seek" min="0" :max="duration">
    <span>{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSong: {
        url: 'path/to/your/music.mp3'
      },
      currentTime: 0,
      duration: 0
    }
  },
  mounted() {
    this.$refs.audioPlayer.addEventListener('timeupdate', this.updateTime);
    this.$refs.audioPlayer.addEventListener('loadedmetadata', this.updateDuration);
  },
  methods: {
    play() {
      this.$refs.audioPlayer.play();
    },
    pause() {
      this.$refs.audioPlayer.pause();
    },
    seek() {
      this.$refs.audioPlayer.currentTime = this.currentTime;
    },
    updateTime() {
      this.currentTime = this.$refs.audioPlayer.currentTime;
    },
    updateDuration() {
      this.duration = this.$refs.audioPlayer.duration;
    },
    formatTime(seconds) {
      const mins = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60);
      return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
    }
  }
}
</script>

使用第三方库

对于更复杂的音乐播放需求，可以考虑使用第三方库如 Howler.js 或 Vue-Audio。

Howler.js 示例：

import { Howl } from 'howler';

export default {
  data() {
    return {
      sound: null,
      currentTime: 0,
      duration: 0
    }
  },
  created() {
    this.sound = new Howl({
      src: ['path/to/your/music.mp3'],
      onload: () => {
        this.duration = this.sound.duration();
      },
      onplay: () => {
        requestAnimationFrame(this.step);
      }
    });
  },
  methods: {
    play() {
      this.sound.play();
    },
    pause() {
      this.sound.pause();
    },
    seek() {
      this.sound.seek(this.currentTime);
    },
    step() {
      this.currentTime = this.sound.seek();
      if (this.sound.playing()) {
        requestAnimationFrame(this.step);
      }
    }
  }
}

实现播放列表跳转

如果需要实现播放列表中的歌曲跳转功能：

vue实现音乐跳转

export default {
  data() {
    return {
      playlist: [
        { id: 1, title: 'Song 1', url: 'song1.mp3' },
        { id: 2, title: 'Song 2', url: 'song2.mp3' }
      ],
      currentSongIndex: 0,
      player: null
    }
  },
  methods: {
    playSong(index) {
      this.currentSongIndex = index;
      if (this.player) {
        this.player.unload();
      }
      this.player = new Howl({
        src: [this.playlist[index].url],
        onend: () => {
          this.next();
        }
      });
      this.player.play();
    },
    next() {
      const nextIndex = (this.currentSongIndex + 1) % this.playlist.length;
      this.playSong(nextIndex);
    },
    prev() {
      const prevIndex = (this.currentSongIndex - 1 + this.playlist.length) % this.playlist.length;
      this.playSong(prevIndex);
    }
  }
}