Javascript 添加mp3以作出反应

我在一个项目中添加了一个mp3到src文件夹，该项目使用createreact应用程序启动。我为音频文件添加了一个组件audio.js，我希望根据prop

playarm

是否为true有条件地播放该文件。 父App.js将道具传递给子Timer.js，后者呈现Audio.js

这个Audio.js文件给了我一个“React”定义错误，但从未使用过，我不知道为什么

Audio.js：

import React, { Component } from 'react';

class Audio extends Component {
  constructor() {
    super();
    this.url = "./chime.mp3";
    this.audio = new Audio(this.url);
  }

  render() {

    return (
      this.audio
    );
  }
}

export default Audio;

在Timer.js中，音频呈现如下：

{props.playAlarm？：null}

当我测试播放音频时，当playAlarm设置为true时，我得到Uncaught RangeError：audio.js中带有super（）的行超过了最大调用堆栈大小

App.js：

import React, { Component } from 'react';
import Timer from './Timer';

class App extends Component {
  // ES6 class property/class field syntax allows you to remove constructor when just being used to initialize state
  state = {
    sessionDuration: 5, // TODO: change back to 1500 when testing done
    breakDuration: 3, // TODO: change back to 300 when testing done
    sessionTimeRemaining: 5, // TODO: change back to 1500 when testing done
    breakTimeRemaining: 3, // TODO: change back to 300 when testing done
    isSession: true,
    timerOn: false,
    sessionNumber: 0,
    playAlarm: false
  }

  // Using property initializer syntax to avoid need to bind, since arrow functions don't create their own this context and use value of enclosing context instead. transform-class-properties Babel plugin necessary to use this syntax (included in Create React App). Refer to https://itnext.io/property-initializers-what-why-and-how-to-use-it-5615210474a3 for more details

  // DURATION CHANGES

  decreaseBreakDuration = () => {
    // Conditional statement prevents decrease when break is at 1 minute
    if (this.state.breakDuration === 60) {
      return undefined;
    } else {
      this.setState({
        breakDuration: this.state.breakDuration - 60
      });
    }
  }

  increaseBreakDuration = () => {
    this.setState({
      breakDuration: this.state.breakDuration + 60
    });
  }

  decreaseSessionDuration = () => {
    // Conditional statement prevents decrease when session is at 5 minutes
    if (this.state.sessionDuration === 300) {
      return undefined;
    } else {
      this.setState({
        sessionDuration: this.state.sessionDuration - 60,
        sessionTimeRemaining: this.state.sessionTimeRemaining - 60
      });
    }
  }

  increaseSessionDuration = () => {
    this.setState({
      sessionDuration: this.state.sessionDuration + 60,
      sessionTimeRemaining: this.state.sessionTimeRemaining + 60
    });
  }

  manageBreak = () => {
    this.setState({
      playAlarm: false
    });
    this.time = setInterval(() => {
      this.setState({
        breakTimeRemaining: this.state.breakTimeRemaining - 1
      });
      if (this.state.breakTimeRemaining === 0) {
        this.handleBreakComplete();
      }
    }, 1000);
  }

  manageSession = () => {
    this.setState({
      playAlarm: false
    });
    // Every 1,000 ms (1 second), subtract 1 (a single second) from displayed sessionTimeRemaining. Assigned to this.time (scoped to entire class) in order to pass it to clearInterval() when pause button is clicked
    this.time = setInterval(() => {
      this.setState({
        sessionTimeRemaining: this.state.sessionTimeRemaining - 1
      });
      if (this.state.sessionTimeRemaining === 0) {
        this.handleSessionComplete();
      }
    }, 1000);
  }

  handleSessionComplete = () => {
    clearInterval(this.time);
    this.setState({
      playAlarm: true,
      sessionNumber: this.state.sessionNumber + 1
    })

    if (this.state.sessionNumber === 4) {
      this.handlePomodoroCycleDone();
    } else {
      this.setState({
        timerOn: false,
        sessionTimeRemaining: this.state.sessionDuration,
        breakTimeRemaining: this.state.breakDuration,
        isSession: !this.state.isSession,
      });
    }
  }

  handlePomodoroCycleDone = () => {
    // TODO: Display message in modal
    console.log('Great work! You finished a pomodoro cycle (four sessions). Time to relax.')
    // Change back to default values
    this.setState({
      isSession: true,
      timerOn: false,
      sessionDuration: 5, // TODO: change back to 1500
      breakDuration: 3, // TODO: change back to 300 when testing done
      sessionTimeRemaining: 5, // TODO: change back to 1500
    });
  }

