HTML audio element fails to load audio stream

Question

I have assembled a website and configured a Digital Ocean droplet to serve an audio stream using Azuracast.

At this URL http://137.184.153.182:8010/radio.mp3 lives the live audio stream. At the time of posting I am streaming static from Audio Hijack, which you can hear by visiting the URL and clicking play on the audio element. By inspecting the site I see the following HTML

<video controls="" autoplay="" name="media"> <source src="http://137.184.153.182:8010/radio.mp3" type="audio/mpeg"></video>

On the site meant to deliver the audio stream to listeners https://feverdream.radio, I have placed an identical HTML snippet. However the play button remains grayed out and I am unable to play the audio live stream.

I do not understand what I could be doing wrong so that the same code is functional on one URL but not another.

Answer 1

an insecure HTTP resource is being loaded for an HTTPs website. Open the browser console to see the error below:

Mixed Content: The page at 'https://feverdream.radio/' was loaded over HTTPS, but requested an insecure element 'http://137.184.153.182:8010/radio.mp3'. This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html

The SSL/TLS certificate authority for 137.184.153.182 should be either:

1. Publicly issued - see Let's Encrypt
2. Privately trusted - see how to trust a self signed certificate for your non-public development environment.