EDIT: Root issue and solution
It seems that custom user agent strings via about:config value and an extension were directing websites to return an invalid HLS stream for Firefox to read. Disabling these user agent changes has led to the issue resolving itself.
Finally got fed up of half of websites not playing audio in Firefox, and decided to debug.
TL;DR: Go to
media.mediasource.mp4.enabled set to false
What is media.mediasource config?
The issue was with the entire suite of
media.mediasource.* configurations, but only the above one seems to be required to disable for videos to start playing.
media.mediasource and why did it break things?
"Firefox plays the "old" WebM format in its default configuration. Turning on MediaSource will allow you to play the "new" WebM"
Steps to find this solution
The first bug I initially found was on bugzilla: Audio Files Sound Strange on Firefox Platform? from 4 years ago
This led me to this reddit thread in regards to this config option
media.webspeech.synth.enabled which made me think that the issue was probably a config media issue.
Led me to media playback has pitched-down audio and a number of other complaints about firefox and twitter audio in general
Finally found what I was looking for with a Palemoon bug
I solved a similar issue on my machine as follows...
Edit ==> Preferences ==> Content
and UNcheck "Enable Media Source Extensions (MSE)"
In firefox language that is:
media.mediasource.enabled which solved the problem.
Documenting steps here in case similar issue for someone else comes up.