At the risk of sounding dumb: I want to make an HTML audio player that uses <canvas> for interaction. Thoughts?

Basically I am attempting to make an HTML5 audio player but want to do the majority of the controls with canvas. Why? I want to try something new while learning something new. I have gotten everyt开发者_如何学Ching working so far - that is, a seekable timeline, play/pause buttons, etc. - by essentially using mouse coordinates to decide what the user is clicking on.

Im mainly curious what the more experienced web developers out there think of this. Is it dumb? Is there an issue you think I may not foresee?

I'll post some code if anyone is really interested, but I havent had any issues so far so I dont really need and troubleshooting.

Thanks!

For a learning experience? Great! You've clearly figured out how <canvas> works, how to manipulate objects on-screen, and how to make those objects interactive.

In a production app? Not a chance. What immediately comes to mind:

• It's not accessible. <button> has a semantic meaning that a screen reader can take advantage of. A canvas means nothing; in your example, a blind user has no idea there even are play/pause buttons, much less how to activate them.
• You're reinventing the wheel for no real gain. Let the browser handle the details of whether an object was clicked. Have you accounted for zoom? Keyboard interaction?
• You lose out on a wide array of pre-baked widgets.
• Your implementation is guaranteed to have a bug somewhere. A <button> is guaranteed to be a button.

There is nothing inherently wrong with this idea, especially if you’re doing it to try something new. What I would add is that <canvas> is generally not that suitable for interactive widgets, although there are exceptions. I suspect you will find that in the end you’re better off using HTML/CSS/DOM and maybe some small <canvas> elements sprinkled around as needed.

I don't believe there is any benefit in using canvas for some buttons and a moving seek bar. Groovshark and Pandora using divs ant it's totally fine and working great. I can understand that you want to do something experimental but IE8 will be around for next 5 years. So thinking of a canvas only solution is recommended for commercial product.