Multiple Wavesurfer instances and bottom player in React / Next.js (Soundcloud like implementation)

[jeanchaneto]

Hello I hope someone could help with the following:

I am doing a project using next.js 12 and wavesurfer.js

I need to have multiple tracks with waveforms and Play/pause showing on the same page. When pressing play, I need to have a bottom player also showing wave form of the track being played + controls. Very much like it is implemented on Soundcloud. The important point is to have the bottom audio player still playing whilst browsing other pages throughout the website so obviously via context.

Could someone give me some pointers about how to go to implement this or even some resources ? It is quite a common implementation and yet I don't seem to see much code examples out there and I did try multiple searches on here.

So far I managed to generate multiple instances of wave surfer and manage the instances via react context to ensure only one is playing at a time but implementing the bottom player proves much more difficult.

Below is my WaveSurferPlayer component any help would be greatly appreciated 🙏🏻

import { PlayIcon, PauseIcon } from "@heroicons/react/20/solid";
import React from "react";

// Create a React component that will render wavesurfer.
import WaveSurfer from "wavesurfer.js";
import { useWaveSurferCtx } from "../context/waveSurferContext";

import { useCallback, useEffect, useRef, useState } from "react";

//format time
const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.floor(seconds % 60);
  return `${minutes}:${remainingSeconds < 10 ? "0" : ""}${remainingSeconds}`;
};

// Props are wavesurfer options.
const WaveSurferPlayer = React.memo((props) => {
  const containerRef = useRef();
  const [currentTime, setCurrentTime] = useState(0);

  const {
    waveSurferInstances,
    setWaveSurferInstances,
    currentlyPlaying,
    setCurrentlyPlaying,
  } = useWaveSurferCtx();

  useEffect(() => {
    const ws = WaveSurfer.create({
      container: containerRef.current,
      ...props,
    });

    setWaveSurferInstances((prev) => ({ ...prev, [props.url]: ws }));

    return () => {
      ws.destroy();
    };
  }, [props, setWaveSurferInstances]);

  const onPlayClick = useCallback(() => {
    const wavesurfer = waveSurferInstances[props.url];

    if (!wavesurfer) return;

    if (wavesurfer.isPlaying()) {
      wavesurfer.pause();
      setCurrentlyPlaying(null);
      setCurrentTime(0);
    } else {
      if (currentlyPlaying && currentlyPlaying !== props.url) {
        waveSurferInstances[currentlyPlaying].pause();
      }

      wavesurfer.play();
      setCurrentlyPlaying(props.url);
      wavesurfer.on("timeupdate", (currentTime) => setCurrentTime(currentTime));
    }
  }, [waveSurferInstances, currentlyPlaying, setCurrentlyPlaying, props.url]);

  return (
    <div className= {`w-full mr-4 flex ${props.singlePage ? 'flex-col md:flex-row gap-6 items-center ' : ''}`} >
      <div
        className=" group mr-4 max-w-fit rounded-lg flex-shrink-0 cursor-pointer relative bg-zinc-950 "
        onClick={onPlayClick}
      >
        <Image
          src={props.image}
          alt="album cover"
          width={props.coverWidth}
          height={props.coverHeight}
          className=" rounded-lg opacity-80 object-cover "
        />

        {currentlyPlaying === props.url ? (
          <div >
            <PauseIcon className={` ${!props.singlePage && 'h-12'} absolute top-1/2 left-1/2 z-20 text-zinc-100 -translate-x-1/2 -translate-y-1/2 group-hover:scale-150 transition-transform duration-300 `} />
            <p className={ `text-zinc-300 absolute left-1/2 -translate-x-1/2 bottom-1 ${props.singlePage && "text-xl font-bold " }` } >
              {formatTime(currentTime)}
            </p>
          </div>
        ) : (
          <PlayIcon className={` ${!props.singlePage && 'h-12'}  absolute top-1/2 left-1/2 z-20 text-zinc-100 -translate-x-1/2 -translate-y-1/2 group-hover:scale-150 transition-transform duration-300 `} />
        )}
      </div>
      <div ref={containerRef} className="w-full " />
    </div>
  );
});

export default WaveSurferPlayer;

[katspaugh]

You can sync the bottom player with the currently playing track by making them share the same media element.

E.g.

const topPlayers = topTracks.map((url) => WaveSurfer.create({ container, url }))
const currentPlayer = topPlayers[0]
const bottomPlayer = WaveSurfer.create({ container, media: currentPlayer.getMediaElement() })

The bottom player will then play, pause and seek whenever the current player is played/paused/seeking.

[jeanchaneto]

Thank you so much katspaugh! 🙏🏻

[Stianlars1]

@jeanchaneto would you care to show how you made this all work? From katspaugh's answer I couldn't really get the idea.

[jeanchaneto]

In the end I realised that having multiple intances of wavesurfer was not the right approach as audio was prelaoded for each systematically regardless of the user playing a track or not.

