Hls.js: Is using hls.js with an <audio> HTMLAudioElement supported?
What do you want to do with Hls.js?
I would like to use Hls.js with an <audio> element to allow playing an audio stream from an HLS playlist without playing the video track.
What have you tried so far?
It works! 🎉 However, I'm wondering if this is officially supported?
If this is supported, perhaps the documentation & TypeScript bindings should be updated to reflect that the attachMedia function accepts an HTMLMediaElement. HTMLMediaElement is a common interface that is inherited by both HTMLAudioElement and HTMLVideoElement.
My specific setup is:
- macOS 10.15.3
- Safari 13.0.5, Chrome 80.0.3987.132
- Follow the setup instructions, but swap out
<audio>for<video>
✅ It successfully loads & plays the audio from an HLS playlist
pdesantis
All 4 comments
I don't believe it is officially supported, but it would be cool if we had a test page setup that played an audio-only stream on an
PRs welcome!
On typing - I would suggest we go with HTMLVideoElement | HTMLAudioElement to be more specific. Although I think HTMLMediaElement is a safe option too.
michaelcunningham19
on 11 Mar 2020
Awesome! I'll work on the demo page. On a somewhat related note, it looks like there are audio-only streams in the test cases:
pdesantis
on 12 Mar 2020
Closing this out. @pdesantis please open a PR with tests if you'd like to continue the conversation. Thanks!
robwalch
on 18 Mar 2020
@pdesantis I just tried this out of curiosity, and it works!
What prompted me to try this was the fact that on iOS, using a video element for audio pops up a black screen to show video when there is none. I tried videoElement.playsInLine = true but it didn't work. So I figured what the heck, I'll try an audio element with the m3u8 which of course works as expected on iOS, but then I tried hls.js on desktop Firefox and it worked with the audio element just fine!
ffxsam
on 1 Nov 2020
Related issues
itsjamie
·
3Comments
jlacivita
·
3Comments
krsvital
·
3Comments
GeorgySerga
·
3Comments
NicholasAsimov
·
3Comments
Most helpful comment
@pdesantis I just tried this out of curiosity, and it works!
What prompted me to try this was the fact that on iOS, using a video element for audio pops up a black screen to show video when there is none. I tried
videoElement.playsInLine = truebut it didn't work. So I figured what the heck, I'll try an audio element with the m3u8 which of course works as expected on iOS, but then I tried hls.js on desktop Firefox and it worked with the audio element just fine!