This is the 13th day of my participation in Gwen Challenge

Html-based turntable – customizable roulette less than 30KB 🎡

Demo links: haiyongcsdn. Gitee. IO/spin – the – wh…

I’d love and appreciate any feedback on improving it, I’ve been staring at it for a week 👀

I’m building a website with simple tools for board game players. For a variety of reasons, sometimes you need to roll dice online, flip cards or spin spinner.

The site is suitable for simple operations such as this.

I made some decisions for these reasons:

  • The site should be as accessible as possible
  • No page must be larger than 30kB
  • There should be one for every toolno javascriptback

For this tool, we need to overcome some interesting hurdles 😐😐😐 :

Please click

It is important that the rotator has a satisfactory clicking sound when it rotates.

I found an MP3 click 🔉, but even in less than a second it was still huge at 7kB. Using it would put me over 30kB.

I’m sure there are clever ways to reduce the size of audio files. But instead, I chose to use JavaScript and the Web Audio API to generate clicks, which I had never heard of before.

Luckily, I knew a synthesizer enthusiast who explained some of the terminology to me.

I found the tutorial on synthesizing drum sounds 🥁 and adjusted the Step example example to make it fit.

This ends just ~ 1.2KB of JS – there is room for further optimization.

Create a JavaScript free version

Making the spinner not work is very simple.

If JavaScript is disabled in the browser, instead of submitting and rotating the client-side, click Spin the Wheel to submit the form…

Then the server:

  • Build the spinner using the user’s custom values
  • One winner is chosen at random
  • Advanced CSS animations that make wheels spin
  • Send the HTML back to the client

It’s surprisingly good.

I’m using Netlify Functions to do this, I’m not running the entire server for a small percentage of people who will use the site without JS.

SVG animation

While setting up animation for SVG generally works well, some browsers do struggle with it (Safari). After a lot of tinkering, it turns out that the best solution is to use a separate SVG for each animation component, then place each SVG in its own SVG, and then animate them

.

Timing, click

The spinners rotate at different speeds, for different durations, and have a random number of rotations — thus maintaining a surprising and dramatic effect.

For the rotation to be really satisfying, it needs a little click at the top 🔉. (For example, on the game show “Wheel of Fortune”).

This means that there are “pins” on the rim of the wheel, and the autoreceiver is animated every time the “pin” is “hit”.

For performance reasons, I think it’s best to pre-time the animation (and click the sound).

It turned out to be a very complicated task, and AFTER three days of calculus, I gave up.

Instead, it uses the requestAnimationFrame and measures the current rotation of the spinner. If the rotation is between a certain range, a click sound is produced.

Yes, but they do make mistakes.

This also means that the no-javascript version does not have auto-cataloger animations.

Rotate the value of 1000s

One problem is allowing people to add a value of 1000 to the spinner.

I found a use case where someone might want to paste a spreadsheet of entire values to randomly select one.

So I decided to use a

The biggest issue here is performance.

To make it work, the spinner < SVG > becomes less complex as more values are added.

  • The pattern is deleted.
  • The maximum number of pins on the wheel rim is 60
  • Text paths become simpler.

I only tested it on my new computer, but it worked up to something close to 6000. Feel free to test and let me know!

Still need improvement

The overall look can be polished, especially in other color schemes. Clicking sounds may be related to adjustments. Finding a way to accurately measure advanced click animations would be amazing. Making custom wheels embeddable

Source code download:

Pay attention to the author’s wechat public number [la la la want biu point what] reply [turntable]

I will continue to update similar free fun H5 games, Java games, fun, practical projects and software, and so on

More relevant articles and my contact information are listed here:

Github.com/wanghao221 gitee.com/haiyongcsdn…

Thank you for reading to the end ❤️ here is your medal

Finally, don’t forget to support ❤️ or 📑