Our New Audio Player

Image
Sensei and The Geek - custom audio player screenshot

Hi everybody, it's me the geek. And boy, do I have some geeky stuff for you today!

As this site is based around a podcast, it only makes sense to be able to listen to the podcast here on the site. As such, I embedded an audio player into the site to allow people to play the podcast directly on podcast pages. However, one of the consistent bits of feedback we've received regarding the audio player was essentially that it sucked! There were a few problems with our podcast audio player:

  • When the user navigated away from the page and came back, the podcast would start from the start again.
  • If the user was listening on a phone, and the phone locked, when they opened it back up, it would start from the start again.
  • It was hard to select a spot on the player from which to listen
  • The actual item to click to start playing was unclear on iphones
  • etc.

From our end, there was also a big problem - the audio player was loaded on page load, which accessed the remote file, messing with our stats. Even if a user never clicked play, our stats registered one listen to the podcast. We want as accurate stats as possible, so we needed to fix this.

The audio player I was using was the default HTML5 audio player. To explain it as simple as possible, it meant I was using an <audio> tag in the HTML, and telling it a filename to play. This is about the simplest implementation possible of an audio player on the internet, as the appearance and functionality of the player is entirely determined by the browser, and browsers only give a very simplistic player, leading to the issues our listeners described.

So in order to gain some social validation (which you all know, I loooooooove), I spent some time building a custom player for our site, so that our listeners will like me more. We now have a new custom audio player, built from scratch, by me, the geek! Features of our audio player include:

  • A nice big play button, that is unambiguous, and easy to click
  • The functionality to remember where a listener is in the track, so that when they leave the page and come back to it, the track will pick up where they left off
  • Jump buttons:
    • back to start
    • back 15 seconds
    • forward 15 seconds
    • forward 10 minutes
  • A progress bar that can be clicked (PC) or dragged (mobile) to select a position in the track
  • A visual time indicator showing the current time and the total time for the track

Hopefully this makes for a better user-experience (which we in the industry call UX), keeping our existing listeners happy, and making it easier to keep future listeners as they find our site.

--- geek out begins here ---

Now comes the geeky part - how this was done.

I still needed the default player - it's how we are actually playing audio on the site. However, I needed this to not be on the page when the page is loaded, in order to keep our stats clean. Instead, on page load, I load the nice big play button, and when that is clicked, I load the player 'on the fly', inserting it into the page, but hidden where you can't see it. This means the player is not loaded until someone actually clicks play, keeping our stats clean. When the player is loaded, I then use JavaScript to get the total time of the audio file, and display that to the user.

As the user plays, I then have a script that runs once a second to get the current time from the hidden audio player, Which I then use to update the current timestamp displayed to the user. I also store that timestamp in the browser's memory, so that the player can pick back up at that spot if the user leaves and comes back to the page at a later date.

Next, I added the jump buttons I mentioned earlier, and when they are clicked, I tell the hidden audio player to add/subtract the amount of time given.

Last, I added the visual progress bar, and every second when the time display updates, I also update the width of the progress bar to the percentage of the track that has been played. This way it slowly grows as the track progresses. I also added click and drag functionality to this progress bar, so that if the user adjusts the position of the track from the bar, the audio player is told to begin playing again from that point in the track.

--- end of geek out ---

I really had fun putting this together. Coming up with new challenges and building new things is why I love my job. So getting feedback from listeners on how we can improve anything, from our podcast, to how we build this site, to whatever, gives me opportunities to find solutions to make things better.

So let us know how you feel about our new audio player! Does it work ok for you? Are there any other features you'd like to see? Even acomment to tell us you like it is appreciated (mmm validation). Otherwise, happy listening!

 

--- The Geek