Electroteque Media

Audio Visualiser with HLS

HLS Audio Visualiser Demo

HLS streaming Audio Visualiser example

Note: Safari has an unfixed Webkit bug making Native HLS streaming impossible to get audio data. A complicated workaround is integrated using MediaSource streaming to capture and process the data. Modern macOS and IOS Safari browsers support Mediasource streaming.

Video.JS is unfortunately broken with MediaSource HLS with Safari. For now Shaka player and the Shaka Offline Plugin is required to be used instead which has a custom Shaka player build and integration ready. It requires to be bundled with this plugin.

To capture data with Shaka player patching of their api is required for now until an event is made available.

To patch the player with shaka player for Safari the hls config is required to be set to tell it's a hls source;

    <div class="flex w-full h-auto my-auto">
      <video class="video-js vjs-default-skin vjs-fluid " crossorigin="anonymous" controls="" id="hls"></video>
  </div>

  <script type="text/javascript">

  	var player = videojs("hls", {
    "hls": true,
    "plugins": {
        "audiovisualiser": {
            "type": "vu"
        },
        "qualitymenu": {}
    },
    "sources": [
        {
            "src": "https://videos.electroteque.org/hls/bigbuckbunny/playlist.m3u8",
            "type": "application/x-mpegurl"
        }
    ]
});

  </script>