Touch friendly html audio thumbnails (to use with your tabletop rpg of choice)

What is it ?

I made this html touch friendly audio player.

This is a grid of thumbnails. Tap or click a thumbnail to play the associated sound or tune you want.

You also have three special thumbnails (bottom right) to autoloop, resume or pause the current played audio file.

Here is what it looks like.

Why use it ?

You may like to use it with the "Eternal Lies" soundtrack.

You need to work it (choose .jpg and .mp3 files) but it will come very handy at the table (well, I think more than a regular audio player).

How to use it ?

Use it on your desktop or on your tablet.

This is available here as a zip file.

Just uncompress and read the readme.txt

You'll need to add in the directory your thumbnails (.jpg) and your audio (.mp3) files.


This is configured to display a 1080p (1920*1080) friendly grid, but feel free to modify the index.html file to match your needs.

(The following post shows you the actual source code. You can copy and past it in a text file you will have to call "something.html" for it to work.)


Works fine on Internet Explorer 10 (it will ask you to give autorisations because it is javascript and access local audio files) and Google Chrome 29.

Known issues

Warning : if you tap or click a thumbnail and the associated audio file does not exists, then the player will go silent, and you will have to refresh the page for it to work again.


  • So, your html document is... funky :) I'm assuming that's why the text of it is up here?
  • edited September 2013
    Uh ... Well, the main reason I did put the code here : (as one can never be too suspicious) you do not even need to download anything to get the benefits :]

    (As for the layout : the forum does not support indentation.)
Sign In or Register to comment.