如何使用 JavaScript 構建音板

如何通過創建動態注入播放器的 SoundPlayer 類在 JavaScript 中構建音板，並使其易於將播放映射到 DOM 事件。

開始使用

對於本教程，我們將使用 CheatCode Next.js 樣板作為我們工作的起點。首先，讓我們克隆一個副本：

終端

git clone https://github.com/cheatcode/nextjs-boilerplate

接下來，03 進入項目並安裝其依賴項：

終端

cd nextjs-boilerplate && npm install

最後，啟動開發服務器：

終端

npm run dev

有了所有這些，我們就可以開始了。

構建聲音播放器

為了在我們的音板中實際播放聲音，我們需要一種簡單的方法來即時創建音頻播放器。為此，我們將首先連接一個 JavaScript 類，該類將處理 13 的創建 播放我們的聲音並自動將這些元素注入 DOM 的元素。

/lib/soundPlayer.js

class SoundPlayer {
  constructor() {
    this.sounds = [];
  }

  // We'll implement the API for our class here...
}

export default SoundPlayer;

首先，我們為 20 創建一個骨架 類將幫助我們將聲音加載到 DOM 以及 play 那些聲音。在這裡，我們設置了一個基本的 JavaScript 38 並將其從 43 導出為默認值 .

57裡面 ，我們添加 69 函數（這是在我們的類被 JavaScript 加載到內存時正確調用的函數）並初始化 72 類上的屬性，將其設置為空 89 大批。這裡，92 指的是 109 的當前類實例 .我們在這裡創建一個數組，因為我們需要一種方法來跟踪我們已經加載到 DOM 中的所有聲音。

終端

class SoundPlayer {
  constructor() {
    this.sounds = [];
  }

  load(name, path) {
    this.sounds = [...this.sounds, { name, path }];
    this.injectPlayerIntoPage(name, path);
  }

  injectPlayerIntoPage(name, path) {
    const player = document.createElement("audio");
    player.id = name;
    player.src = path;
    player.volume = 0.5;
    player.type = "audio/mpeg";
    document.body.appendChild(player);
  }
}

export default SoundPlayer;

接下來，我們需要一個簡單的 API（應用程序編程接口，這里通俗地表示“播放器的實現”）來將聲音加載到 DOM 中。為此，我們在上面的類中添加了兩個方法：110 和 125 .第一個將是一個公開的函數，我們將從我們的 UI 中調用它來表示“將此聲音加載到 DOM 中”。

在該函數內部，我們可以看到發生了兩件事。首先，就像我們在上面暗示的那樣，我們想要跟踪我們正在加載的聲音。接收 133 參數（一個易於記憶的名稱來“標記”我們的聲音）和一個 142 （我們應用程序中聲音文件的文字路徑），我們覆蓋 151 我們類的屬性等於 165 的當前值 ，與包含 174 的新對象連接 和 188 傳入 193 .

這裡，207 正在“解包”整個現有 219 數組（無論它是否包含任何內容）。 228 部分在 JavaScript 中稱為擴展運算符（它在 230 之後立即“擴展”值的內容 )。

接下來，使用我們的 241 數組更新，我們需要動態創建 253 我們上面談到的元素。為此，我們添加了一個單獨的方法 268 它從 278 中接受相同的兩個參數 , 280 和 292 .

在該函數內部，我們需要做的第一件事是創建 301 內存中的元素。為此，我們運行 316 指示 JavaScript 創建我們的 329 的內存中（意味著尚未添加到屏幕/DOM）副本 元素。我們存儲結果（我們的 333 的內存 DOM 節點 元素）在變量 347 .

我們這樣做是為了更輕鬆地修改播放器的屬性，然後將其附加到 DOM。具體來說，我們為 350 設置了四個屬性 在我們將其附加到 DOM 之前：

1. 369 設置為 377 我們通過了我們的聲音。
2. 383 設置為 395 複製到計算機上的文件中以獲取聲音。
3. 405 設置為 415 或 50% 以確保我們不會破壞用戶的耳鼓。
4. 426 設置為我們期望的文件類型（對於我們的示例，我們使用 433 文件，所以我們使用 442 MIME 類型 - 在此處查找其他人）。

一旦我們設置了所有這些屬性，最後，我們使用 453 在 469 將我們的音頻播放器附加到 DOM（它在 DOM 中的物理位置無關緊要，我們將在接下來學習）。

/lib/soundPlayer.js

class SoundPlayer {
  constructor() {
    this.sounds = [];
  }

  load(name, path) {
    this.sounds = [...this.sounds, { name, path }];
    this.injectPlayerIntoPage(name, path);
  }

  injectPlayerIntoPage(name, path) {
    const player = document.createElement("audio");
    player.id = name;
    player.src = path;
    player.volume = 0.5;
    player.type = "audio/mpeg";
    document.body.appendChild(player);
  }

  play(name) {
    const player = document.getElementById(name);
    if (player) {
      player.pause();
      player.currentTime = 0;
      player.play();
    }
  }
}

export default SoundPlayer;

