Comments (3)
I prepared something working in this codepen:
https://codepen.io/luckydonald/pen/NEQLwR?editors=1011
from webaudio-examples.
Hi there @luckydonald, thanks for the contribution!
This example is getting there, but it could use a bit of updating before we include it in the repo. Here's some feedback:
- I think the OO code you've written is fairly elegant, but it is a bit overcomplex for what you are trying to show, and a little confusing. I'd either simplify it, or include some comments to explain what is going on.
- Don't use inline event handler attributes, as they are arguably bad practice from a separation of content/behavior standpoint. Use
addEventListener()
instead - It is not very clear what the buttons do. Maybe make the labels a bit more descriptive, and disable them when it doesn't make sense to press them. Pressing them multiple times in a row seems to cause strange behavior. after a while, pressing stop no longer stops the music playing, which is what I'd expect.
- Maybe hide the audio UI (don't include the
controls
attribute). Then it is a bit clearer that you ought to use the custom buttons to control the example, rather than just using the default audio UI - Analyzer is spelt "analyzer", not "analiser"
- For the visualiser, maybe include it as a long bar that goes across the top of the UI, and also fix it so that it clears on every paint. This doesn't seem to work, and the box just fills up with a big red blob in Firefox, and doesn't seem to work at all in Chrome/Safari.
Refer also to our code example guidelines: https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines
from webaudio-examples.
I'm closing this due to inactivity. If you'd like to come back to this, feel free to reply and we can reopen to consider the improvements. Thank you! :)
from webaudio-examples.
Related Issues (20)
- change the output on mobile device HOT 1
- python3 -m http.server returns wrong MIME type for javascript files causing samples not to work HOT 4
- Bug: Step-Sequencer Noise Duration 0 causes uncaught DOM exception HOT 1
- [webaudio-examples] Adding a waveform example HOT 2
- Uncaught (in promise) DOMException: The element has no supported sources. line 101 in index.html in audio-basics. HOT 3
- [step-sequencer] The slider inputs to set the envelope of the "Sweep" sound are not working as expected HOT 3
- [step-sequencer] The slider input to set the DTMF rate is not working as expected HOT 3
- Add support for touch events to violent theremin demo HOT 4
- Make headers in README.md consistent HOT 1
- Hyperlink methods and objects in directory descriptions to MDN Web Audio API docs HOT 3
- Multi track example could have mixing capabilities HOT 3
- Visualization for OscillatorNode HOT 1
- empty <!-- --> HTML comments in step-sequencer/index.html
- How to preserve an audio's pitch after changing AudioBufferSourceNode.playbackRate? HOT 2
- media-source-buffer example doesn't work in Safari HOT 2
- createMediaElementSource() requires prior call to getUserMedia() using Safari HOT 1
- Violent Theremin example has .DS_store file
- white noise live demo throws error HOT 3
- The element has no supported sources. HOT 4
- Voice-change-O-matic does not work on Safari iOS HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webaudio-examples.