Adding Sound to HTML5 Canvas not working while exporting to video

Question

Brief Description:: We are creating HTML5 canvas with some text on it. But when we export that canvas to video by right click and save video as, then video is created successfully but it is without sound.

Here is our code:

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

var video = document.querySelector("video");

var colors = ["pink","brown"];
function draw (){
    ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
  ctx.fillRect(0, 0, canvas.width, canvas.height);
 
}
draw();
    var audio = new Audio("https://sapphireprofits.com/liveliness/1636612975562.mp3");
     audio.play();

var videoStream = canvas.captureStream(30);
var mediaRecorder = new MediaRecorder(videoStream);

var chunks = [];
mediaRecorder.ondataavailable = function(e) {
  chunks.push(e.data);
};

mediaRecorder.onstop = function(e) {
  var blob = new Blob(chunks, { 'type' : 'video/mp4' });
  chunks = [];
  var videoURL = URL.createObjectURL(blob);
  video.src = videoURL;
};
mediaRecorder.ondataavailable = function(e) {
  chunks.push(e.data);
};

mediaRecorder.start();
setInterval(draw, 300);
setTimeout(function (){ mediaRecorder.stop(); }, 5000);

<canvas width="300" height="300"></canvas>
<video autoplay controls></video>

Here is the Jsfiddle link

You will listen the audio but in the below generated videostream media recorder, when you play , audio is not audible