当前位置：首页 > VUE

vue实现音乐跳转

2026-03-29 23:56:54VUE

Vue实现音乐跳转功能

在Vue中实现音乐跳转功能通常涉及音频播放器的控制，包括进度条拖拽、时间显示和跳转逻辑。以下是实现方法：

安装依赖 使用howler.js或原生HTML5的<audio>标签作为音频播放核心。若项目未安装howler.js，可通过npm安装：

npm install howler

基础音频播放组件 创建一个Vue组件管理音频播放：

<template>
  <div>
    <audio ref="audioPlayer" @timeupdate="updateTime"></audio>
    <input 
      type="range" 
      v-model="currentTime" 
      :max="duration" 
      @input="seekAudio"
    >
    <span>{{ formattedTime }}</span>
  </div>
</template>

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

export default {
  data() {
    return {
      sound: null,
      currentTime: 0,
      duration: 0,
      isPlaying: false
    };
  },
  computed: {
    formattedTime() {
      const minutes = Math.floor(this.currentTime / 60);
      const seconds = Math.floor(this.currentTime % 60);
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }
  },
  methods: {
    initAudio(src) {
      this.sound = new Howl({
        src: [src],
        html5: true,
        onplay: () => {
          this.duration = this.sound.duration();
          this.isPlaying = true;
        },
        onend: () => {
          this.isPlaying = false;
        }
      });
    },
    updateTime() {
      if (this.sound) {
        this.currentTime = this.sound.seek();
      }
    },
    seekAudio() {
      if (this.sound) {
        this.sound.seek(this.currentTime);
      }
    }
  },
  mounted() {
    this.initAudio('your-audio-file.mp3');
  }
};
</script>

实现跳转逻辑

进度条跳转
绑定input事件到进度条，通过修改currentTime触发seekAudio方法，调用howler.js的seek()方法跳转至指定时间点。

按钮跳转
添加前进/后退按钮，通过固定时间增量实现跳转：

<button @click="skip(-10)">后退10秒</button>
<button @click="skip(10)">前进10秒</button>

methods: {
  skip(seconds) {
    const newTime = this.sound.seek() + seconds;
    this.sound.seek(Math.max(0, Math.min(newTime, this.duration)));
  }
}

URL时间参数跳转
若需从URL哈希或参数跳转，可在mounted中解析时间：

mounted() {
  const timeParam = this.$route.query.time; // 假设URL为?time=30
  if (timeParam) {
    this.currentTime = parseFloat(timeParam);
    this.seekAudio();
  }
}

注意事项

vue实现音乐跳转