Skip to content

Commit b9ddc6b

Browse files
YeonVYeonV
committed
WebAudio Settings
1 parent f5b5c42 commit b9ddc6b

File tree

5 files changed

+80
-15
lines changed

5 files changed

+80
-15
lines changed

‎renderer/components/AudioContainer.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ class AudioDataContainer extends React.Component {
1919
if (!this.audioContext || this.audioContext.state === 'closed') {
2020
return
2121
}
22-
console.log(this.audioContext)
2322
const source = this.audioContext.createMediaStreamSource(stream);
2423
const analyser = this.audioContext.createAnalyser();
2524
analyser.fftSize = this.props.fft;
@@ -69,9 +68,12 @@ class AudioDataContainer extends React.Component {
6968
return (
7069
<div style={{ height: 255, position: 'relative' }}>
7170
<Visualizer
71+
fft={this.props.fft}
72+
bandCount={this.props.bandCount}
73+
key={this.props.bandCount}
7274
initializeAudioAnalyser={this.initializeAudioAnalyser}
7375
audioContext={this.audioContext}
74-
frequencyBandArray={this.frequencyBandArray}
76+
frequencyBandArray={[...Array(this.props.bandCount).keys()]}
7577
getFrequencyData={this.getFrequencyData}
7678
refresh={() => {
7779
if (this.audioContext && this.audioContext.state === 'running') {

‎renderer/components/Visualizer.jsx‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,9 @@ export default function Visualizer({
6969
initializeAudioAnalyser,
7070
stop,
7171
refresh,
72-
audioContext
72+
audioContext,
73+
fft,
74+
bandCount
7375
}) {
7476

7577
const classes = useVisualizerStyles();
@@ -85,6 +87,9 @@ export default function Visualizer({
8587
const setColor = useStore(state => state.setColor)
8688
const bgColor = useStore(state => state.bgColor)
8789
const setBgColor = useStore(state => state.setBgColor)
90+
const setAudioSettings = useStore(state => state.setAudioSettings)
91+
const setLeftFb = useStore(state => state.setLeftFb)
92+
const setRightFb = useStore(state => state.setRightFb)
8893

8994
const [activeFb, setActiveFb] = useState(-1)
9095
const [activeRightFb, setActiveRightFb] = useState(-1)
@@ -144,8 +149,10 @@ export default function Visualizer({
144149
if (domElements.length > 0) {
145150
for (let i = 0; i < frequencyBandArray.length; i++) {
146151
let num = frequencyBandArray[i]
147-
domElements[num].style.backgroundColor = `rgb(${color.r}, ${color.g}, ${color.b})`
148-
domElements[num].style.height = `${amplitudeValues.current[num]}px`
152+
if (domElements[num]) {
153+
domElements[num].style.backgroundColor = `rgb(${color.r}, ${color.g}, ${color.b})`
154+
domElements[num].style.height = `${amplitudeValues.current[num]}px`
155+
}
149156
}
150157
if (activeFb > -1) {
151158
const ledDataPrefix = [2, 1];
@@ -243,11 +250,20 @@ export default function Visualizer({
243250
setTimeout(() => {
244251
initializeAudioAnalyser()
245252
requestAnimationFrame(runSpectrum)
246-
}, 100)
253+
}, 100)
247254
}
255+
setLeftFb(activeFb)
256+
setRightFb(activeRightFb)
248257
}, [color, bgColor, flipped, innerVolume, activeFb, activeRightFb])
249258

250259
useEffect(() => {
260+
handleStopButtonClick()
261+
}, [fft, bandCount])
262+
263+
useEffect(() => {
264+
setAudioSettings({
265+
sampleRate: audioContext.sampleRate
266+
})
251267
navigator.mediaDevices.enumerateDevices()
252268
.then(function (adevices) {
253269
setAudioDevices(adevices)

‎renderer/effects/index.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,17 @@ const BladePower = ({ ampValues, pixel_count, color, bgColor, activeFb, volume }
88
.fill([color.r, color.g, color.b])
99
.fill([bgColor.r, bgColor.g, bgColor.b], (ampValues[activeFb] - volume * 2.55) > 0 ? parseInt(pixel_count * ((ampValues[activeFb] - volume * 2.55) / 255)) : 0) : null
1010

11-
const BladeWave = ({ ampValues, pixel_count, color, bgColor, activeFb, volume }) => [...Array(pixel_count).keys()].map(v => [(ampValues[v] / 255) * color.r, (ampValues[v] / 255) * color.g, (ampValues[v] / 255) * color.b])
12-
13-
const BladeWaveBg = ({ ampValues, pixel_count, color, bgColor, activeFb, volume }) => [...Array(pixel_count).keys()].map(v => [((ampValues[v] / 255) * color.r + bgColor.r) / 2, ((ampValues[v] / 255) * color.g + bgColor.g) / 2, ((ampValues[v] / 255) * color.b + bgColor.b) / 2])
11+
const BladeWave = ({ ampValues, pixel_count, color, bgColor, activeFb, activeRightFb, volume }) =>
12+
[...Array(pixel_count).keys()].map(v => [
13+
((ampValues[v] - volume * 2.55) / 255) * color.r,
14+
((ampValues[v] - volume * 2.55) / 255) * color.g,
15+
((ampValues[v] - volume * 2.55) / 255) * color.b])
16+
17+
const BladeWaveBg = ({ ampValues, pixel_count, color, bgColor, activeFb, activeRightFb, volume }) =>
18+
[...Array(pixel_count).keys()].map(v => [
19+
(((ampValues[v] - volume * 2.55) / 255) * color.r + bgColor.r) / 2,
20+
(((ampValues[v] - volume * 2.55) / 255) * color.g + bgColor.g) / 2,
21+
(((ampValues[v] - volume * 2.55) / 255) * color.b + bgColor.b) / 2])
1422

1523

1624
const Effect = ({ type, config }) => {

‎renderer/pages/yz.jsx‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { remote } from 'electron';
55
import { useRouter } from 'next/router';
66
import { ipcRenderer } from 'electron';
77
import { ArrowDownward, ArrowUpward, ChevronLeft, ChevronRight, Close, Equalizer, Refresh, Settings } from '@material-ui/icons';
8-
import { Drawer, List, Divider, Card, Typography, Button, IconButton, Tooltip } from '@material-ui/core';
8+
import { Drawer, List, Divider, Card, Typography, Button, IconButton, Tooltip, TextField } from '@material-ui/core';
99
import useLeftBarStyles from '../styles/yz.styles';
1010
import { template } from '../components/MenuTemplate';
1111
import AudioDataContainer from '../components/AudioContainer';
@@ -36,11 +36,14 @@ const LeftBar = () => {
3636
// const fft = useStore(state => state.audioSettings.fft)
3737
// const bands = useStore(state => state.audioSettings.bands)
3838
const setAudioSettings = useStore(state => state.setAudioSettings)
39+
const leftFb = useStore(state => state.leftFb)
40+
const rightFb = useStore(state => state.rightFb)
3941
const classes = useLeftBarStyles({ drawerWidth, drawerBottomHeight, bottomBarOpen });
4042

4143
const [combNodes, setCombNodes] = useState([])
4244
const [isZeroConf, setIsZeroConf] = useState(router.query.zeroconf || (typeof window !== 'undefined' && window.localStorage.getItem("wled-manager-zeroconf") === 'true') || false)
4345
const [singleMode, setSingleMode] = useState(router.query.singlemode || false)
46+
const [error, setError] = useState("")
4447

4548
useEffect(() => {
4649
const { Menu } = remote;
@@ -185,7 +188,7 @@ const LeftBar = () => {
185188
}
186189
}
187190
}, [])
188-
console.log(audioSettings)
191+
189192
return (<>
190193
<Head>
191194
<title>WLED Manager - by Blade</title>
@@ -302,7 +305,32 @@ const LeftBar = () => {
302305
<div style={{ height: drawerBottomHeight === 350 ? 0 : 450, width: '100%' }}>
303306

304307

305-
{drawerBottomHeight !== 350 && 'WebAudio settings'}
308+
{drawerBottomHeight !== 350 && <>
309+
<Typography style={{ paddingLeft: 40, paddingTop: 20 }} variant="h5">WebAudio settings</Typography>
310+
<div style={{ padding: 20 }}>
311+
312+
<TextField label="FFT-size" error={error === "fft"} helperText={error === "fft" ? "[32,32768] and power of 2" : ""} size="small" type="number" min={32} max={32768} style={{ width: 120, margin: 10 }} variant="outlined" defaultValue={audioSettings.fft} onBlur={(e) => {
313+
if ((parseInt(e.target.value) != 0) && ((parseInt(e.target.value) & (parseInt(e.target.value) - 1)) == 0) && (parseInt(e.target.value) >= 32) && (parseInt(e.target.value) <= 32768)) {
314+
setAudioSettings({ fft: parseInt(e.target.value) });
315+
setError("")
316+
} else {
317+
setError("fft")
318+
}
319+
}} />
320+
<TextField label="Bands" error={error === "bands"} helperText={error === "bands" ? "min: 1" : ""} size="small" type="number" min={1} max={128} style={{ width: 120, margin: 10 }} variant="outlined" defaultValue={audioSettings.bands} onBlur={(e) => {
321+
if (parseInt(e.target.value) > 0) {
322+
setAudioSettings({ bands: parseInt(e.target.value) });
323+
setError("")
324+
} else {
325+
setError("bands")
326+
}
327+
}} />
328+
<TextField label="SampleRate" disabled size="small" type="number" style={{ width: 120, margin: 10 }} variant="outlined" defaultValue={audioSettings.sampleRate} />
329+
<TextField label="Left FB" helperText="via left-click" disabled size="small" style={{ width: 120, margin: 10 }} variant="outlined" value={leftFb !== -1 ? leftFb : 'unset'} />
330+
<TextField label="Right FB" helperText="via right-click" disabled size="small" style={{ width: 120, margin: 10 }} variant="outlined" value={rightFb !== -1 ? rightFb : 'unset'} />
331+
</div>
332+
</>
333+
}
306334

307335

308336
</div>

‎renderer/store/settings.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,22 @@ const storeSettings = (set, get) => ({
2626
})),
2727

2828
audioSettings: {
29-
fft: 4096,
30-
bands: 64
29+
fft: 2048,
30+
bands: 64,
31+
sampleRate: 48000
3132
},
3233
setAudioSettings: (config) => set((state) => ({
33-
...state, ...config
34+
audioSettings: {...state.audioSettings, ...config}
35+
})),
36+
37+
leftFb: -1,
38+
setLeftFb: (config) => set((state) => ({
39+
leftFb: config
40+
})),
41+
42+
rightFb: -1,
43+
setRightFb: (config) => set((state) => ({
44+
rightFb: config
3445
})),
3546

3647
color: { r: 0, g: 255, b: 179 },

0 commit comments

Comments
 (0)