Introduction

The Audio Visualiser Meter plugin provides a realtime visualisation of the video sound and volume as a meter or spectrum display.

This utilises the Html5 audio api to obtain the sample data for visualisation display.

By default it displays a gradient audio meter bar in stereo with a more complicated spectrum and VU Meter display

For browsers that support it. Frame accurate audio measurements is in sync with the video.

Mutable Audio Meter

Provided is a feature to have audio meters while video is muted using the mutable config. Audio data is not available if the video element is muted or the volume is zero caused by autoplay requirements due to oversight by browsers so requires to keep the element unmuted and using audio routing.

This is a considerable hack on players and video elements requiring patching and difficult to implement and stabilise. Due to autoplay and muted restrictions this complicates it further. Mute toggling should be stable dependant on muted configs and autoplay. See Mutable Demo

Autoplay

The video element requires to be unmuted to receive audio data and because of this issue affects autoplay browser restrictions without user gesture. Even while using the mutable audio router feature. Some oversight issues with accepting audio contexts using a Permission API means audio contexts won't start without user gesture per page load. The descision by the user cannot be stored.

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.

Modal dialog window features in events has been provided to request user gesture to handle unmuting the video element and starting audio contexts so the analyser will work. Using a player api to start the context. See Autoplay Demo

Alternative hacks have been provided as an option to first temporarily request a microphone device that works around all muted autoplay and audio contexts restrictions. The user will be promoted to allow a microphone, so a modal dialog window in another event can be provided to notify to accept permissions.

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

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

See Autoplay Mediadevice Demo

Features

• Audio visualisation as a stereo solid gradient bar , VU Meter or spectrum visualisation.
• Works on any audio or video source.
• Mutable option to monitor while muted.
• Works on browsers that support the audio api.
• Frame accurate audio measurements in sync with the video.
• Autoplay hacks to ask for user gesture to turn on audio contexts in a modal dialog.
• Autoplay hacks using mediadevice to work around muted autioplay and audio context browser restrictions.