Learn Docker With My Newest Course

Dive into Docker takes you from "What is Docker?" to confidently applying Docker to your own projects. It's packed with best practices and examples. Start Learning Docker →

Getting the HTML5 Audio Element Working with Jekyll in Development


In this video we'll go over how to use nginx with Docker to serve a local Jekyll site so that you can test your audio player.

Quick Jump: Demo Video Going Over the Problem and Solution

Jekyll is awesome (it’s what powers this site) but when trying to develop a custom audio player for the https://runninginproduction.com podcast, I noticed that the Jekyll server in development didn’t let me stream back the audio.

It would just die out after a second or 2 and all sorts of functionality like jumping to specific time stamps while playing didn’t work. I was able to get around all of this by using nginx to serve the site locally in development and I ended up doing it through Docker.

In a few minutes you’ll be able to do the same thing with your Jekyll set up. The video below goes over everything you’ll need to get up and running.

Demo Video Going Over the Problem and Solution

Timestamped Table of Contents

  • 0:41 – Demonstrating the problem with the audio player
  • 2:06 – Taking a quick look at how to implement the default audio player
  • 4:03 – Going over a few steps to get things working locally with nginx
  • 5:13 – Preparing to run nginx inside of a Docker container
  • 6:10 – Taking a quick look at the nginx config file to make this work
  • 7:44 – Running nginx in a container and now the audio player works
  • 9:13 – Working towards creating a custom audio player with more features
  • 10:47 – Taking a look at the upcoming custom audio player

Never Miss a Tip, Trick or Tutorial

Like you, I'm super protective of my inbox, so don't worry about getting spammed. You can expect a few emails per month (at most), and you can 1-click unsubscribe at any time. See what else you'll get too.