i'm trying to make a drum with react using typescript. But it's always returning some error, how can i do this?

last try was the below one using howler, but didn't work.

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;

tryied to use tag but also not work, i think the problem is on importing but i don't know, everything looks ok

CodePudding user response：

You can't JS import the mp3s, new Howl is expecting an array with a string path to the mp3. See this example from github.

You could probably do something like:

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();
};

CodePudding user response：

Problem solved! I was using the "howler" library, which is deprecated. Changed for "react-crowler" and the function handlePlay, then it worked.

function handlePlay() become this:

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