Geek Answers Handbook

Sounding stupid at risk: I want to make an HTML audio player that uses <canvas> to interact. Thoughts?

Mostly I'm trying to make an HTML5 audio player, but I want to make most of the controls with a canvas. What for? I want to try something new while learning something new. I still work so far, that is, a search timeline, play / pause buttons, etc. - essentially using the coordinates of the mouse to decide what the user clicks on.

I'm mostly curious what more experienced web developers think about it. This is silly? Is there a problem that you think I cannot foresee?

I will send the code if someone is really interested, but I have not had any problems so far, so I really do not need and have not fixed the problems.

Thanks!

+4
source share
3 answers

For the learning experience? Large! You clearly understood how <canvas> works, how to manipulate objects on the screen, and how to make these objects interactive.

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

  • This is not available. <button> has semantic meaning that a screen device can use. Canvas means nothing; in your example, the blind user has no idea that even the play / pause buttons, especially how to activate them.
  • You reinvent the wheel without real gain. Let the browser describe whether the object was clicked. Did you take the scale into account? Keyboard interaction?
  • You are losing a wide array of ready-made widgets.
  • Your implementation is guaranteed to have a bug. A <button> guaranteed to be a button.
+4
source

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

0
source

I do not believe that there is any benefit in using the canvas for some buttons and a moving search bar. Groovshark and Pandora using div ant it is completely beautiful and works great. I can understand that you want to do something experimental, but IE8 will be in the next 5 years. Therefore, for a commercial product, it is recommended that you think about resolution only on canvas.

0
source

More articles:


All Articles