ZEN Audio Player modified for multiple custom audio files

Priyank Sharma Code Snippets 3 Comments

I f you’re a regular on my music section (now moved to https://soundwhore.com/), you must’ve noticed a slick audio player used for previewing all my favorite tunes. Of course, you need to have a modern browser for that!

This awesome player was created by a Digital Designer from Amsterdam known on the web as simurai. However, there was one slight drawback to this player – it can only play one single audio file since there is no way of specifying the desired audio file in the page markup. To make this player usable on my music section, I had to move the audio path from the javascript file to the page markup thus solving my problem.

Download ZEN Audio Player (modified for multiple custom audio files)

<pre><div id="zen">
  <span class="player"></span>
  <span class="circle"></span>
  <span class="progress"></span>
  <span class="buffer"></span>
  <span class="drag"></span>
  <div class="button">
    <span class="icon play"></span>
    <span class="icon pause"></span>
  <span id="audio">audio/track1</span>

To explain more clearly, a new span audio has been added to the existing markup which specifies the path of the audio file you need to embed. Note that the filename is without extension since the same is added by the javascript file.

Let me know your thoughts and suggestions!

About ZEN Audio Player

It’s a single-song HTML5 Audio Player, powered by jPlayer, styled and mostly animated with CSS3. About the name? Hmmm… In the stopped/paused state, doesn’t it remind you a little of a dark Zen stone lying on bright sand? (Read more…)

Comments 3

  1. hi,

    can you help me on Zen multi tracks.
    in fact i want to use zen to make a radio player
    i use m3u link.
    can you help me to use zen for multiple flux m3u???

    1. Post

      Hi Olivier,

      Unfortunately I’m not a programmer – I can just tweak some bits of code to my advantage.
      Maybe, someone specializing in JavaScript would be able to help you out. 🙂


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.