WebHID Demo: Elgato Stream Deck Daft Punk Soundboard

Daft Punk Soundboard, with ability to connect a Elgato Stream Deck using WebHID to control the soundboard.

Demo

https://webhid-elgato-stream-deck-daft-punk-soundboard.netlify.app/

Video

If you don't own an Elgato Stream, here's a recording of what it looks like

Recording of demo

Usage

Manipulating the Soundboard

Click the buttons to trigger a sound, or use one of the keyboard shortcuts.

  • Keys 1 and 2: Switch between the pages
  • Keys QWER and ASDF: Play sounds from first page
  • Keys UIOP and JKL,: Play sounds from second page

💡 Note that the sounds are paged and that only sounds from the currently active page will play. Pressing U when Page 1 is active won't work for example; you need to activate Page 2 first!

Linking the Elgato Stream Deck

  1. Plug in the Stream Deck device into your computer.
  2. Make sure the native Stream Deck App is not running. The buttons should show the Elgato Logo.
  3. Open the demo and click the “Connect Stream Deck” button.
  4. In the device picker, choose your Stream Deck device and click “Connect”.

💡 Linking the Elgato Stream Deck is a one-time step. Once connected the browser will remember the connection.

👨‍🔬 The demo website is registered for the WebHID Origin Trial, and therefore WebHID should be enabled by default. If you however don't see a connect button, go to chrome://flags/ and manually enable ”Experimental Web Platform Features”.

Known Issues

  • The visual feedback when pressing a button does not play nice with multiple successive presses on the same button. This because the CSS used for it is already applied after the first press, and layout won't be triggered after that.

Credits

The Stream Deck connection was borrowed from this project by Pete LePage

Audio samples by Daft Punk, no copyright infringement intended.

License

The MIT License (MIT). Please see License File for more information.

Changelog

Please see CHANGELOG for more information on what has changed recently.