听歌新姿势：YesPlayMusic变速不变调功能让每首歌都有专属节奏

你是否曾遇到过这样的困扰：想细细品味一首歌的歌词，却嫌歌曲节奏太快？想跟着音乐锻炼，却找不到匹配节拍的歌曲速度？YesPlayMusic作为一款基于Electron的高质量音乐播放器，虽然默认未直接提供播放速度调节功能，但通过深入了解其播放核心机制，我们可以找到实现变速播放的解决方案，让你轻松享受"变速不变调"的个性化听歌体验。## 播放器核心架构解析YesPlayMusic的播放功能主要...

gitblog_00063

302人浏览 · 2025-09-19 03:07:00

gitblog_00063 · 2025-09-19 03:07:00 发布

听歌新姿势：YesPlayMusic变速不变调功能让每首歌都有专属节奏

【免费下载链接】YesPlayMusic qier222/YesPlayMusic: 是一个基于 Electron 的高质量音乐播放器，支持多种音乐格式和云音乐服务。该项目提供了一个简单易用的音乐播放器，可以方便地实现音乐播放和管理，同时支持多种音乐格式和云音乐服务。项目地址: https://gitcode.com/gh_mirrors/ye/YesPlayMusic

播放器核心架构解析

YesPlayMusic的播放功能主要由src/components/Player.vue和src/utils/Player.js两个核心文件控制。Player.vue负责播放界面的渲染，包括进度条、播放控制按钮等UI元素，而Player.js则是播放逻辑的核心，采用Howler.js音频库处理音频播放。

Howler.js作为一款功能强大的Web音频库，本身支持播放速度调节功能。在Player.js中，我们可以看到Howler实例的创建代码：

this._howler = new Howl({
  src: [source],
  html5: true,
  preload: true,
  format: ['mp3', 'flac'],
  onend: () => {
    this._nextTrackCallback();
  },
});

虽然当前代码中没有设置rate属性（播放速度），但Howler.js的API支持通过rate()方法动态调整播放速度，这为我们实现变速播放提供了可能。

变速播放实现方案

要实现播放速度调节功能，我们需要从以下几个方面进行修改：

1. 添加速度控制UI

首先在Player.vue的控制区域添加速度选择控件：

<div class="speed-control">
  <select v-model="playbackRate" @change="changePlaybackRate">
    <option value="0.75">0.75x</option>
    <option value="1.0" selected>1.0x</option>
    <option value="1.25">1.25x</option>
    <option value="1.5">1.5x</option>
    <option value="2.0">2.0x</option>
  </select>
</div>

2. 实现速度调节方法

在Player.vue中添加播放速度调节方法，通过调用Howler.js的rate方法：

methods: {
  changePlaybackRate(rate) {
    this.player.setPlaybackRate(rate);
  }
}

3. 修改Player.js核心逻辑

在src/utils/Player.js中添加播放速度控制相关代码：

// 添加播放速度属性
constructor() {
  // ... 现有代码 ...
  this._playbackRate = 1.0; // 默认播放速度
}

// 设置播放速度
setPlaybackRate(rate) {
  this._playbackRate = rate;
  if (this._howler) {
    this._howler.rate(rate);
    // 更新媒体会话中的播放速度信息
    this._updateMediaSessionPositionState();
  }
}

// 更新媒体会话状态，添加播放速度信息
_updateMediaSessionPositionState() {
  if ('mediaSession' in navigator && 'setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: ~~(this.currentTrack.dt / 1000),
      playbackRate: this._playbackRate, // 添加播放速度信息
      position: this.seek(),
    });
  }
}