冒着听起来很愚蠢的风险：我想制作一个使用 <canvas> 进行交互的 HTML 音频播放器。想法？答案

【问题标题】：At the risk of sounding dumb: I want to make an HTML audio player that uses <canvas> for interaction. Thoughts?冒着听起来很愚蠢的风险：我想制作一个使用 <canvas> 进行交互的 HTML 音频播放器。想法？
【发布时间】：2011-09-26 23:08:32
【问题描述】：

基本上，我正在尝试制作一个 HTML5 音频播放器，但想用画布完成大部分控件。为什么？我想在学习新事物的同时尝试新事物。到目前为止，我已经完成了所有工作——即可搜索的时间线、播放/暂停按钮等——基本上是通过使用鼠标坐标来决定用户点击的内容。

我主要是好奇那些更有经验的 Web 开发人员对此有何看法。是哑巴吗？有没有你认为我可能无法预见的问题？

如果有人真的感兴趣，我会发布一些代码，但到目前为止我还没有遇到任何问题，所以我真的不需要和故障排除。

谢谢！

【问题讨论】：

哈哈我喜欢这个问题：没什么问题，而且效果很好 - 但我很害怕！
嗯，它就像一把螺丝刀——你可以去做一把丑陋的，它和你花 1 美元买的一样。但是，如果您购买了一个，您将永远不会体验到熔化铁和锤击您的工具以便它可以使用......并且尽可能多地使用的乐趣。因此，基本上如果您想了解事件/画布/JS 的工作方式，请选择熔化/锤击。如果您想完成工作并继续您的生活，请选择经过验证的解决方案。 :)
我很想看看你的一些代码！我一直在开发一个基于 html 5 tile 的小型游戏，我在如何进行“事件”处理方面有点挣扎，所以我很好奇你是怎么做到的。这就是我所做的：jsfiddle.net/Robodude/6bS6r/2

标签： javascript jquery html canvas

【解决方案1】：

为了学习体验？伟大的！您已经清楚地了解了 <canvas> 的工作原理、如何在屏幕上操作对象以及如何使这些对象具有交互性。

在生产应用程序中？不是机会。立即想到什么：

无法访问。 <button> 具有屏幕阅读器可以利用的语义含义。画布没有任何意义；在您的示例中，盲人用户甚至不知道有播放/暂停按钮，更不用说如何激活它们了。
您在重新发明轮子并没有真正的收获。让浏览器处理对象是否被点击的细节。你考虑过变焦吗？键盘交互？
您会失去 wide array 的预烘焙小部件。
保证您的实现在某处存在错误。 <button> 保证是一个按钮。

【讨论】：

非常感谢。我没有考虑过可访问性，我真的很感谢你提出来 - 这是我在过去的项目中努力记住的事情。老实说，这个 WAS 打算用于更大的生产，但我肯定会走不同的路线。干杯！

【解决方案2】：

这个想法本身并没有错，特别是如果你这样做是为了尝试新事物。我要补充的是<canvas> 通常不适合交互式小部件，尽管也有例外。我怀疑你最终会发现最好还是使用 HTML/CSS/DOM 并根据需要散布一些小的 <canvas> 元素。

【讨论】：

【解决方案3】：

我认为将画布用于某些按钮和移动搜索栏没有任何好处。 Groovshark 和 Pandora 使用 divs 蚂蚁，它完全没问题，而且工作得很好。我可以理解您想做一些实验性的事情，但 IE8 将在未来 5 年内出现。因此，建议将仅画布的解决方案用于商业产品。

【讨论】：