Search code examples
htmlaudiostreamingvideo.js

Issues playing live stream audio in Chrome and Firefox

I have an MP3 audio stream contained in an .m3u8 file delivered through CloudFront. This is successfully used by apps to play audio, but I'm trying to play this in a browser.

I have tried the basic HTML <audio> tag, and more sophisticated implementations like videojs. In all cases, the audio plays fine in Safari, but will not play in Chrome or Firefox.

Using video.js:

<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{"liveui": true}'>
<source src="https://d1q1pwal4ma0iv.cloudfront.net/playlist.m3u8" type="application/x-mpegURL"/>
  </video>

  <script src="https://vjs.zencdn.net/7.7.6/video.js"></script>
</body>

HTML:

<audio
    controls src="https://d1q1pwal4ma0iv.cloudfront.net/playlist.m3u8">
        Your browser does not support the
        <code>audio</code> element.
</audio>

Does anyone have any theories as to what it is about Chrome and Firefox which means it does not play there?

Solution

  • Video.js does not support mp3 in HLS. HLS with acc would work.