總結我們的 471 類，我們需要再添加一個方法：481 .顧名思義，這將為我們播放聲音。為此，首先，我們採用 494 參數（我們將傳遞給 505 更早）並嘗試在頁面上找到具有 516 的元素 與該名稱匹配的屬性。

回想一下，上面我們設置了 524 在我們的 539 標記到 542 我們傳入了。這應該在 DOM 中找到匹配項。如果是，我們首先 550 播放器（如果我們已經在播放中），強制 567 播放器屬性為 574 （即，我們聲音的開始）和然後 584 它。

這對我們的 598 班級。接下來，讓我們連線並開始播放一些聲音！

添加一個 React 頁面組件來測試我們的播放器

因為我們的樣板是基於 Next.js，所以現在，我們將使用 React.js 組件在我們的應用程序中創建一個新頁面，我們可以在其中測試我們的 604 .

/pages/soundboard/index.js

import React from "react";
import SoundPlayer from "../../lib/soundPlayer";

class Soundboard extends React.Component {
  state = {
    sounds: [
      { name: "Kick", file: "/sounds/kick.mp3" },
      { name: "Snare", file: "/sounds/snare.mp3" },
      { name: "Hi-Hat", file: "/sounds/hihat.mp3" },
      { name: "Tom", file: "/sounds/tom.mp3" },
      { name: "Crash", file: "/sounds/crash.mp3" },
    ],
  };

  componentDidMount() {
    const { sounds } = this.state;
    this.player = new SoundPlayer();

    sounds.forEach(({ name, file }) => {
      this.player.load(name, file);
    });
  }

  render() {
    const { sounds } = this.state;

    return (
      <div>
        {sounds.map(({ name, file }) => {
          return (
            <button
              className="btn btn-primary btn-lg"
              style={{ marginRight: "15px" }}
              onClick={() => this.player.play(name)}
            >
              {name}
            </button>
          );
        })}
      </div>
    );
  }
}

Soundboard.propTypes = {};

export default Soundboard;

在 Next.js 中，我們應用程序中的路由或 URL 是由框架根據 614 的內容自動創建的 我們應用程序根目錄下的文件夾。在這裡，創建路線 627 （這最終可以通過 639 訪問 在瀏覽器中），我們創建文件夾 643 並放一個 656 將文件放在代表我們頁面的 React 組件所在的文件夾中。

因為我們的測試組件非常簡單，所以上面我們已經輸出了全部內容。讓我們一步一步來了解所有這些是如何組合在一起的。

首先，我們導入我們的 663 671 中的類 文件。

接下來，我們使用基於類的方法定義一個 React 組件（這樣可以更輕鬆地使用我們的播放器並避免性能問題）。我們要提請注意的第一部分是 686 我們添加到類和 690 的屬性 我們已經設置了一個對像數組的屬性。

這應該開始有意義了。在這裡，我們使用 700 創建所有想要加載到 DOM 中的聲音 我們之前在 715 上編寫的方法 班級。請記住，該函數需要一個 722 和一個 735 我們在這裡定義的論點。

我們將其作為一個對像數組來執行，以便更輕鬆地一次循環並加載所有聲音，我們在 742 中執行此操作 我們的 React 組件上的函數。在那裡，我們使用 JavaScript 對象解構來“提取”753 我們剛剛在 768 上定義的屬性 （可在我們組件的方法中以 773 的形式訪問 ) 然後創建我們的 785 的實例 794 的類 然後將該實例分配回 808 在我們的 817 組件類（這很快就會派上用場）。

接下來，使用那個 822 我們在狀態上定義的數組，我們用 836 循環它 ，再次使用 JavaScript 解構來“提取” 841 和 859 當我們遍歷它們時，數組中每個對象的屬性。使用這些值，我們調用 868 ，將它們傳遞給函數。就像我們之前了解到的，我們希望這會添加每個 871 在我們的數組中到 884 897 上的數組 class' 實例，然後為該聲音的 901 附加一個 DOM 元素 播放器。

所有這些都在 918 中 我們組件類的方法。在這裡，我們再次“摘下”920 935 的數組 , 這次使用 JavaScript 944 循環遍歷數組，允許我們返回一些我們希望 React 為數組的每次迭代（每個聲音）渲染的標記。

因為我們正在構建一個音板，所以我們添加了一個 959 對於每個帶有 960 的聲音 屬性設置為調用 976 的函數 傳入 980 991 中聲音對象的屬性 大批。有了這個，我們就有了音板！

現在當我們點擊一個按鈕時，我們應該會聽到播放文件中相關的聲音。

而已！如果您想添加自己的自定義聲音，只需確保將它們添加到 1002 應用程序中的文件夾，然後更新 1010 狀態數組。

總結

在本教程中，我們學習瞭如何使用 JavaScript 創建音板。為此，我們首先創建了一個 JavaScript 類，該類幫助我們動態創建可以通過唯一名稱引用的音頻播放器。在那個類上，我們還添加了一個 1027 方法來簡化我們的聲音播放。

為了為我們的音板構建 UI，我們定義了一個 React 組件，它創建了音板類的一個實例，加載到我們首選的聲音列表中，然後呈現一個按鈕列表，每個按鈕都調用 1038 該按鈕所代表的聲音的方法。