How can I play ring on twilio flex UI agent side when incoming calls comes in?

Question

I am looking for play sounds whenever any new calls comes in using this

Answer 1

Twilio docs at https://www.twilio.com/docs/flex/developer/ui/sound-and-audio were unclear so I pulled from https://support.twilio.com/hc/en-us/articles/360010784433-How-Do-You-Make-the-Browser-Ring-When-a-Flex-Call-Comes-In- . Here's a barebones Flex UI Plugin:

import { FlexPlugin } from "flex-plugin";
export default class MyPlugin extends FlexPlugin {
  constructor() {
    super("MyPlugin");
  }
  init(flex, manager) {
    const alertSound = new Audio(
      "https://public-path-to-your-audio.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();
          });
        });
      }
    );
  }
}