JSSIP + React + Asterisk - No audio in Safari

Question

I have set up an asterisk PBX with a simple dial plan that plays the 'hello world' audio when extension 9000 is dialled.

I have then created a react application using the JSSIP library to make an outbound call to the PBX. On Chrome when I click the call button the call connects to the PBX and the hello world audio is played in the browser.

When I run the same page in safari the call connects, the PBX plays the audio, but the audio is not played in safari.

The browser logs shows no errors.

Why would this be happening?

import { useEffect } from "react";
import JsSIP from "jssip";

function App() {
  var configuration = null;
  var ua = null;

  useEffect(() => {
    JsSIP.debug.enable("JsSIP:*");
  }, []);

  function websocket(ext, usr) {
    console.log("connecting");
    var socket = new JsSIP.WebSocketInterface(
      "wss://pbx.*****.io:8089/ws"
    );
    configuration = {
      sockets: [socket],
      uri: "sip:" + usr + "@35.178.***.***:5060",
      password: "*********",
      realm: "35.178.***.***",
      register: true,
    };
    const ua = new JsSIP.UA(configuration);

    //     Setup events
    ua.on("connected", function () {
      console.log("Connected");
    });
    ua.on("disconnected", function () {
      console.log("Connected");
    });

    //    Make a call

    const eventHandlers = {
      progress: function (e) {
        console.log("call is in progress");
      },
      failed: function (e) {
        console.log(
          "call failed with cause: " + (e.data ? e.data.cause : "no cause"),
          e
        );
      },
      ended: function (e) {
        console.log(
          "call ended with cause: " + (e.data ? e.data.cause : "no cause"),
          e
        );
      },
      confirmed: function (e) {
        console.log("call confirmed");
      },
      addstream: (e) => {
        console.log("Add stream (event handlers)");
        audio.srcObject = e.stream;
        audio.play();
      },
    };

    const options = {
      eventHandlers: eventHandlers,
      mediaConstraints: { audio: true, video: false },
    };

    const audio = new window.Audio();

    ua.on("registered", function () {
      const session = ua.call("9000", options);

      if (session.connection) {
        console.log("Connection is valid");

        session.connection.addEventListener("addstream", (e) => {
          console.log("Add stream");
          audio.srcObject = e.stream;
          audio.play();
        });

        session.on("addstream", function (e) {
          // set remote audio stream (to listen to remote audio)
          // remoteAudio is <audio> element on page
          const remoteAudio = audio;
          remoteAudio.src = window.URL.createObjectURL(e.stream);
          remoteAudio.play();
        });
        session.connection.addEventListener("peerconnection", (e) => {
          console.log("Peer connection");
          audio.srcObject = e.stream;
          audio.play();
        });
      } else {
        console.log("Connection is null");
      }
    });

    ua.on("newMessage", function (e) {
      console.log(e);
    });
    ua.on("newRTCSession", (data) => {
      console.log("New RTC Session");
      const session = data.session;
      session.on("addstream", function (e) {
        // set remote audio stream (to listen to remote audio)
        // remoteAudio is <audio> element on page
        const remoteAudio = audio;
        remoteAudio.src = window.URL.createObjectURL(e.stream);
        remoteAudio.play();
      });
    });

    ua.start();
  }

  function call() {
    const search = window.location.search;
    const params = new URLSearchParams(search);
    const ext = params.get("ext");
    const usr = params.get("usr");
    websocket(ext, usr);
  }

  return (
    <div className="App">
      <button onClick={() => call()}>Call</button>
    </div>
  );
}

export default App;