Fantasque Player

Demo

Pimp your native HTML players.

Embed the js script fantasque.js then declare the players by their class names like so:

HTML:

<audio controls class="default">
  <source src="salad-ship.mp3" type="audio/mp3">
</audio>

<audio controls class="bluesmoke">
  <source src="mycophiles.mp3" type="audio/mp3">
</audio>

<audio controls class="warmbox">
  <source src="lastly.mp3" type="audio/mp3">
</audio>

Javascript:

fantasque({
  selector: document.querySelectorAll(".default"),
})

fantasque({
  selector: document.querySelectorAll(".bluesmoke"),
  decoOverflow: 10,
  shadow: 5,
  colors: ['blue','cyan', 'blue', 'cyan'],
})

fantasque({
  selector: document.querySelectorAll(".warmbox"),
  theme: "gelly",
})

Available themes: gelly, frame, moods, glyphs. Themes moods and glyphs requires the glyphList option, like glyphList: ["😐","🙂","😃","😍"].

Options: TODO

TODO

• More styles
• Improve 4 bands audio analyser (more balance)
• Testing on various OS / browsers
• Doc update

License

Except the sound files, the code of Fantasque Player is released under GNU AGPL.