Create a custom html5 audio player

[nickjj]

Right now the site is using the default audio player that comes with browsers:

<audio data-episode="{{ page.slug | split: "-" | first }}"
             class="mb-4 pb-4 player" controls="true" src="{{ mp3_url }}">
  Your browser does not support the <code>audio</code> element.
</audio>

The default audio player has a few problems:

• There's no visible controls to adjust the playback speed

  This is the biggest problem. I personally listen to most podcasts at 1.5x or 2.0x and none of the browser default players support adjusting the playback speed. This creates a poor listening experience because now you would need to download the file and play it back at 1.5x locally.

• The player has slightly different features in every browser

  For example Chrome has a ... icon that expands to let you download the file while other browsers do not. That's ok because I have a dedicated download button, but still, it's not a good idea to be at the mercy of a browser's default player for this.

• The player looks different in every browser

  This isn't so bad. It looks ok in IE11, Edge, Chrome and FireFox. I have not tested other devices.

Ideas for creating a custom audio player:

We pretty much have full reign on how the player could look and act.

It should display the following information and have this behavior:

• A play button that toggles with a pause button
• Displays the current time of the track along with the total length in seconds (ex. 0:00 / 50:50)
• A horizontal progress bar that fills up based on time and is clickable to skip around
• Playback speed can be set with a click toggle or drop down from 0.75x to 2.5x in 0.25 increments
• The volume can be adjusted with a slider or another intuitive UI pattern
• It should be flawless when it comes to responsiveness on multiple devices

Nice to have features but aren't essential for day 1:

A little icon to copy the current time to the clipboard to make it easier to share specific times. This would also require adjusting the player to read the time in from an optional query string such as #t=13:37.

JavaScript libraries to use:

The page currently uses jQuery so I would like to stick with that. Most of the work is really CSS. The JavaScript to implement most of these features is pretty straight forward. You just grab a reference to a selector and call a specific audio player function.

Player placement on the page:

Right now the player loads inside of the right pane, which can be seen here:

This is working out ok for now, but it's worth mentioning this because the maximum width of the player is only about 680 pixels so we don't have a ton of space to work with.

It's worth bringing that up because maybe down the line it would be interesting to place the player and subscribe buttons above the right pane and make it full width across the side bar and right pane.

That would give quite a bit more horizontal room, but the challenge there is balancing it out with the subscribe buttons. There is 1 button I didn't include due to lack of space and the download button could get a "Download" label to make it wider. Perhaps with extra spacing that could all work in the end.

But doing this has 1 interesting benefit of maybe having a persistent player across page views. The site is using Turbolinks so it would be pretty easy to pull that off. Basically it would allow for users to listen to an episode but then skim through other podcast episodes or interviews while listening uninterrupted.

Feedback request from you:

What does everyone think about the above? Do you have a favorite audio player design that you want to show as a reference? What about player feature requests?

I'm also open to accepting PRs on a new audio player or even seeing JSFiddles of potential implementations.

[alexdsmartins]

I have been working on a possible implementation following your requirements.
A demo can be seen on codepen.

I decided to make the progress bar full width to maximize to available space and make seeking easier on lengthy files as is the case of podcasts. It only uses html5 and plain javascript. I intend to release the player as a standalone library for easier importing. Any comment is more than welcome.

[nickjj]

Wow I think that's an excellent start. Thanks a lot for taking this on!

It hits all of the important marks and I enjoy the minimalistic feel of it.

Personally I would make a few small adjustments:

• I'd remove the skip back / forward buttons
• Place the XX:XX / XX:XX time to the right of the play button
• Place the copy-at-time icon to the right of the time
• Place the playback speed click toggle to the left of the volume

And then also think of ways to eliminate the material icon dependency. Maybe SVGs or even a few emojis could take its place?

I also wonder if after those changes it would fit on mobile devices without having to wrap to double the height.

[alexdsmartins]

I am glad I can help.
Already implemented the changes you have requested and added support for touch devices.

I personally quite like the skip and forward buttons when listening to a podcast but I understand that you are most concerned in preventing the needing for warping when the site is viewed on a mobile device.
Please see a updated code pen demo.

To remove the dependency of the material icons we could extract the SVGs from the library. I tried using emojis but found that some icons vary too much in style.

I tested the player on a local version on the website and was unable to make player fit in one line without reducing the volume bar to a not so pleasing width, (please see attached image). This was tested on a 360 px width device.

What is in your opinion the best approach for the player to be integrated into the website? I am currently adding a new HTML snipped called audio-player.html on the _includes folder and well as adding the required CSS and JS to the _player.scss and player.js files respectively.

[nickjj]

Looking good, and yes that volume control is a bit too small as is.

I wonder if people on mobile devices would be using their browser instead of a dedicated podcast app? What are your thoughts about that? I bring it up because maybe the playback speed could be hidden on smaller devices (potentially under the assumption if on mobile you would be using a podcast app?) but that's debatable.

I'm open to it wrapping to 2 lines if needed, it just might look weird with 2 full width bars (one for the time line and another for the volume).

I wonder if there's ways to compromise. Something like making the play icon much larger and then putting the 06:23 / 52:50 on 1 line with the playback speed under that (and the 2 rows combined equal the new height of the play icon) and then the volume could take up the rest on the right.

But that might look weird because now the volume is going to 1 row tall while everything else is 2 rows. unless the volume slider itself was very thick. Might be easier to interact with it but might also look off. Hard to say without seeing it.

Your integration plan is perfect.

[nickjj]

That is now addressed by PR #5 which has been merged.