ArtMixJS: Visualize the Audible (Beta)

When I play an audio element my attention tends to drift. I start opening tabs and reading other things and before I know it I've lost track of what I'm supposed to be listening to.
ArtMix gives the user something to look at and hopefully, keep their attention.

  1. Download the zip file from this site, or clone the code from git.
  2. The /artmix folder is the only one you need. I provided the index.html and /audio to make it a complete demo.
  3. Include in your header (depending on your path):
    <link rel="stylesheet" href="artmix/css/artmix.css" />
    <script src="artmix/js/config.js"></script>
    <script src="artmix/js/artmix.js"></script>
  4. And a single div with id="artmix":
    <div id="artmix">
    </div>
  5. In config.js the editmode should be set to true ("editmode":true). When you load the page the ArtMix box will appear in the upper left corner of the page, like it does on this page. Click on that to open the settings panels. When you're done with the settings, click on the Download button in the lower left. That will open a popup with your new config.js file. Save that in the /artmix directory. When you reload the page you should have all your new settings.

  6. When You've settled on your settings manually set editmode to false to hide the settings panels for good.

  1. There's probably a better way to produce the >em>config.js file.
  2. I'm not crazy about the Setting Panel's style

None at the moment

Download the zip file or get it from Git