I eventually opted for a single intance of wavesurfer as a bottom player but still having issues implementing a play pause functionality from another component using context (bearing in mind I am no senior developer).

@katspaugh would it be possible to have an example in the docs or repo of this type of implementation which in the end is quite a common one and yet it is hard to find any resources on it. I am more than happy to contribute in anyway I can and within my capabilities. The idea is to have, using React:

• Multiple waveforms showing on the page with corresponding play/pause buttons.
• A bottom player which persist accross navigation in sync with currently played track.
• if we go the track page of the currently playing track both waveforms/cursors are in sync.
• Audio must be downloaded only on play
• Ideally a cache solution to avoid redownloading the audio if user replays a track

Let me know what you think.

Cheers.

[Stianlars1]

Alright!

i am currently in the same boat as you are. Ive been building this website https://audiovisualizer.io for a while now. and ive played around with the possibility for different "views". This is where i get to the same problem: Im currently fetching around 50-60 songs, and then i slice the list from 0 -> 10, and then maping over the array of song-objects and returning an instance of wavesurfer for each. The problem occurs when i try to navigate to the next page, thats when i slice the song list again but now by 10 -> 20. so my old wavesurfer instances on page 1 (0 -> 10 songs) are destroyed.

I kind of solved this in a way, but theres a lot of logic going on. I created a context where i on WS = wavesurfer.create.. saved the instance in the context. then i just returned the context object. if i then DONT destroy the wavesurfer instance on page-leave, i can get it working. But now my state and context make my main page re-render 100 times a second, so it overloads.. sight

[katspaugh]

I've created this example for you guys: https://wavesurfer.xyz/examples/?react-global-player.js

Basically, when a player from the playlist starts playing, it sets a currentPlayer state variable that has a reference to its media element. This media element is then passed to a global player at the bottom.

Hopefully this'll help you out.

[jthomas-81]

If we need the bottom player to persist across screen navigations we run into a problem because the currentPlayer would likely have been deleted from the DOM.

Unfortunately, there is no setter method to update media element after creation and setOptions doesn't update the player's media.

Since JavaScript doesn't truly have protected/constant implementation one hack would be to manually mutate the protected media element.

// This creates the <audio> element we want to share between players
const bottomPlayer = WaveSurfer.create({ container })
// Only render waverform with pre-generated waveform peaks data
const topPlayers = topTracks.map((peaks) => WaveSurfer.create({ container, peaks }))

// On a top track play we attach to bottom player's media element
let currentPlayer = topPlayers[0]
let origMediaEl = currentPlayer.getMediaElement()

// This mutates a protected property of wavesurfer object
currentPlayer.media = bottomPlayer.getMediaElement()
bottomPlayer.load(url) 
bottomPlayer.play() 

// On a track change 
//  1. detach previous top player from bottom player's media
//  2. attach new top player to bottom player's media element
currentPlayer.media = origMediaEl

currentPlayer = topPlayers[1]
origMediaEl = currentPlayer.getMediaElement()
currentPlayer.media = bottomPlayer.getMediaElement() 
bottomPlayer.load(url)
bottomPlayer.play() 

Note: The above example is not intended for real use but just to demonstrate a workaround.

Would be nice if we had a public setter method to update media post creation of Wavesurfer object.

[katspaugh]

I recommend rendering the "global" player outside of your client-side app router, so that it's always kept mounted regardless of page navigation.

My problem is that my components re-render ALOT because my global state keeps getting "timeupdate" freaking many times

As I mentioned above, it shouldn't be necessary to listen to this event and update any state if your players share the same media object.

You can reach out to me at [email protected] for private consulting. Cheers

[katspaugh]

You want to build something like this:

• The global player should exist outside of your react router, mounted in the root component at all times
• When the user navigates to another page, the global player will be untouched
• Use a global react context to store a reference to a global HTMLAudioElement
• Pass that element in the media property of the global player as well as the currently playing player
• This will keep the two players in sync

[Miltonbhowmick]

I have tried similar process of react Context API that you have share. Playing a music from list of music and bottom player(global) is perfectly synchronous. But when i try to move another page, the bottom player stops the music. Moreover, It is not only stop the music playing but also its saying there is no sources of element (audio element). @katspaugh Can you give some guide or help me what's the reason behind this issue?

My snippets are giving below. By the way, i have used BottomPlayer in layout.js so that i can keep it mounted once a time.

My Music Context is below,

"use client";

import { createContext, useContext, useState, useRef } from "react";

const MediaElementContext = createContext(null);

export const MediaElementProvider = ({ children }) => {
  const [mediaElement, setMediaElement] = useState(null);
  const mediaElementRef = useRef();

  const setMediaElementRef = (element) => {
    mediaElementRef.current = element;
  };

  return (
    <MediaElementContext.Provider
      value={{
        mediaElement,
        setMediaElement,
        mediaElementRef,
        setMediaElementRef,
      }}
    >
      {children}
    </MediaElementContext.Provider>
  );
};

