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.

JWplayer unfortunately does not expose their internal hls.js and shaka player provider to be able to capture custom events. 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 shaka config is required to be configured to tell shaka player to not use native HLS. The shaka property on the first source if enabled activates the Shaka plugin provider. Use a Safari browser check to activate this property. Or else falls back to the second source which uses JWPlayer's internal providers.

Set the shaka property on the first HLS item to isSafari() to only enable for Safari.

shaka: isSafari()

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

  <script type="text/javascript">

  	var player = jwplayer("hls").setup({
    "aspectratio": "16:9",
    "playbackRateControls": true,
    "plugins": {
        "../../js/audiovisualiser-8.1.0.js": {
            "type": "vu"
        }
    },
    "shaka": {
        "abr": {
            "enabled": true
        },
        "streaming": {
            "preferNativeHls": false
        }
    },
    "sources": [
        {
            "file": "https://videos.electroteque.org/hls/bigbuckbunny/playlist.m3u8",
            "shaka": true,
            "type": "mp4"
        },
        {
            "file": "https://videos.electroteque.org/hls/bigbuckbunny/playlist.m3u8",
            "type": "application/x-mpegurl"
        }
    ],
    "width": "100%"
});

async function isSafari() {
return /^((?!chrome).)*safari/i.test(navigator.userAgent);
}

  </script>