Dont know whta todo
Seto Elkahfi committed
Jan 23, 2022 at 12:16 UTC
35b7108638ed03f7394007b59b12c370aaae8021
1 file changed
+37
-29
src/components/AudioPlayer.tsx
+37
-29
@@ -3,12 +3,13 @@
3
import axios from 'axios';
4
import React, { CSSProperties } from 'react';
5
import { Component } from 'react';
6
-import { Col, Row, Spinner } from 'react-bootstrap';
6
+import { Col, Row, Spinner, ToggleButtonGroup } from 'react-bootstrap';
7
import YouTube, { Options } from 'react-youtube';
8
-import { GiMicrophone, GiDrumKit, GiGuitarHead, GiGuitarBassHead, GiPianoKeys, GiPlayButton } from 'react-icons/gi';
8
+import { GiMicrophone, GiDrumKit, GiGuitarHead, GiGuitarBassHead, GiPianoKeys, GiPlayButton, GiPauseButton } from 'react-icons/gi';
9
import { IconContext } from 'react-icons';
10
import { db, AudioFiles } from './db';
11
import { Channel, Player, Time, Transport } from 'tone';
12
+import { threadId } from 'worker_threads';
13
14
const buttonStyle: CSSProperties = {
15
@@ -60,7 +61,7 @@ class AudioPlayer extends Component<AudioProps, AudioState> {
61
playerTime: 0,
62
isPlayerReady: false,
63
isYoutubePlayerReady: false,
63
- isPlaying: false,
64
+ isPlaying: true,
65
vocalAudioOn: true,
66
guitarAudioOn: true,
67
bassAudioOn: true,
@@ -81,7 +82,7 @@ class AudioPlayer extends Component<AudioProps, AudioState> {
82
}
83
84
componentWillUnmount() {
84
- this.pauseAudio();
85
+ this.togglePlayAudio();
86
}
87
88
downloadAudioFilesIfNeeded() {
@@ -191,24 +192,21 @@ class AudioPlayer extends Component<AudioProps, AudioState> {
192
}
193
}
194
194
- playAudio(at: number) {
195
- this.vocalPlayer?.seek(at).start()
196
- this.bassPlayer?.seek(at).start()
197
- this.drumsPlayer?.seek(at).start()
198
- this.pianoPlayer?.seek(at).start()
199
- this.otherPlayer?.seek(at).start()
200
-
201
- console.log("Start playing at", at);
202
- }
203
-
204
- pauseAudio() {
205
- this.vocalPlayer?.stop();
206
- this.bassPlayer?.stop();
207
- this.drumsPlayer?.stop();
208
- this.pianoPlayer?.stop();
209
- this.otherPlayer?.stop();
210
-
211
- console.log("Stop playing");
195
+ togglePlayAudio() {
196
+ this.setState({isPlaying: !this.state.isPlaying})
197
+ if (this.state.isPlaying) {
198
+ this.vocalPlayer?.start()
199
+ this.bassPlayer?.start()
200
+ this.drumsPlayer?.start()
201
+ this.pianoPlayer?.start()
202
+ this.otherPlayer?.start()
203
+ } else {
204
+ this.vocalPlayer?.stop();
205
+ this.bassPlayer?.stop();
206
+ this.drumsPlayer?.stop();
207
+ this.pianoPlayer?.stop();
208
+ this.otherPlayer?.stop();
209
+ }
210
}
211
212
setToggleInstrument(mode: Mode) {
@@ -254,8 +252,25 @@ class AudioPlayer extends Component<AudioProps, AudioState> {
252
showinfo: 0
253
},
254
};
255
+
256
+ let togglePlayButton = <GiPauseButton
257
+ color={this.state.isPlaying ? `white` : `red`}
258
+ onClick={() => this.togglePlayAudio() }
259
+ style={buttonStyle} />
260
+ if (this.state.isPlaying) {
261
+ togglePlayButton = <GiPlayButton
262
+ color={this.state.isPlaying ? `white` : `red`}
263
+ onClick={() => this.togglePlayAudio() }
264
+ style={buttonStyle} />
265
+ }
266
+
267
return (
268
<IconContext.Provider value={{ size: "2em", color: "white", className: "global-class-name" }}>
269
+ <Row className="mb-3 mt-3">
270
+ <Col>
271
+ {togglePlayButton}
272
+ </Col>
273
+ </Row>
274
<Row className="mb-3 mt-3">
275
<Col>
276
<GiMicrophone
@@ -321,13 +336,6 @@ class AudioPlayer extends Component<AudioProps, AudioState> {
336
console.log('State changed: ', event)
337
console.log('getCurrentTime: ', event.target.getCurrentTime())
338
console.log('getPlayerState: ', event.target.getPlayerState())
324
-
325
- if (event.target.getPlayerState() === 1) { // Play
326
- const at = event.target.getCurrentTime()
327
- this.playAudio(at)
328
- } else if (event.target.getPlayerState() === 2) {// pause
329
- this.pauseAudio()
330
- }
339
}
340
}
341