Electroteque Media

Audio Visualiser with HLS

HLS Audio Visualiser Demo

HLS streaming Audio Visualiser example

Note: Safari has an [unfixed Webkit bug](https://bugs.webkit.org/show_bug.cgi?id=180696) making Native HLS streaming impossible to get audio data. A complicated workaround is integrated using HLS.JS and MediaSource to capture and process the data. Modern macOS and IOS Safari browsers support Mediasource streaming.

    
   <div class="flex w-full">
          <div id="hls" class=""></div>
  </div>

  <script type="text/javascript">

  	var player = flowplayer("#hls", {
    "clip": {
        "sources": [
            {
                "src": "https://videos.electroteque.org/hls/bigbuckbunny/playlist.m3u8",
                "type": "application/x-mpegurl"
            }
        ]
    },
    "hlsjs": {
        "safari": true
    },
    "share": false,
    "visualiser": {
        "type": "vu"
    }
});

  </script>