Join an active Twilio Voice conference call from browser as Supervisor (Muted) and Coach (Whisper to agent)

I have implemented Twilio Conference call using Twilio JavaScript SDK and PHP. So far, the functionality that is working is:

1. Agent can make an outgoing call from browser to a mobile phone
2. Agent can receive an incoming call on browser from another phone

<?php
require_once './vendor/autoload.php';
use Twilio\TwiML\VoiceResponse;
use Twilio\Rest\Client;

$response = new VoiceResponse();
$dial = $response->dial('');
$dial->conference('first-conference-room',
    ['startConferenceOnEnter' => 'true', 'endConferenceOnExit' => 'true']);

$sid = getenv("TWILIO_ACCOUNT_SID");
$token = getenv("TWILIO_AUTH_TOKEN");
$twilio = new Client($sid, $token);

$twilio->conferences("first-conference-room")
                      ->participants
                      ->create($fromnumber,
                               $tonumber,[
                       "statusCallbackEvent" => ["ringing","initiated","answered","completed"],
                       "statusCallback" => "link-to-php-function-to-write-call-record-to-database",
                       "statusCallbackMethod" => "POST"
                          ]);
return $response;
?>

Now, as a supervisor, once a conference call is established between the agent (using browser) and another phone number, I fetch and show the ongoing call's record with a button to join as a supervisor.

Any suggestion on what can be done so 3rd person can join the conference as supervisor or coach?

A separate question - Is a Twilio conference between three people (numbers) charged as two Twilio voice calls or one Twilio voice call with third person joining the conference for a smaller fee?

Your supervisor is also in a browser, so when you click the join button, I assume you are making a call with the Twilio Voice SDK and your TwiML App directs the webhook to your endpoint that runs the second block of code from your question.

When you want to coach a call, you actually want more than just muting. You want to be able to listen to the call, talk to the agent without the person on the other end hearing, or barge in and talk to both people in the conference. To do this you need to use the coach attribute of the <Conference> TwiML.

To use coach you need to get the SID of the agent's call leg. If the agent is placing the outbound call from the browser, then their SID will be the CallSid parameter that is sent to your webhook URL. If they are receiving the call, then their call SID is returned from the API call to create a participant in the conference.

Once you have the SID, in the webhook response for your agent you need to dial into the conference and add the coach attribute with the value of the agent's call SID.

$response = new VoiceResponse();
        $dial = $response->dial('');
        $dial->conference('first-conference-room', ['coach' => $agentCallSid ]);
        echo $response;

A separate question - Is a Twilio conference between three people (numbers) charged as two Twilio voice calls or one Twilio voice call with third person joining the conference for a smaller fee?

Twilio charges per leg of call. Each connection between Twilio and a caller is a leg. So in this case, three people in a conference are three legs and are charged the conference rate per minute each.