Hey everyone,
So I made a pomodoro clock that fulfills all the project guidelines…in theory. I used the .play() method on an audio file that was about 2 seconds long for the time. I spent a bunch of time trying to figure out how to use the tag to accomplish the same thing, but even when I would look at others code examples on codepen they seemed to be using properties in the audio tag I could not find anything about.
So…here is a link to my clock, and the code on github as well as pasted below. Does anyone have thoughts on how I could actually impliment the audio alerts using the tag like the project asks?
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
sessionTimeEntry: 25, //in min
breakTimeEntry: 5, //in min
sessionRemainingSeconds: 1500, //in seconds
breakRemainingSeconds: 300, //in seconds
running: false,
timerLabel: "Session"
}
this.addSession = this.addSession.bind(this);
this.subSession = this.subSession.bind(this);
this.addBreak = this.addBreak.bind(this);
this.subBreak = this.subBreak.bind(this);
this.startStop = this.startStop.bind(this);
this.resetTimer = this.resetTimer.bind(this);
this.formatMinutes = this.formatMinutes.bind(this);
}
addSession() { //adding and subtracting methods need to also chage the session remaining in seconds to mirrow the entry time if ever changed
if (this.state.sessionTimeEntry < 60 && this.state.running === false) {
this.setState({
sessionTimeEntry: this.state.sessionTimeEntry + 1,
sessionRemainingSeconds: (this.state.sessionTimeEntry + 1) * 60
})
}
}
subSession() {
if (this.state.sessionTimeEntry > 1 && this.state.running === false) {
this.setState({
sessionTimeEntry: this.state.sessionTimeEntry - 1,
sessionRemainingSeconds: (this.state.sessionTimeEntry - 1) * 60
})
}
}
addBreak() {
if (this.state.breakTimeEntry < 60 && this.state.running === false) {
this.setState({
breakTimeEntry: this.state.breakTimeEntry + 1,
breakRemainingSeconds: (this.state.breakTimeEntry + 1) * 60
})
}
}
subBreak() {
if (this.state.breakTimeEntry > 1 && this.state.running === false) {
this.setState({
breakTimeEntry: this.state.breakTimeEntry - 1,
breakRemainingSeconds: (this.state.breakTimeEntry - 1) * 60
})
}
}
startStop() {
const status = this.state.running;
const chime1 = new Audio("https://res.cloudinary.com/dwut3uz4n/video/upload/v1532362194/352659__foolboymedia__alert-chime-1.mp3")
switch (status) {
case false:
console.log("Begin Timer")
this.setState({ running: true })
this.timer = setInterval(() => {
if (this.state.running) {
if ( (this.state.sessionRemainingSeconds === 0 && this.state.breakRemainingSeconds === 1) || (this.state.sessionRemainingSeconds === 1 && this.state.breakRemainingSeconds === this.state.breakTimeEntry*60) ) {
chime1.play();
}
if (this.state.sessionRemainingSeconds > 0) {
this.setState({
sessionRemainingSeconds: this.state.sessionRemainingSeconds - 1,
timerLabel: 'Session'
});
} else if (this.state.breakRemainingSeconds > 0 && this.state.timerLabel === "Session") { //wont continue
this.setState({
timerLabel: 'Break'
});
//chime1.play();
} else if (this.state.breakRemainingSeconds > 0) {
this.setState({
breakRemainingSeconds: this.state.breakRemainingSeconds - 1,
timerLabel: 'Break'
});
} else {
//chime2.play()
this.setState({
sessionRemainingSeconds: this.state.sessionTimeEntry * 60,
breakRemainingSeconds: this.state.breakTimeEntry * 60,
timerLabel: 'Session'
});
}
}
}, 1000)
break;
case true:
console.log("Stop Timer")
this.setState({ running: false })
clearInterval(this.timer)
break;
default:
break;
}
}
resetTimer() {
this.setState({
sessionTimeEntry: 25,
breakTimeEntry: 5,
sessionRemainingSeconds: 1500,
breakRemainingSeconds: 300,
running: false,
timerLabel: "Session"
})
}
formatMinutes(time) {
let seconds = time;
const minutes = (seconds % 60 === 0 ) ? ((seconds/60) < 10 ? "0" + seconds/60 : seconds/60): (Math.floor(seconds/60) < 10 ? "0" + Math.floor(seconds/60) : Math.floor(seconds/60));
seconds = (seconds % 60 === 0 ) ? "00" : ((seconds % 60 < 10) ? "0"+ (seconds % 60) : seconds % 60)
console.log(minutes + ":" + seconds);
return minutes + ":" + seconds;
}
render() {
return (
<div id="clock">
<h1>Pomodoro Clock</h1>
<div id="mainTimer">
<h1>{(this.state.timerLabel==="Break") ? this.formatMinutes(this.state.breakRemainingSeconds) : this.formatMinutes(this.state.sessionRemainingSeconds)}</h1>
<h2>{this.state.timerLabel}</h2>
<div id="timerControls" className="flexContainer">
<button onClick={this.startStop} id="start-stop">Start/Stop</button>
<button onClick={this.resetTimer} id="reset">Reset</button>
</div>
</div>
<div className="flexContainer">
<div id='timerContainer' className="flexContainer">
<h3 id="session-label" className="timerContainerLabels">Session Time</h3>
<h3 id="session-length" className="timerContainerLabels">{this.state.sessionTimeEntry}</h3>
<button onClick={this.subSession} id="session-decrement" className="timerContainerButtons">-</button>
<button onClick={this.addSession} id="session-increment" className="timerContainerButtons">+</button>
</div>
<div id='timerContainer' className="flexContainer">
<h3 id="break-label" className="timerContainerLabels">Break Time</h3>
<h3 id="break-length" className="timerContainerLabels">{this.state.breakTimeEntry}</h3>
<button onClick={this.subBreak} id="break-decrement" className="timerContainerButtons">-</button>
<button onClick={this.addBreak} id="break-increment" className="timerContainerButtons">+</button>
</div>
</div>
</div>
)
}
}
export default App;
