The best option for making the browser ring when an incoming Flex call arrives is to listen for the reservationCreated event, and then play back audio. Here's an example of what plugin code for this might look like:

let alertSound = new Audio("https://mysite.com/sounds/alert.mp3");
alertSound.loop = true;

const resStatus = ["accepted","canceled","rejected","rescinded","timeout"];

manager.workerClient.on("reservationCreated", function(reservation) {
  if (
     reservation.task.taskChannelUniqueName === "voice" &&
     reservation.task.attributes.direction === "inbound"
  ) {
    alertSound.play();
  }
  resStatus.forEach((e) => {
    reservation.on(e, () => {
      alertSound.pause()
    });
  });
});

This code will play a repeated audio file (alert.mp3 in this example), until the task is accepted by the worker in Flex, and the call is answered.

To make this code work, you'll only need to update the audio file URL in line 1, and then add your code to the the init() function of your plugin. For help adding this code to your hosted Flex instance, please see Creating Plugins for Twilio Flex.

Notice: The audio file must be accessible by Twilio's proxy servers. Local files on your desktop are likely unaccessible via these methods, but your audio file may be uploaded to Twilio Assets for use here.

How Does the Browser Know Which Audio Device to Ring?

The MediaDevices interface allows you to request a list of available audio output devices with enumerateDevices():

navigator.mediaDevices.enumerateDevices();

Once you identify the desired device ID, pass it off with using the HTMLMediaElement.setSinkId() method.

Notice: These methods are officially supported in Chrome 49+ and Edge 17+. Support for additional browsers cannot be guaranteed at this time.