-
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
…let, one-pole-filter, volume-meter, noise-generator
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
{"version":"3.1.0","revision":"894b234","lastUpdated":"2024-03-14","copyrightYear":2024} | ||
{"version":"3.1.0","revision":"2df8734","lastUpdated":"2024-03-26","copyrightYear":2024} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,9 +5,15 @@ | |
const audioContext = new AudioContext(); | ||
let isPlaying = false; | ||
let noiseGenerator; | ||
let moduleAdded = false; | ||
|
||
const startAudio = async (context) => { | ||
await context.audioWorklet.addModule('noise-generator.js'); | ||
|
||
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. Please remove this empty line. |
||
if(!moduleAdded) { | ||
await context.audioWorklet.addModule('noise-generator.js'); | ||
moduleAdded = true; | ||
} | ||
|
||
const modulator = new OscillatorNode(context); | ||
const modGain = new GainNode(context); | ||
noiseGenerator = new AudioWorkletNode(context, 'noise-generator'); | ||
|
@@ -39,7 +45,7 @@ window.addEventListener('load', async () => { | |
if (!isPlaying) { | ||
// If not playing, start the audio. | ||
await startAudio(audioContext); | ||
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 will call L10 (addModule) multiple times depending on 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. I have updated the code to ensure that the module is added only once by using a flag (moduleAdded) to track whether the module has already been loaded. 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. I believe this example is pretty much the same with the other oscillator example. Why do we need a different flag ( |
||
audioContext.resume(); | ||
await audioContext.resume(); | ||
isPlaying = true; | ||
buttonEl.textContent = 'Playing...'; | ||
} else { // If playing, stop audio | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,9 +5,15 @@ | |
const audioContext = new AudioContext(); | ||
let oscillator; | ||
let isPlaying = false; | ||
let moduleAdded = false; | ||
|
||
const startAudio = async (context) => { | ||
await context.audioWorklet.addModule('one-pole-processor.js'); | ||
|
||
if(!moduleAdded) { | ||
await context.audioWorklet.addModule('one-pole-processor.js'); | ||
moduleAdded = true; | ||
} | ||
|
||
oscillator = new OscillatorNode(context); | ||
const filter = new AudioWorkletNode(context, 'one-pole-processor'); | ||
const frequencyParam = filter.parameters.get('frequency'); | ||
|
@@ -38,7 +44,7 @@ window.addEventListener('load', async () => { | |
buttonEl.addEventListener('click', async () => { | ||
if (!isPlaying) { | ||
await startAudio(audioContext); | ||
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. Ditto here. 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. added the flag check here same as above. |
||
audioContext.resume(); | ||
await audioContext.resume(); | ||
isPlaying = true; | ||
buttonEl.textContent = 'Playing...'; | ||
buttonEl.classList.remove('start-button'); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,9 +5,15 @@ | |
const audioContext = new AudioContext(); | ||
let mediaStream; | ||
let volumeMeterNode; | ||
let moduleAdded = false; | ||
|
||
const startAudio = async (context, meterElement) => { | ||
await context.audioWorklet.addModule('volume-meter-processor.js'); | ||
|
||
if (!moduleAdded) { | ||
await context.audioWorklet.addModule('volume-meter-processor.js'); | ||
moduleAdded = true; | ||
} | ||
|
||
mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true }); | ||
const micNode = context.createMediaStreamSource(mediaStream); | ||
volumeMeterNode = new AudioWorkletNode(context, 'volume-meter'); | ||
|
@@ -39,7 +45,7 @@ window.addEventListener('load', async () => { | |
buttonEl.addEventListener('click', async () => { | ||
if (!mediaStream) { // If audio is not playing, start audio | ||
await startAudio(audioContext, meterEl); | ||
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. Same here. 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. I made the requested changes here: 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. added the flag check here too. |
||
audioContext.resume(); | ||
await audioContext.resume(); | ||
buttonEl.textContent = 'STOP'; | ||
} else { // If audio is playing, stop audio | ||
stopAudio(); | ||
|
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.
L26-L29 are exactly same with L31-L34. Perhaps this block can be simplified further?