如何用 React 制作声音按钮？

Question

我正在尝试使用 TypeScript 用 React 制作鼓。但它总是返回一些错误，我该怎么做？

最后一次尝试是使用 howler 的下面的尝试，但没有用。

import { useState } from "react";
import "./App.css";
import kick from "./assets/kick.mp3";
import snare from "./assets/snare.mp3";
import hiHat from "./assets/hi-hat.mp3";
import tom from "./assets/tom.mp3";
import clap from "./assets/clap.mp3";
import shaker from "./assets/shaker.mp3";
import tambourine from "./assets/tambourine.mp3";
import cymbal from "./assets/cymbal.mp3";
import cowbell from "./assets/cowbell.mp3";
import { Howl, Howler } from "howler";

const sounds = [
  { key: "Q", name: "Kick", src: kick },
  { key: "W", name: "Snare", src: snare },
  { key: "E", name: "Hi-hat", src: hiHat },
  { key: "A", name: "Tom", src: tom },
  { key: "S", name: "Clap", src: clap },
  { key: "D", name: "Shaker", src: shaker },
  { key: "Z", name: "Tambourine", src: tambourine },
  { key: "X", name: "Cymbal", src: cymbal },
  { key: "C", name: "Cowbell", src: cowbell },
];

function App() {
  const [display, setDisplay] = useState("");
  const handlePlay = (src: any) => {
    setDisplay(src);
    const audio = new Howl({ src });
    audio.play();
  };

  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
    const sound = sounds.find((s) => s.key === event.key.toUpperCase());
    if (sound) handlePlay(sound.name);
  };

  Howler.volume(1.0);

  return (
    <div id="drum-machine" onKeyDown={handleKeyDown} tabIndex={0}>
      <div id="display">{display}</div>
      <div id="pad-container">
        {sounds.map((sound) => (
          <button
            className="drum-pad"
            id={sound.name}
            key={sound.key}
            onClick={() => handlePlay(sound.name)}
          >
            {sound.key}
            <audio id={sound.key} />
          </button>
        ))}
      </div>
    </div>
  );
}

export default App;

尝试使用<audio>标签但也不起作用，我认为问题出在导入上但我不知道，一切看起来都很好。

Answer 1

根据我从 Howler 的文档中收集到的信息，

1. 您需要传递声音文件的路径，而不是声音文件本身
2. Howl的 src 属性接受一组源（每种格式 1 个源）所以你可以尝试这样的事情：

// use the path to the sound file instead of the imported sound file itself
const sounds = [
  { key: "Q", name: "Kick", src:"./assets/kick.mp3" },
];

function App() {
  const [display, setDisplay] = useState("");
  const handlePlay = (src: any) => {
    setDisplay(src);
    // pass an array instead of string
    const audio = new Howl({ src: [src] });
    audio.play();
  };
// Your rest of the App
}

Answer 2

您不能 JS 导入 mp3，新的 Howl 需要一个带有 mp3 字符串路径的数组。 请参阅github中的示例。

你可能会做这样的事情：

const sounds = [
  { key: "Q", name: "Kick", src: "./assets/kick.mp3" },
  { key: "W", name: "Snare", src: "./assets/snare.mp3" },
  { key: "E", name: "Hi-hat", src: "./assets/hi-hat.mp3" },
  { key: "A", name: "Tom", src: "./assets/tom.mp3" },
  { key: "S", name: "Clap", src: "./assets/clap.mp3" },
  { key: "D", name: "Shaker", src: "./assets/shaker.mp3" },
  { key: "Z", name: "Tambourine", src: "./assets/tambourine.mp3" },
  { key: "X", name: "Cymbal", src: "./assets/cymbal.mp3" },
  { key: "C", name: "Cowbell", src: "./assets/cowbell.mp3" }
];
//Then
const handlePlay = (sound) => {
  setDisplay(sound.name);
  const audio = new Howl({ src: [sound.src] });
  audio.play();
};

Answer 3

问题解决了，我正在使用“howler”库。 已弃用，更改为“react-crowler”和 function handlePlay。 然后它起作用了。

function handlePlay() 变成这样：

const handlePlay = (src: any) => {
    const sound = new Howl({
      src,
      html5: true,
    });
    sound.play();
};