Javascript 当在react js上触发onClick方法时，有没有办法在特定的时间间隔内播放声音 从“/music/Duck-quack.mp3”导入quackSound； 类MallardDuck扩展了Duck{ 建造师（道具）{ 超级（）； 此.state={ canFly:错， 坎嘎：错， quackSound：新音频（quackSound）， }; } 庸医=（）=>{ 常量嘎嘎=新嘎嘎声（）； 返回嘎嘎。嘎嘎（）； }; 飞行=（）=>{ const fly=新的FlyWings（）； 返回fly.fly（）； }; render（）{ 返回( { this.setState（{canFly:false}）； }} /> { event.preventDefault（）； this.setState（{canFly:true}）； }} > 飞 { event.preventDefault（）； this.setState（{canQuack:true}）； this.state.quackSound.play（）；//这里！！！！！！ }} > 江湖郎中 {this.state.canQuack？this.quack（）：null} {this.state.canFly？this.fly（）：null} ); } }

我的音频mp3文件有18秒长。我想像前三四秒那样比赛。在react js中有没有办法做到这一点！上面提到的代码播放了整个18秒，我只想播放前几秒。我可以用js做吗？此外，我可以从哪里选择我的声音开始和结束，例如，如果我想播放0.03到0.07秒的嘎嘎声

我会这样做：

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>
    );
  }
}

从“/music/Duck-quack.mp3”导入quackSound；
类MallardDuck扩展了Duck{
建造师（道具）{
超级（）；
此.state={
canFly:错，
坎嘎：错，
第四轮：0，
quackSound：新音频（quackSound），
};
intervalRef=null；
}
庸医=（）=>{
常量嘎嘎=新嘎嘎声（）；
返回嘎嘎。嘎嘎（）；
};
飞行=（）=>{
const fly=新的FlyWings（）；
返回fly.fly（）；
};
render（）{
返回(
{
this.setState（{canFly:false}）；
}}
/>
{
event.preventDefault（）；
this.setState（{canFly:true}）；
}}
>
飞
{
event.preventDefault（）；
//您可以根据自己的喜好选择间隔时间，目前设置为每0.3秒（300毫秒）支付一次
const myInterval=setInterval（（）=>{
如果（this.state.round>3）clearInterval（myInterval）；
this.setState（{canQuack:true}）；
this.setState（{round:this.state.round+1}）；
this.state.quackSound.play（）；//这里！！！！！！！}，300）
}}
>
江湖郎中
{this.state.canQuack？this.quack（）：null}
{this.state.canFly？this.fly（）：null}
);
}
}

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>
    );
  }
}