  handleBreakComplete = () => {
    clearInterval(this.time);
    this.setState({
      timerOn: false,
      sessionTimeRemaining: this.state.sessionDuration,
      breakTimeRemaining: this.state.breakDuration,
      isSession: !this.state.isSession,
      playAlarm: true
    });
  }

  // PLAY, PAUSE, RESTART BUTTONS

  startTimer = () => {
    this.setState({
      timerOn: true,
    });

    if (this.state.isSession) {
      this.manageSession();
    } else {
      this.manageBreak();
    }
  }

  pauseTimer = () => {
    // Stops setInterval's calling its (setState) callback every 1000 ms
    clearInterval(this.time);

    this.setState({
      timerOn: false
    });
  }

  resetTimer = () => {
  // Stops setInterval's calling its (setState) callback every 1000 ms
  // TODO: Display 4 unchecked circle icons again
    clearInterval(this.time);
    this.setState({
      timerOn: false,
      sessionDuration: 5, // TODO: change back to 1500
      breakDuration: 3, // TODO: change back to 300 when testing done
      sessionTimeRemaining: 5, // TODO: change back to 1500
      breakTimeRemaining: 3, // TODO: change back to 300 when testing done
      sessionNumber: 0
    });
  }

  render() {
    return (
      <Timer
        breakDuration={this.state.breakDuration}
        sessionDuration={this.state.sessionDuration}

        decreaseBreakDuration={this.decreaseBreakDuration}
        increaseBreakDuration={this.increaseBreakDuration}
        decreaseSessionDuration={this.decreaseSessionDuration}
        increaseSessionDuration={this.increaseSessionDuration}

        sessionTimeRemaining={this.state.sessionTimeRemaining}
        breakTimeRemaining={this.state.breakTimeRemaining}
        timerOn={this.state.timerOn}
        sessionNumber={this.state.sessionNumber}

        isSession={this.state.isSession}

        startTimer={this.startTimer}
        pauseTimer={this.pauseTimer}
        resetTimer={this.resetTimer}

        playAlarm={this.state.playAlarm}
      />
    );
  };
}

import React，{Component}来自'React'；
从“./Timer”导入计时器；
类应用程序扩展组件{
//ES6类属性/类字段语法允许您在仅用于初始化状态时删除构造函数
状态={
会话持续时间：5，//TODO:测试完成后更改回1500
breakDuration:3，//TODO:测试完成后更改回300
sessionTimeRemaining:5，//TODO:测试完成后更改回1500
剩余中断时间：3，//TODO:测试完成后更改回300
是的，
蒂梅隆：错，
会话号：0，
播放警报：错误
}
//使用属性初始值设定项语法避免绑定，因为箭头函数不创建自己的此上下文，而是使用封闭上下文的值。使用此语法所需的转换类属性Babel插件（包含在create React App中）提到https://itnext.io/property-initializers-what-why-and-how-to-use-it-5615210474a3 欲知详情
//持续时间变化
减少中断持续时间=（）=>{
//条件语句防止在中断时间为1分钟时减少
if（this.state.breakDuration==60）{
返回未定义；
}否则{
这是我的国家({
breakDuration:this.state.breakDuration-60
});
}
}
增加中断持续时间=（）=>{
这是我的国家({
breakDuration:this.state.breakDuration+60
});
}
减量持续时间=（）=>{
//条件语句防止会话在5分钟时减少
if（this.state.sessionDuration==300）{
返回未定义；
}否则{
这是我的国家({
sessionDuration:this.state.sessionDuration-60，
sessionTimeRemaining:this.state.sessionTimeRemaining-60
});
}
}
递增会话持续时间=（）=>{
这是我的国家({
sessionDuration:this.state.sessionDuration+60，
sessionTimeRemaining:this.state.sessionTimeRemaining+60
});
}
manageBreak=（）=>{
这是我的国家({
播放警报：错误
});
this.time=setInterval（（）=>{
这是我的国家({
breakTimeRemaining:this.state.breakTimeRemaining-1
});
if（this.state.breakTimeRemaining==0）{
此.handleBreakComplete（）；
}
}, 1000);
}
manageSession=（）=>{
这是我的国家({
播放警报：错误
});
//每1000毫秒（1秒），从显示的SessionTimeResisting中减去1（一秒钟）。分配给this.time（作用域为整个类），以便在单击暂停按钮时将其传递给clearInterval（）
this.time=setInterval（（）=>{
这是我的国家({
sessionTimeRemaining:this.state.sessionTimeRemaining-1
});
if（this.state.sessionTimeRemaining==0）{
此.handleSessionComplete（）；
}
}, 1000);
}
handleSessionComplete=（）=>{
clearInterval（本次）；
这是我的国家({
播放警报：是的，
sessionNumber:this.state.sessionNumber+1
})
if（this.state.sessionNumber==4）{
这个.handlePomodoroCycleDone（）；
}否则{
这是我的国家({
蒂梅隆：错，
SessionTime剩余：this.state.sessionDuration，
BreakTime剩余时间：this.state.breakDuration，
isSession:！this.state.isSession，
});
}
}
handlePomodoroCycleDone=（）=>{
//TODO:以模式显示消息
log（'干得好！您完成了一个pomodoro循环（四个会话）。是时候放松了。'））
//更改回默认值
这是我的国家({
是的，
蒂梅隆：错，
会话持续时间：5，//TODO:更改回1500
breakDuration:3，//TODO:测试完成后更改回300
SessionTime剩余时间：5，//TODO:更改回1500
});
}
车把断裂完整=（）=>{
clearInterval（本次）；
这是我的国家({
蒂梅隆：错，
SessionTime剩余：this.state.sessionDuration，
BreakTime剩余时间：this.state.breakDuration，
isSession:！this.state.isSession，
播放警报：正确
});
}
//播放、暂停、重新启动按钮
startTimer=（）=>{
这是我的国家({
泰米隆：没错，
});
if（本州isSession）{
这个.manageSession（）；
}否则{
这是manageBreak（）；
}
}
pauseTimer=（）=>{
//停止setInterval每1000毫秒调用其（setState）回调
clearInterval（本次）；
这是我的国家({
蒂梅隆：错
});
}
重置计时器=（）=>{
//停止setInterval每1000毫秒调用其（setState）回调
//TODO:再次显示4个未选中的圆圈图标
clearInterval（本次）；
这是我的国家({
蒂梅隆：错，
会话持续时间：5，//TODO:更改回1500
breakDuration:3，//TODO:测试完成后更改回300
SessionTime剩余时间：5，//TODO:更改回1500
剩余中断时间：3，//TODO:测试完成后更改回300
会话号：0
});
}
render（）{
返回(
);
};
}

