Thinfinity VNC: onAudioInteractionRequired Event and Custom Controls

Overview

This feature introduces the onAudioInteractionRequired event, designed to address modern browser policies that restrict audio autoplay. It empowers developers to implement custom handling for audio playback when user interaction is required.

Technical Description

Event Purpose

The onAudioInteractionRequired event is triggered when a browser blocks audio playback due to the absence of prior user interaction. This restriction, enforced by most browsers, aims to enhance user experience by preventing unexpected or disruptive audio playback.

Custom Handling

The event allows developers to take control of how audio playback resumes, bypassing the default system behavior. Key functionalities include:

• Custom UI Implementation: Developers can create tailored user interface elements or workflows to prompt user interaction for resuming audio.

• Suppression of Default Notifications: Returning true from the event handler disables the internal notification (such as a growl-popup), enabling developers to manage the interaction fully within their application.
  

How to Use the onAudioInteractionRequired Event

To utilize the onAudioInteractionRequired event, define a function for vnc.onAudioInteractionRequired that includes the logic for presenting custom audio controls. This function will be executed whenever audio playback is blocked due to browser restrictions.
Here is an example of how you can create a button dynamically to resume audio:

vnc.onAudioInteractionRequired = function () {
    // Create and append a custom button for user interaction
    let btn = document.createElement("button");
    btn.innerText = "Enable Audio";
    btn.addEventListener("click", function () {
        vnc.resumeAudio(); // Resume audio playback
        btn.remove(); // Remove the button after interaction
    }); 
    document.body.appendChild(btn); 
    return true; // Prevent the default behavior
};

This approach ensures compliance with browser requirements for explicit user actions.

Testing and Debugging

Open the developer tools in your browser and navigate to the Console tab. Simulate the event and test your custom audio controls using the following code:

vnc.onAudioInteractionRequired = function () {   
    console.log("Audio interaction required. Adding controls...");   
    return true;
};

To test functionality, manually invoke the vnc.resumeAudio() or vnc.stopAudio() methods.

Best Practices

• Design custom controls to align seamlessly with your application's user interface and usability standards.
• Provide clear and concise prompts to guide users through enabling audio functionality.
  

API Methods for Audio Control

vnc.resumeAudio()

• Resumes or starts audio playback.
• Typically called in response to a user interaction, such as clicking a custom control.

vnc.stopAudio()

• Stops audio playback, allowing developers finer control over the media experience.
  

Summary for Front-End Developers​

This feature allows developers to handle browser autoplay restrictions for audio gracefully. The onAudioInteractionRequired event empowers developers to override default browser behavior and define custom controls for a tailored user experience.

By leveraging these tools, you can ensure seamless integration of audio features into modern, user-interactive web applications, enhancing both usability and design consistency.

• Related Articles

• Implementing Connection / Reconnection Logic (Disable Reconnection Warning)

  This tutorial guides you through the process of implementing connection reconnection logic in your project. Follow the steps below to ensure a smoother experience for users during network instability by controlling display behavior and handling ...

• What's New on Thinfinity Remote Workspace 8

  Introduction Welcome to our comprehensive guide to the Thinfinity® Workspace 8. This article will introduce you to the product's groundbreaking features, new connection protocols, and enhanced user experience. Thinfinity Workspace 8 is the epitome of ...

• New Theme customization API in Thinfinity® Workspace

  Product: Thinfinity Workspace Version: 7 and later Introduction The new theme customization API in Thinfinity Workspace version 7 allows users to personalize the visual style of the entire interface with options such as Light, Dark and Blue themes, ...

• How to Create Your First RDP Connection Using Thinfinity as a Jump Server

  Introduction Welcome to this comprehensive guide designed to facilitate the setup of your initial RDP connection using Thinfinity® Workspace. Within this guide, we'll provide a detailed walkthrough on configuring Thinfinity Workspace as a jump ...

• How to Create a New Thinfinity VNC Connection Using the Web Manager

  Product: Thinfinity Workspace Version: 7 and above Thinfinity VNC or ThinVNC is a proprietary screen-sharing protocol offering faster and more secure remote access than traditional VNC solutions. Optimized for web-based access, it allows users to ...