键盘快捷键 Spotify - TypeScript

介绍

本文将介绍如何使用 TypeScript 编写一个 Spotify 的键盘快捷键应用程序。

Spotify 是一个流行的音乐流媒体服务，许多人使用它来收听音乐。本文将展示如何使用 TypeScript 和 Spotify Web API 来创建一个能在 Windows 或 Mac 上运行的键盘快捷键应用程序。本应用程序将有多个快捷键，允许用户接近 Spotify 的许多功能。

准备工作

在开始之前需要安装以下工具：

• Node.js
• TypeScript
• npm

在继续之前，需要先创建一个 Spotify 开发者帐户。可以通过以下链接创建账户：https://developer.spotify.com/dashboard/

创建账户后，在 Spotify 开发者控制台中创建一个新应用程序。创建应用程序后会获得一个客户端 ID 和密钥。这些信息将在编写应用程序时使用。

开始编写代码

在新建一个空目录并打开命令行，执行以下命令初始化一个 TypeScript 项目：

npm init -y
npm install typescript ts-node @types/node --save-dev

上述命令会在项目中安装 TypeScript 和一些必要的依赖项。

现在可以使用以下命令在项目根目录中创建一个 app.ts 文件：

touch app.ts

在 app.ts 文件中，先引入必要的依赖项和类型定义：

import { KeyboardEvent } from 'node';
import SpotifyWebApi from 'spotify-web-api-node';
import open from 'open';

declare const process: {
  exit: (code?: number) => void,
  env: {
    SPOTIFY_CLIENT_ID: string,
    SPOTIFY_CLIENT_SECRET: string,
    SPOTIFY_REDIRECT_URL: string,
  },
};

在上面的代码中，我们引入了 node，spotify-web-api-node 和 open 这三个依赖项。而 process 对象包含了一些系统级别的变量，用于读取环境变量中的 Spotify 客户端 ID，客户端密钥和重定向 URL。

在 app.ts 文件中创建一个 SpotifyKeyboardShortcuts 类：

class SpotifyKeyboardShortcuts {
  private spotifyApi: SpotifyWebApi;
  private currentTrackId: string | undefined;

  constructor() {
    this.spotifyApi = new SpotifyWebApi({
      clientId: process.env.SPOTIFY_CLIENT_ID,
      clientSecret: process.env.SPOTIFY_CLIENT_SECRET,
      redirectUri: process.env.SPOTIFY_REDIRECT_URI,
    });

    // TODO: authenticate user

    this.initKeyboardShortcuts();
  }

  private initKeyboardShortcuts() {
    // TODO: add keyboard shortcuts
  }
}

new SpotifyKeyboardShortcuts();

在上面的代码中，我们创建了一个 SpotifyKeyboardShortcuts 类，其中包含两个私有成员变量 spotifyApi 和 currentTrackId，还有一个构造函数。在构造函数中，我们创建了一个 SpotifyWebApi 实例，并读取了环境变量来设置 clientId、clientSecret 和重定向 URL。然后，我们调用 initKeyboardShortcuts 方法来添加我们的键盘快捷键。

接下来，我们将在 initKeyboardShortcuts 方法中添加我们的键盘快捷键。对于每个流程，我们将使用 keyboard-js 库来监听键盘事件。根据键盘输入添加事件监听器，并在捕获事件时执行相应的操作。

import keyboardJS from 'keyboardjs';

// ...

private initKeyboardShortcuts() {
  // Play/Pause
  keyboardJS.bind('space', (e: KeyboardEvent) => {
    e.preventDefault();

    if (this.currentTrackId === undefined) {
      return;
    }

    this.spotifyApi.getMyCurrentPlaybackState().then(response => {
      const { is_playing } = response.body;

      if (is_playing) {
        return this.spotifyApi.pause();
      }

      return this.spotifyApi.play();
    }).catch(console.error);
  });

  // Next Track
  keyboardJS.bind(['right'], (e: KeyboardEvent) => {
    e.preventDefault();

    return this.spotifyApi.skipToNext().catch(console.error);
  });

  // Previous Track
  keyboardJS.bind(['left'], (e: KeyboardEvent) => {
    e.preventDefault();

    return this.spotifyApi.skipToPrevious().catch(console.error);
  });

  // Open Current Song
  keyboardJS.bind(['o'], (e: KeyboardEvent) => {
    e.preventDefault();

    if (this.currentTrackId === undefined) {
      return;
    }

    const url = `https://open.spotify.com/track/${this.currentTrackId}`;
    return open(url);
  });

  // TODO: Add more keyboard shortcuts
}

如上所示，我们添加了四个键盘快捷键：

• space：播放/暂停当前歌曲
• right：跳到下一首歌
• left：跳到上一首歌
• o：在 Spotify 中打开当前播放的歌曲

我们可以添加更多的快捷键，如将当前歌曲加入到喜欢的曲目中、向当前播放列表添加歌曲、查找曲目等。

现在可以使用以下命令在命令行中启动应用程序：

npx ts-node app.ts

结论

在本文中，我们介绍了如何使用 TypeScript 和 Spotify Web API 创建一个可同时运行在 Windows 或 Mac 上的键盘快捷键应用程序。我们使用了 spotify-web-api-node 库来与 Spotify API 进行交互，并使用了 keyboardjs 库来监听键盘事件。通过添加快捷键，我们能够更加高效地使用 Spotify。