Блог

Я использую React.js и веб-аудио API для создания приложения, которое воспроизводит музыку.
ДЕМОНСТРАЦИЯ

Не могли бы вы сказать мне, как связать тип ввода = диапазон с воспроизводимой музыкой?
И, перемещая тип ввода = диапазон, я хочу изменить текущее время воспроизводимой музыки.

Исходный код выглядит следующим образом.

 let audioCtx, audioBuffer, source;
const audioURL = "/piano.mp3";

const App = () => {
  const [load, setLoad] = useState(true);
  const [playing, setPlaying] = useState(false);
  const [total, setTotal] = useState(0);
  const [current, setCurrent] = useState(0);

  const audioLoad = async () => {
    const response = await fetch(audioURL);
    const arrayBuffer = await response.arrayBuffer();
    if (arrayBuffer) {
      audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);
      setTotal(audioBuffer.duration);
    }
    setLoad(false);
  };
  useEffect(() => {
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    audioLoad();
    return () => {
      audioCtx.close();
      audioCtx = null;
    };
  }, []);

  const playAudio = () => {
    if (!playing) {
      source = audioCtx.createBufferSource();
      source.buffer = audioBuffer;
      source.connect(audioCtx.destination);
      source.start();
      setPlaying(true);
      return;
    }
    source.stop();
    setCurrent(0);
    setPlaying(false);
  };

  const changeSeek = (e) => {
    setCurrent(e.target.value);
    audioCtx.currentTime = current;
    console.log(audioCtx.currentTime);
  };

  return (
    <>
      <p>Total time {total}</p>
      <p>Current time {current}</p>
      <button onClick={playAudio} disabled={load ? true : false}>
        {playing ? "stop" : "play"}
      </button>
      <input
        onChange={changeSeek}
        value={current}
        type="range"
        max={total}
        style={inputStyle}
      />
    </>
  );
};
  

Аудио контекст имеет свойство currentTime, и я подумал, что могу изменить текущее время музыки, присвоив этому свойству значение input type =диапазон, но я не смог этого сделать.

Кроме того, я не мог понять, как автоматически перемещать тип ввода = диапазон, чтобы соответствовать текущему времени музыки.

BaseAudioContext.currentTime является неизменяемым. Он представляет звуковые часы HW, поэтому вы не можете просто произвольно установить значение, чтобы перемещать вещи во времени. Если вы хотите иметь возможность выполнять поиск через AudioBuffer , вам придется реализовать поиск там, создав AudioBufferSourcNode с желаемым AudioBuffer значением и вызвав start(startTime, offset, duration) соответствующим образом (возможно, оставив duration параметр).

Или используйте a MediaElementAudioSourceNode с src настройкой соответствующим образом, поскольку a MediaElement поддерживает поиск. Это не будет точной выборкой, но, возможно, это нормально для вашего варианта использования.