Electroteque Media

Autoplay with mediadevice capture hacks

Autoplay hacks to work around muting and audio context restrictions.

Permission to enable audio visualiser.

Temporarily accept audio permission to enable audio visualiser. It will switch off immediately.

This example demonstrates the audio meter display working while muted and autoplay using mediadevice hacks to work around autoplay restrictions. Hacks have been added to display modal windows when requesting to temporarily request and capture a microphone device which will be turned off immediately using the usemediadevice config. Capturing a microphone media device completely works around autoplay mute and audio context suspended state restructions requiring user gesture. Like with the WebRTC features.

Microphone devices will only be requested if the context is still suspended.

A seperate tiny tailwind css file is included for the modal window styles but it can be any framework.

NOTE: User gesture confirmed is working if navigating to a page with a link in Chrome so these autoplay work arounds may not be needed. Firefox does not recognise navigated link user gesture.


NOTE: Due to an oversight allowing autoplay audio contexts which is required for audio analysers to work. And no permission api was added for audio contexts which means the permission can be saved for the site. A modal window can be displayed to notify first requesting a microphone media device. And if that fails it will keep requesting user gesture clicks in another fallback modal window.

To notify requesting microphones, the Permission api is used to detect it prompting the user. Firefox and Safari have no Permission API ability to detect accepted microphone devices so a work around has been added to the work around using localstorage to detect if a device has been accepted. Using localstorage is once off and won't know if device prompts is re-requested.

Safari may still fail to autoplay due to requiring the video element to be unmuted to capture audio data for the analyser.

Requesting mediadevices on a domain require to be served under HTTPS to work.

    
  <div class="flex flex-col w-full">
          <div id="autoplay-mediadevice" class=""></div>

  </div>

  <script type="text/javascript">

  	var player = flowplayer("#autoplay-mediadevice", {
    "autoplay": true,
    "muted": true,
    "src": [
        {
            "src": "https://videos.electroteque.org/bitrate/elephants_dream_2000k.webm",
            "type": "video/webm"
        },
        {
            "src": "https://videos.electroteque.org/bitrate/elephants_dream_2000k.mp4",
            "type": "video/mp4"
        },
        {
            "src": "https://videos.electroteque.org/bitrate/elephants_dream_2000k.ogv",
            "type": "video/ogg"
        }
    ],
    "token": "eyJraWQiOiIyeHRpc0Q5NHZzTjIiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCIyeHRpc0Q5NHZzTjJcIixcImRvbWFpblwiOltcImVsZWN0cm90ZXF1ZS5vcmdcIl19IiwiaXNzIjoiRmxvd3BsYXllciJ9.WLUkZHpDNoaXWDaFO2V5UfXm7SnDvE1pFAM0e7ppnFovOSyCCZM-b8gQNBSElB5yirTP__x76Qyo8pMWh6lVrw",
    "visualiser": {
        "mutable": true,
        "usemediadevice": true
    }
});

  </script>