Риск звучит глупо: я хочу создать аудиоплеер HTML, который использует <canvas>для взаимодействия.Мысли?

Question

В основном я пытаюсь создать аудиоплеер HTML5, но хочу сделать большинство элементов управления холстом. Зачем? Я хочу попробовать что-то новое, изучая что-то новое. Я получил все, что работает до сих пор - то есть, доступную временную шкалу, кнопки воспроизведения / паузы и т. Д. - по существу используя координаты мыши, чтобы решить, на что нажимает пользователь.

Мне в основном любопытно, что об этом думают более опытные веб-разработчики. Это глупо? Есть ли проблема, которую вы думаете, я не могу предвидеть?

Я выложу некоторый код, если кому-то действительно интересно, но у меня пока не было проблем, поэтому мне не нужно и устранять неполадки.

Спасибо!

Answer 1

Для обучения? Большой! Вы четко выяснили, как работает <canvas>, как управлять объектами на экране и как сделать эти объекты интерактивными.

В производственном приложении? Нет шансов. Что сразу приходит на ум:

• Это недоступно. <button> имеет семантическое значение, которым может воспользоваться программа чтения с экрана. Холст ничего не значит; в вашем примере слепой пользователь даже не подозревает, что есть даже кнопки воспроизведения / паузы, тем более, как их активировать.
• Вы заново изобретаете колесо без реальной выгоды. Пусть браузер обрабатывает детали того, был ли объект нажат. Вы учли зум? Взаимодействие с клавиатурой?
• Вы проигрываете в широком массиве предварительно запеченных виджетов.
• Ваша реализация гарантированно где-то содержит ошибку. A <button> гарантированно будет кнопкой.

Answer 2

Я не верю, что есть какая-то польза от использования canvas для некоторых кнопок и движущейся панели поиска. Groovshark и Pandora с использованием div s ant, это совершенно нормально и прекрасно работает.Я могу понять, что вы хотите сделать что-то экспериментальное, но IE8 будет в ближайшие 5 лет.Поэтому для коммерческого продукта рекомендуется продумать решение только для холста.

Answer 3

В этой идее нет ничего плохого, особенно если вы делаете это, чтобы попробовать что-то новое.Я хотел бы добавить, что <canvas> обычно не подходит для интерактивных виджетов, хотя есть исключения.Я подозреваю, что вы обнаружите, что в конечном итоге вам лучше использовать HTML / CSS / DOM и, возможно, несколько маленьких <canvas> элементов, разбросанных по мере необходимости.