export const useMediaElement = () => {
  return useContext(MediaElementContext);
};

Here is my Global Bottom Player component,

"use client";
import { useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { setPlaying } from "@/utils/modules/PlayerSlice";
import ButtonMediaPlay from "@/components/button/mediaPlay";
import WaveSurfer from "wavesurfer.js";
import { useMediaElement } from "@/contexts/MediaElementContext";

const BottomPlayer = () => {
  const dispatch = useDispatch();
  const currentMusic = useSelector((state) => {
    return state.player.currentMusic;
  });
  const playing = useSelector((state) => {
    return state.player.playing;
  });
  const { mediaElement, mediaElementRef } = useMediaElement();
  const bottomWaveformRef = useRef(null);
  const wavesurferInstance = useRef(null);
  const [duration, setDuration] = useState(0);
 
  // Debug! `mediaElement` lost its src while page navigate. 
  useEffect(() => {
    console.log(mediaElement);
  }, [path]);
  
  useEffect(() => {
    if (bottomWaveformRef.current && currentMusic) {
      wavesurferInstance.current = WaveSurfer.create({
        container: bottomWaveformRef.current,
        waveColor: "#828282",
        progressColor: "#FFFFFF",
        cursorColor: "#dc1b73",
        barWidth: 2,
        barRadius: 1,
        responsive: true,
        height: 50,
        width: "100%",
        normalize: true,
        media: mediaElement,
      });

      wavesurferInstance.current.on("ready", () => {
        setDuration(wavesurferInstance.current.getDuration());
      });

      wavesurferInstance.current.on("play", () => dispatch(setPlaying(true)));
      wavesurferInstance.current.on("pause", () => dispatch(setPlaying(false)));
      wavesurferInstance.current.on("finish", () =>
        dispatch(setPlaying(false))
      );
      return () => {
        console.log("bottom destory before", playing);

        if (wavesurferInstance.current) {
          console.log("bottom destory");
          wavesurferInstance.current.destroy();
        }
      };
    }
  }, [currentMusic, dispatch]);

  const handlePlayPause = () => {
    if (wavesurferInstance.current) {
      if (!wavesurferInstance.current.isPlaying()) {
        wavesurferInstance.current.play();
      } else {
        wavesurferInstance.current.pause();
      }
    }
  };

  useEffect(() => {
    if (wavesurferInstance.current) {
      if (playing) {
        wavesurferInstance.current.play();
      } else {
        wavesurferInstance.current.pause();
      }
    }
  }, [playing]);

  const formatDuration = (seconds) => {
    const minutes = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${minutes}:${secs < 10 ? "0" : ""}${secs}`;
  };

  return (
    <div className="fixed z-[10] bottom-0 left-0 right-0 bg-gray-800 p-4">
      {currentMusic && (
        <div className="flex justify-between items-center">
          <ButtonMediaPlay
            className="w-[40px] h-[40px] md:w-[80px] md:h-[80px] rounded-full cursor-pointer"
            playing={playing}
            gradient
            onClick={handlePlayPause}
          />
          <div className="w-full">
            <div ref={bottomWaveformRef}></div>
          </div>
          <p className="text-primaryText">{currentMusic?.name}</p>
          <p className="text-primaryText">{formatDuration(duration)}</p>
        </div>
      )}
    </div>
  );
};

export default BottomPlayer;

[katspaugh]

Make sure the media element is intact when the playlist player is destroyed. Its src might be cleared.

[Miltonbhowmick]

I forgot to reply @katspaugh. It's BINGO! for me. According to your intact word, i got the way of persisting audio element synchronously playing in global player.

Tips: How to persist audio element in playlist component?

wavesurferInstances.current = musicList.map((music, index) => {
        const ws = WaveSurfer.create({
          container: waveformRefs.current[index],
          waveColor: "#828282",
          progressColor: "#FFFFFF",
          cursorColor: "#dc1b73",
          barWidth: 3,
          barRadius: 1,
          responsive: true,
          height: 50,
          width: "100%",
          normalize: false,
          partialRender: true,
          media: new Audio(), // each audio element are unique while creating wavesurfer instances
          dragToSeek: true,
        });
}

media: new Audio() helps to continuously playing music in bottom player while navigating to other pages.

[ziga-lah-songtradr]

Hey guys, I'm trying to implement something similar as well. There's one weird that I've noticed with this: if you go to the example and start playing the 2nd track, you'll see that global waveform is lagging, but the row one is not. Upon pausing and resuming the track, global waveform performance is improved and there are no signs of lag. Any ideas on what is going on?

EDIT: I've had a quick look at what could be wrong and I've noticed that on the first click, progress is rendered on line 192 in wavesurfer.ts (timeupdate event). After resuming, rendering moves to line 181, when it re-renders on every tick. One possible fix is by starting the timer in initPlayerEvents, but I don't know how wise this is.