Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Media

Touch Audio Toggles +HUD

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

Touch Audio Toggles +HUD - CodeCanyon Item for Sale


Ad: Bluehost hosting

The Audio Toggles +HUD play-system expands upon our foundational audio toolset with a heads-up display (HUD) featuring an unparalleled level of modularity for designing your audio playlists.

“This is fabulous! I tested this on mac/win/iphone/ios, all worked great. You are magical.”
- KevTone

We took a lot of time creating simple step by step working-examples that are included in the purchase. Here’s a preview on YouTube:

This product includes TouchAudio Toggles, and our heads-up display. With the HUD you can implement play-next, play-previous, pause, resume, scrub-reverse, or scrub-forward, as well as display the track name, time, and duration. To demonstrate how easy, and modular this system is, we show you how to easily wire up 7 unique audio interfaces.

We’ve built in a system for managing multiple HUD on a single page, with either global, or localized control capability. So you can embed a global HUD, while simultaneously having smaller collections sprinkled throughout the page with their own controlbar.

We put a lot of time, and work into building a flexible, modular system that goes far beyond the average mp3 playlist. This allows you the creative freedom to design your own playlist, without having to program the functionality. And styling is completely unchained using traditional CSS.

We show you how your audio can share a global HUD, while simultaneously having a localized HUD, or be entirely encapsulated from the global HUD. HUDs can be easily styled to meet your design requirements with CSS.

Our example documentation includes an example where a localized HUD intentionally navigates through a select collection of audio, instead of the entire page.

Evolution / Changelog: 1.0.5
  • Want the next audio to begin play as the previous ends? We added play-through Support!
  • Want the HUD to reset when audio ends, or is stopped? See the included documentation for examples on these new options.
  • Improved encapsulation

This purchase includes the “toggle button”, and the “toggle element”.

Default Toggle Button A Touch Element with Hover

The toggle button is dead-simple, and powerful. It plays & stops audio anywhere on the page. If one starts, it automatically stops the other. Super clean, super basic, and it gets the job done wonderfully.

A Touch Button List

The toggle element, is what allows us to make virtually any layout into an audio interface. We can turn <img> <div> <span> <p> and more into an audio library.

A Touch Element Grid

Both toggles are super-clean when it comes to writing natural html, and styling with css, especially when using a framework like ember, angular, or backbone.

Toggle Buttons Styled

Verified compatibility
  • Android Browser 4.1.1
  • Firefox 14.0.1
  • Google Chrome 21.0.1180.89
  • iOS Safari 5.1.1
  • Internet Explorer 9.0.8112.16421
  • Internet Explorer 8 standards
  • Safari 6.0 (8536.25)
  • Keep building!

    Other components in this categoryAll components of this author
    CommentsFrequently asked questions and answers


    13 November 12

    Last Update:
    23 March 13

    Compatible Browsers:
    IE8, IE9, IE10, Firefox, Safari, Chrome

    Files Included:
    JavaScript JS, HTML, CSS, SWF/FLV


    eCommerce, All Items, circular audio, code rebel base, flash fallback music button, html5 audio, html5 mp3 player, html5 music, javascript audio, mp3 player, music, music player, protect audio, touch audio