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
587 stars 91 forks source link

Next js bug? not working #202

Closed minemos closed 1 year ago

minemos commented 1 year ago

Describe the bug

Too slow update, seek is not updating and pause is worked but after few seconds I think only play and pause working

simply I set state to update src from api

if (data) {
  const blob = new Blob([data], { type: "audio/mpeg" });
  const url = URL.createObjectURL(blob);
  setSrc(url);
  setPlay(true);
}

And player is playing audio file well but onPause, onPlay, onEnded, onListen is not working. Even seek is not moving and playerRef.current.audio still not update I have no idea how to patch this..

<AudioPlayer
  src={src}
  autoPlayAfterSrcChange={true}
  autoPlay={true}
  onPause={() => setPlay(false)}
  onPlay={() => setPlay(true)}
  onEnded={() => setPlay(false)}
  onListen={(e) => {
    const target = e.target as HTMLAudioElement;
    console.info(target.currentTime, target.duration); // this is really slow
  }}
  showDownloadProgress={true}
  showJumpControls={false}
   preload="none"
/>

Environment

"dependencies": {
    "@heroicons/react": "^2.0.16",
    "@types/node": "18.15.5",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "autoprefixer": "^10.4.14",
    "axios": "^1.3.4",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "moment": "^2.29.4",
    "next": "13.2.4",
    "patch-package": "^6.5.1",
    "postcss": "^8.4.21",
    "postinstall-postinstall": "^2.1.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-h5-audio-player": "^3.8.6",
    "react-hook-form": "^7.43.8",
    "react-query": "^3.39.3",
    "recoil": "^0.7.7",
    "tailwindcss": "^3.2.7",
    "typescript": "5.0.2"
  }
minemos commented 1 year ago

OMG. After restart my mac book, eveything is fine