Блог

 import quackSound from "./music/Duck-quack.mp3";


class MallardDuck extends Duck {
  constructor(props) {
    super();
    this.state = {
      canFly: false,
      canQuack: false,
      quackSound: new Audio(quackSound),
    };
  }

  quack = () => {
    const quack = new QuackSound();
    return quack.quack();
  };

  fly = () => {
    const fly = new FlyWings();
    return fly.fly();
  };

  render() {
    return (
      <div className="duck">
        <img
          className={`image ${this.state.canFly ? "canFly" : ""}`}
          src={mallardDuck}
          alt="mallardDuck"
          onAnimationEnd={() => {
            this.setState({ canFly: false });
          }}
        />
        <Button
          className="eventButton"
          onClick={(event) => {
            event.preventDefault();
            this.setState({ canFly: true });
          }}
        >
          Fly
        </Button>
        <Button
          className="eventButton"
          onClick={(event) => {
            event.preventDefault();
            this.setState({ canQuack: true });
            this.state.quackSound.play(); // Here !!!!!!
          }}
        >
          Quack
        </Button>
        {this.state.canQuack ? this.quack() : null}
        {this.state.canFly ? this.fly() : null}
      </div>
    );
  }
}

  

Мой аудиофайл mp3 длится 18 секунд. Я хочу играть как первые 3 или 4 секунды. Есть ли какой-либо способ сделать это в react js! Вышеупомянутый код воспроизводит все 18 секунд, я просто хочу воспроизвести первые несколько секунд. Могу ли я сделать это в react js? Кроме того, могу ли я выбрать, где начинается и заканчивается мой звук, например, если я хочу воспроизвести звук от 0,03 до 0,07 секунды звука quack!

Я бы сделал это так :

 import quackSound from "./music/Duck-quack.mp3";


class MallardDuck extends Duck {
  constructor(props) {
    super();
    this.state = {
      canFly: false,
      canQuack: false,
      round:0,
      quackSound: new Audio(quackSound),
    };
    this.intervalRef=null;
  }

  quack = () => {
    const quack = new QuackSound();
    return quack.quack();
  };

  fly = () => {
    const fly = new FlyWings();
    return fly.fly();
  };

  render() {
    return (
      <div className="duck">
        <img
          className={`image ${this.state.canFly ? "canFly" : ""}`}
          src={mallardDuck}
          alt="mallardDuck"
          onAnimationEnd={() => {
            this.setState({ canFly: false });
          }}
        />
        <Button
          className="eventButton"
          onClick={(event) => {
            event.preventDefault();
            this.setState({ canFly: true });
          }}
        >
          Fly
        </Button>
        <Button
          className="eventButton"
          onClick={(event) => {
            event.preventDefault();
            //you can tweek interval duration for your liking , for now its set to pay every .3 seconds (300 ms) 
           const myInterval=setInterval(()=>{
              if(this.state.round > 3) clearInterval(myInterval);
             this.setState({ canQuack: true });
             this.setState({ round:  this.state.round 1 });
             this.state.quackSound.play(); // Here !!!!!!},300)
          }}
        >
          Quack
        </Button>
        {this.state.canQuack ? this.quack() : null}
        {this.state.canFly ? this.fly() : null}
      </div>
    );
  }
}