CODEWITHSUNDEEP
javascriptandroidreactjshtml5-audioreact-player
Rasmus Puls
Rasmus Puls

Reputation: 3229

Controls not working between html5 audio player and android native player when audio is started dynamically (autoplay)

I'm using npm react-player to play some audio and video files In a react app. I have allowed the user to toggle an autoplay feature for audio.

const ReactPlayer = require('react-player').default;
const autoplay = true; // if user chose to enable autoplay

React.createElement(ReactPlayer, { playing: autoplay, url: 'some/audio.wav' })

When the player is rendered and starts playing in the chrome android browser, it also starts a native android player, (tho one accessible in the os notification area)

enter image description here

The two players are in perfectly sync, but if the browser player is paused the native one continues. Also if dragging dot on the timeline on the browser player they become out of sync and talk over each other.

Funny thing is that when autoplay is not tuned on, but the user have to manually press a button that sets the playing prop to true, the native audio player and the browser players controls affect each other, if pausing in the browser both pauses, if pausing in the notification area both pause and stays in sync.

How can I fix this?

Update:

I have not tried a bit more around. Instead of setting playing to true before the component in rendered I have tried to get the html element in componentDidMount() and use the play() function there. Unfortunately this has the same behaviour it seems to start 2 separate players that eventually will become out of sync :(

componentDidMount () {
  const player = document.getElementById(this.state.id);
  if (player) {
    const audio = player.getElementsByTagName('audio');
    if (audio && audio.length > 0) {
      this.state.autoplay && player.firstElementChild.play();
    }
  }
},

Upvotes: 0

Views: 687

Answers (1)

Rasmus Puls
Rasmus Puls

Reputation: 3229

It is still not clear to me exactly what have been going on behind the scenes, so I do not know the technical details of why this solved the issue but...

Our app was created with reacte-react-app, and we have had a never ending pile of problems due to that locked environment and using the react-scripts for building and webpack configuration etc. It have been very difficult to gain control and to understand how the configuration works. We decided to eject the app from creat-react-app and instead we are now using another webpack configuration and build script. This renmoved a lot of our problems, including this particular issue.

I was not able to reproduce the issue on a codesandbox.io sandbox, I installed react-player and replicated the audio player and used the same audio file. here the internal and external players were aligned. And now that we are building our app completely unrelated to creat-react-app this problem is also gone from our app.

So I cannot say why this worked, but can only recommend anyone who runs into a similar issue to do an experiment of ejecting from creat-react-app if your app was created that way.

Upvotes: 0

Related Questions