Waves are showing with default audio controls but not with custom controls

[nitria]

I'm creating a simple music app in react and i have an issue on displaying the visuals. If i uncomment the audio element which i added just for testing, the visuals are showing but i dont want to use the audio element because im creating the audio with new Audio() and using my custom controls. Is there a way to show the visuals with custom controls.?

function ShowWave() {
  const { selectedUrl,playSong,pauseSong } = useAppContext();
  useEffect(() => {
    let wave = new Wave();
    wave.fromElement("song", "output", { type: "star" });
  }, []);

  return (
    <div>
   {/* <audio
        id="song"
        type="audio/mp3"
        src={selectedUrl}
        controls
      ></audio> */}
      <canvas id="output" height="500" width="500"></canvas>
<button onClick={playSong}>play</button>
<button onClick={pauseSong}>pause</button>
    </div>
  );
}

[foobar404]

let audio = new Audio();
audio.id = "myAudio";

let wave = new Wave();
wave.fromElement("myAudio","canvasID", {});

Something like this might work, passing it the id of a virtual html element, if not you could try this

let audio = new Audio();

let wave = new Wave();
wave.fromElement(audio ,"canvasID", {});

I believe there is an override that lets you pass an audio element instead of an id

[nitria]

Thanks for the quick reply, i tried both ways before i asked here, below is a simple example i created for demonstration. At the beggining i thought maybe something else from my code was causing the issue but as you can see below it still doesnt show. There are no errors in console.log just in case.

import React, { useEffect, useState, useRef } from "react";
import "./App.css";
import Wave from "@foobar404/wave";
import song from "./Y2Mate.mp3";

function App() {
  let [wave] = useState(new Wave());

  //*****CUSTOM CONTROLS*****//

  // const [isPlaying, setIsplaying] = useState(false);

  // const audioRef = useRef(new Audio(song));
  // audioRef.current.id = "song";

  // useEffect(() => {
  //   if (isPlaying) {
  //     audioRef.current.play();
  //   } else {
  //     audioRef.current.pause();
  //   }
  // }, [isPlaying]);

  useEffect(() => {
    wave.fromElement("song", "output", {
      type: "star",
      colors: ["red", "white", "blue"],
    });
  }, []);

  return (
    <div className="App">
      <audio id="song" src={song} controls></audio>
      <canvas id="output" height="500" width="500"></canvas>

      {/* CUSTOM CONTROLS */}

      {/* {isPlaying ? (
        <button onClick={() => setIsplaying(false)}>pause</button>
      ) : (
        <button onClick={() => setIsplaying(true)}>play</button>
      )} */}
    </div>
  );
}

export default App;

[foobar404]

I dont know if this will work because the audio element wont exist in the DOM, so adding an id to it, im not sure what document.querySelector is gonna do with the id. I would try passing ref.current as the first parameter, and make sure that ref.current is set to a value before you call fromElement. If that doesint work, you could just remove controls from the audio element, and in css, put display: none, then you can add whatever buttons you want, and onClick just pause and play the hidden element.

[nitria]

Thanks for the help, i removed the controls and hid the audio with display: none; it worked fine!