-
Notifications
You must be signed in to change notification settings - Fork 196
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix: Implemented STOP button behavior to toggle audio playback #353
base: main
Are you sure you want to change the base?
Changes from 1 commit
bf3ea58
894b234
2df8734
00ddbef
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
{"version":"3.1.0","revision":"0643084","lastUpdated":"2024-03-07","copyrightYear":2024} | ||
{"version":"3.1.0","revision":"bf3ea58","lastUpdated":"2024-03-08","copyrightYear":2024} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,21 +6,16 @@ const audioContext = new AudioContext(); | |
let oscillatorProcessor; | ||
|
||
const startAudio = async (context, options) => { | ||
await context.audioWorklet.addModule('oscillator-processor.js'); | ||
oscillatorProcessor = | ||
new AudioWorkletNode(context, 'oscillator-processor', { | ||
processorOptions: { | ||
waveformType: options.waveformType, | ||
frequency: options.frequency, | ||
} | ||
}); | ||
oscillatorProcessor.connect(context.destination); | ||
}; | ||
|
||
const stopAudio = () => { | ||
if (oscillatorProcessor) { | ||
oscillatorProcessor.disconnect(); | ||
oscillatorProcessor = null; | ||
if (!oscillatorProcessor) { | ||
await context.audioWorklet.addModule('oscillator-processor.js'); | ||
oscillatorProcessor = | ||
new AudioWorkletNode(context, 'oscillator-processor', { | ||
processorOptions: { | ||
waveformType: options.waveformType, | ||
frequency: options.frequency, | ||
} | ||
}); | ||
oscillatorProcessor.connect(context.destination); | ||
} | ||
}; | ||
|
||
|
@@ -32,14 +27,14 @@ window.addEventListener('load', async () => { | |
|
||
buttonEl.addEventListener('click', async () => { | ||
if (!oscillatorProcessor) { // If audio is not playing, start audio | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nit: Let's move the comment below the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done. |
||
const waveformType = | ||
document.querySelector('#demo-select-waveform-type').value; | ||
const waveformType = document.querySelector('#demo-select-waveform-type').value; | ||
const frequency = document.querySelector('#demo-input-frequency').value; | ||
await startAudio(audioContext, { waveformType, frequency }); | ||
hoch marked this conversation as resolved.
Show resolved
Hide resolved
|
||
audioContext.resume(); | ||
buttonEl.textContent = 'STOP'; | ||
} else { // If audio is playing, stop audio | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nit: Ditto on comments. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done |
||
stopAudio(); | ||
oscillatorProcessor.disconnect(); | ||
oscillatorProcessor = null; | ||
buttonEl.textContent = 'START'; | ||
} | ||
}, false); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,21 +3,22 @@ | |
// found in the LICENSE file. | ||
|
||
const audioContext = new AudioContext(); | ||
let oscillator; | ||
let oscillatorNode; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Changed the name to oscillatorNode |
||
let isPlaying = false; | ||
|
||
const startAudio = async (context) => { | ||
await context.audioWorklet.addModule('bypass-processor.js'); | ||
oscillator = new OscillatorNode(context); | ||
const bypasser = new AudioWorkletNode(context, 'bypass-processor'); | ||
oscillator.connect(bypasser).connect(context.destination); | ||
oscillator.start(); | ||
if (!oscillatorNode) { | ||
await context.audioWorklet.addModule('bypass-processor.js'); | ||
oscillatorNode = new OscillatorNode(context); | ||
const bypasser = new AudioWorkletNode(context, 'bypass-processor'); | ||
oscillatorNode.connect(bypasser).connect(context.destination); | ||
oscillatorNode.start(); | ||
} | ||
}; | ||
|
||
const stopAudio = () => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We should leave the rest and simply suspend the context. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks for the suggestion. I've modified the stopAudio() function to suspend the audio context instead of stopping and disconnecting the oscillator node. Please review the changes and let me know if they meet the requirements. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This also has the same problem with |
||
if (oscillator) { | ||
oscillator.stop(); | ||
oscillator.disconnect(); | ||
if (audioContext.state === 'running') { | ||
audioContext.suspend(); | ||
} | ||
}; | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can't be called multiple times in any scenario. I think you'll get an error if you do this. Have you checked?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, it can't be called multiple times, so I have modified it. No, I didn't get any error though!