导出默认应用程序

这里还有Timer.js：

import Audio from './Audio';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlay } from '@fortawesome/free-solid-svg-icons';
import { faPause } from '@fortawesome/free-solid-svg-icons';
import { faUndo } from '@fortawesome/free-solid-svg-icons';
import React from 'react';
import PomodoroIcons from './PomodoroIcons';
import DurationControls from './DurationControls';

const TimeFormat = require('hh-mm-ss');

const Timer = props => (

<div className="timer">

  <DurationControls
    breakDuration={props.breakDuration}
    sessionDuration={props.sessionDuration}

    increaseBreakDuration={props.increaseBreakDuration}
    decreaseBreakDuration={props.decreaseBreakDuration}

    increaseSessionDuration={props.increaseSessionDuration}
    decreaseSessionDuration={props.decreaseSessionDuration}
  />

  {/* TIME REMAINING */}
  <p className="time-remaining">
    {props.isSession ? TimeFormat.fromS(props.sessionTimeRemaining) : TimeFormat.fromS(props.breakTimeRemaining)}
  </p>

  {/* PLAY, PAUSE, RESTART BUTTONS */}
  <div className="bottom-btns">

    <div className={props.timerOn ? 'hidden' : ''}>
      <FontAwesomeIcon
        role="button"
        onClick={props.startTimer}
        icon={faPlay}
        className="btn bottom-btn"
        size="4x"
      />
    </div>

    <div className={props.timerOn === false ? 'hidden' : ''}>
      <FontAwesomeIcon
        role="button"
        onClick={props.pauseTimer}
        icon={faPause}
        className="btn bottom-btn"
        size="4x"
      />
    </div>

    <FontAwesomeIcon
      role="button"
      onClick={props.resetTimer}
      icon={faUndo}
      className="btn bottom-btn"
      size="4x"
    />

  </div> {/* End bottom-btns */}

  <PomodoroIcons sessionNumber={props.sessionNumber} />

  {props.playAlarm ? <Audio /> : null}
</div>

);

export default Timer;

从“/Audio”导入音频；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“@fortawesome/free solid svg icons”导入{faPlay}；
从'@fortawesome/free-solid-svg-i'导入{faPause}
class Audio extends Component {
  constructor() {
    super();
    this.url = "./chime.mp3";
    this.audio = new Audio(this.url);
  }

  render() {

    return (
      this.audio
    );
  }
}