fix: enable audio instance reuse, sound no overlap #5
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
||
| // 初回の足音を再生 | ||
| const footstepsAudio = loadFootstepsAudio(); | ||
| playAudio(footstepsAudio); |
There was a problem hiding this comment.
It's necessary to keep the initial audio playback, as removing it means the audio will only play after the interval has elapsed
| @@ -9,11 +9,15 @@ const loadFootstepsAudio = () => { | |||
| return footsteps; | |||
| }; | |||
|
|
|||
| //オーディオインスタンス | |||
There was a problem hiding this comment.
| //オーディオインスタンス | |
| // オーディオインスタンス |
nits: plz add a space before the comments
| @@ -9,11 +9,15 @@ const loadFootstepsAudio = () => { | |||
| return footsteps; | |||
| }; | |||
|
|
|||
| //オーディオインスタンス | |||
| const footstepsAudio = loadFootstepsAudio(); | |||
There was a problem hiding this comment.
Since new Audio cannot be accessed on the server, some ingenuity is needed
fyi:
Initialize within the playSounds inside useFootsteps, which is certain to be executed on the client
Alternatively, if you want to persist the audio using useRef, initialize it inside useFootsteps but only when isClient is true
example:
const footstepsAudio = useRef<HTMLAudioElement>();
if (isClient && !footstepsAudio.current)
footstepsAudio.current = loadFootstepsAudio();
| const playAudio = (audio: HTMLAudioElement) => { | ||
| if (!audio.paused) { | ||
| audio.pause(); | ||
| audio.currentTime = 0; //タイム0 |
There was a problem hiding this comment.
👍
nits:
plz add a space before the comments
imho:
I prefer to have line breaks in comments, so it's a bit of an issue for me, but either way is fine.
There was a problem hiding this comment.
I've checked locally, and in the case of fast-moving ghosts, the audio is forcibly cut off, causing it to sound interrupted
Audio instances were being created each time, so they can be reused.
To avoid disturbing the tempo of the sound, a new sound with a new character (or speed) is now played after checking for a pause.