时间戳

首页 > 解决方案 > 恰好 1 秒后暂停 React 中的音频播放

javascript - 恰好 1 秒后暂停 React 中的音频播放

问题描述

我在下面这些行中创建的音频按我的意愿播放，但我也希望它在 1 秒后停止播放。我尝试了多种方法，例如在之后使用三元运算符this.togglePlay()或使用 this.audio.pause()，或在 setTimeout 内暂停它，但在 1 秒后完全停止音频没有任何作用。该项目的所有代码都可以在这个codepen上找到，虽然我不确定为什么它不会呈现输出，它是从我的 vscode 呈现的。我已经为此工作了几个小时，因此感谢您的帮助，谢谢。

audio = new Audio(
    "https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav"
  );

  componentDidMount() {
    this.audio.addEventListener("ended", () => this.setState({ play: false }));
  }

  componentWillUnmount() {
    this.audio.removeEventListener("ended", () =>
      this.setState({ play: false })
    );
  }

  togglePlay = () => {
    this.setState({ play: !this.state.play }, () => {
      this.state.play ? this.audio.play() : this.audio.pause();
    });
  };

它在这里的 start_break 函数中触发：

  start_break = () => {
    if (this.state.cycle === "break") {
      this.togglePlay();

      let label = (document.getElementById("mainLabel").innerHTML =
        "Break Time");
      this.breakTimer = setInterval(() => {
        const { seconds, minutes, break_length } = this.state;
        if (seconds > 0) {
          this.setState(({ seconds }) => ({
            seconds: seconds - 1,
          }));
        }
        if (seconds === 0) {
          if (break_length === 0) {
            clearInterval(this.break_Timer);
          } else {
            let newMinuteValue = break_length - 1;
            this.setState(({ minutes }) => ({
              minutes: newMinuteValue,
              break_length: newMinuteValue,
              seconds: 59,
            }));
            // this.audio.play()
          }
        }
      }, 100);
    }
  };

标签： javascriptreactjsaudio

解决方案

我认为这可能是您问题的答案：

import React, { useState, useEffect } from "react";

const useAudio = url => {
  const [audio] = useState(new Audio(url));
  const [playing, setPlaying] = useState(false);

  const toggle = () => setPlaying(!playing);

  useEffect(() => {
      playing ? audio.play() : audio.pause();
    },
    [playing]
  );

  useEffect(() => {
    audio.addEventListener('ended', () => setPlaying(false));
    return () => {
      audio.removeEventListener('ended', () => setPlaying(false));
    };
  }, []);

  return [playing, toggle];
};

const Player = ({ url }) => {
  const [playing, toggle] = useAudio(url);

  return (
    <div>
      <button onClick={toggle}>{playing ? "Pause" : "Play"}</button>
    </div>
  );
};

export default Player;

推荐阅读