Проблема
Я пытаюсь добавить oop звука в приложение React, созданное с помощью create-react-app с использованием useEffect. У меня все работает, но между окончанием звука и перезапуском есть небольшая задержка. Я хочу использовать звук в качестве бэк-треков для игры на гитаре, поэтому мне нужно, чтобы он был идеально плавным. Я уверен, что длина трека правильная, я записал его сам и экспортировал ровно 8 тактов, и он прекрасно зацикливается в iTunes.
Текущий код
Благодаря принятому ответу в этот вопрос , моя функция аудиопроигрывателя работает нормально, и в настоящее время выглядит следующим образом:
import React, { useState, useEffect } from 'react'
const useAudio = audioPath => {
const [audio] = useState(new Audio(audioPath))
const [playing, setPlaying] = useState(false)
const toggle = () => setPlaying(!playing)
useEffect(() => {
playing ? audio.play() : audio.pause()
},
[playing, audio]
)
useEffect(() => {
audio.addEventListener('ended', () => {
audio.currentTime = 0
audio.play()
setPlaying(true)
})
}, [audio])
return [playing, toggle]
}
const Player = ({ audioPath }) => {
const [playing, toggle] = useAudio(audioPath)
return (
<div>
<button onClick={toggle}>{playing ? 'Pause' : 'Play'}</button>
</div>
)
}
export default Player
Передается audioPath и это просто относительный путь, который прекрасно загружается. Он играет хорошо, он делает паузу отлично, он делает l oop, просто с небольшой задержкой между циклами.
Что я пробовал
Как вы можете видеть Исходя из кода, я пытался перехватить событие аудио ended и установить звук обратно в начало трека, но, очевидно, это не мгновенно - я не совсем уверен, как с этим справиться. Я пытался в своей первой функции useEffect проверить время аудио, и если оно находится, скажем, в 500 мс от конца трека, установить время обратно на 0, но я не смог заставить это работать, и это кажется очень хакерским и ненадежный в любом случае. В идеале мне нужно подходящее решение, которое будет работать с любыми треками, так как я хочу добавить больше.
Демо
Go в самый конец сайта GitHub страниц где это размещено, разверните самую нижнюю панель и нажмите кнопку воспроизведения.