search

lhz516 / react-h5-audio-player

React audio player component with UI. It provides time indicator on both desktop and mobile devices.
https://codepen.io/lhz516/pen/dyGpmgP
MIT License
608 stars 92 forks source link

Is it possible to have multiple players playing the same source synchronously? #182

Closed alexmcn closed 1 year ago

alexmcn commented 1 year ago

We have a requirement to have a player on a web page but also have another 'sticky player' which remains in view as the web page is scrolled. They both need to control (play, pause) the same audio and have the duration and progress bars synchronised.

Is this possible? Thank you

lhz516 commented 1 year ago

That's an interesting requirement. I came up with an idea but haven't tried it, you may try it out and let me know if it works:

In Player 1: Set src as usual, save audio ref to the global scope (or React context) window.audioSrc = player1Ref.current.audio.current

In Player 2: Set an empty src, and set the audio ref to the same as Player 1 player2Ref.current.audio.current = window.audioSrc

alexmcn commented 1 year ago

Thanks for the advice.

I have tried this and it works perfectly.