vue实现音乐跳转

使用 Vue 实现音乐跳转功能

在 Vue 中实现音乐跳转功能，通常需要结合 HTML5 的 <audio> 元素和 Vue 的数据绑定及事件处理机制。以下是实现音乐跳转的几种常见方法。

基本音乐播放功能

创建一个简单的音乐播放器，包含播放、暂停和跳转功能。

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

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

实现音乐列表跳转

如果需要从一个音乐跳转到另一个音乐，可以创建一个音乐列表并实现切换功能。

<template>
  <div>
    <audio ref="audioPlayer" :src="currentSong.url" @ended="nextSong"></audio>
    <ul>
      <li 
        v-for="(song, index) in songs" 
        :key="index" 
        @click="playSong(index)"
        :class="{ active: currentIndex === index }"
      >
        {{ song.name }}
      </li>
    </ul>
    <button @click="prevSong">上一首</button>
    <button @click="nextSong">下一首</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      songs: [
        { name: '歌曲1', url: 'path/to/song1.mp3' },
        { name: '歌曲2', url: 'path/to/song2.mp3' },
        { name: '歌曲3', url: 'path/to/song3.mp3' }
      ],
      currentIndex: 0,
      isPlaying: false
    }
  },
  computed: {
    currentSong() {
      return this.songs[this.currentIndex];
    }
  },
  methods: {
    playSong(index) {
      this.currentIndex = index;
      this.$refs.audioPlayer.play();
      this.isPlaying = true;
    },
    prevSong() {
      this.currentIndex = (this.currentIndex - 1 + this.songs.length) % this.songs.length;
      this.$refs.audioPlayer.play();
    },
    nextSong() {
      this.currentIndex = (this.currentIndex + 1) % this.songs.length;
      this.$refs.audioPlayer.play();
    }
  }
}
</script>

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

使用第三方库实现高级功能

如果需要更复杂的音乐播放功能，可以考虑使用第三方库如 howler.js 或 vue-aplayer。

安装 vue-aplayer：

npm install vue-aplayer

使用示例：

<template>
  <div>
    <aplayer 
      :music="{
        title: '歌曲名',
        artist: '艺术家',
        src: 'path/to/song.mp3',
        pic: 'path/to/cover.jpg'
      }"
      :list="songs"
    />
  </div>
</template>

<script>
import Aplayer from 'vue-aplayer'

export default {
  components: {
    Aplayer
  },
  data() {
    return {
      songs: [
        {
          title: '歌曲1',
          artist: '艺术家1',
          src: 'path/to/song1.mp3',
          pic: 'path/to/cover1.jpg'
        },
        {
          title: '歌曲2',
          artist: '艺术家2',
          src: 'path/to/song2.mp3',
          pic: 'path/to/cover2.jpg'
        }
      ]
    }
  }
}
</script>

实现精确跳转功能

如果需要实现精确到秒的跳转功能，可以扩展基础播放器的功能。

<template>
  <div>
    <audio ref="audioPlayer" :src="currentSong.url"></audio>
    <input 
      type="number" 
      v-model="seekTime" 
      min="0" 
      :max="duration" 
      placeholder="输入跳转时间(秒)"
    >
    <button @click="seekToTime">跳转</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSong: {
        url: 'path/to/your/music.mp3'
      },
      seekTime: 0,
      duration: 0
    }
  },
  mounted() {
    this.$refs.audioPlayer.addEventListener('loadedmetadata', () => {
      this.duration = this.$refs.audioPlayer.duration;
    });
  },
  methods: {
    seekToTime() {
      if (this.seekTime >= 0 && this.seekTime <= this.duration) {
        this.$refs.audioPlayer.currentTime = this.seekTime;
      }
    }
  }
}
</script>

以上方法提供了从基础到进阶的音乐跳转功能实现方式，可以根据具体需求选择适合的方案。