kosmetism / react-soundplayer

📻 Create custom web audio players with React
https://labs.voronianski.dev/react-soundplayer
1.46k stars 110 forks source link

Pause then Play restarting #104

Open beamercola opened 5 years ago

beamercola commented 5 years ago

I'm having an issue when i click to pause the player, then click again, it starts over from 0:00 - is this the intended behavior? Is there a way to resume from current position?

const Player = withCustomAudio(props => {
  const { soundCloudAudio, playing, track, currentTime } = props;

  const play = () => {
    if (playing) {
      soundCloudAudio.pause();
    } else {
      soundCloudAudio.play();
    }
  }

  return (
    <div className="flex flex-col rounded-lg border border-black overflow-hidden bg-white shadow">
      <img className="w-96 h-96 border-b border-black cursor-pointer" src={track.cover} onClick={() => play()} alt={track.title} />
rsxdalv commented 4 years ago

I tried the workaround with full url including the scheme, but it doesn't work during production.

rsxdalv commented 4 years ago

Actually, if the url is proper then it works. So make sure your url looks more like this: https://example.org/path/to/file.mp3 and unlike these: https://example.org/./path/to/file.mp3 ./path/to/file.mp3

I think this is the black magic that drops the ball (from soundcloud-audio package)

function _parseURL(url) {
  if (!anchor) {
    anchor = document.createElement('a');
  }

  var result = {};

  anchor.href = url || '';

  for (var i = 0, len = keys.length; i < len; i++) {
    var key = keys[i];
    result[key] = anchor[key];
  }

  return result;
}