the script itself works, but unfortunately only if it is in the same browser. if i have opened the page overlay.html on another device or browser i do not receive any event from the index page. as soon as i have opened overlay.html in the same browser but another tab it works
this is my script so far.
i would be very happy if someone could help me with my problem
<!-- /index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TTS-Application Test</title>
</head>
<body>
<form id="dataForm">
<label for="textInput">Text:</label>
<input type="text" id="textInput" name="textValue" />
<button type="button" onclick="sendPing(document.getElementById('textInput').value)">
Send to overlay
</button>
</form>
<br />
<button type="button" onclick="window.location.href='overlay.html'">
Go to overlay.html
</button>
<div id="result"></div>
<script>
const channel = new BroadcastChannel("my_channel");
function sendPing(audioSource) {
console.log("Envoi du ping depuis index.html");
channel.postMessage({ type: "ping", data: audioSource });
}
</script>
</body>
</html>
<!-- overlay.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Browser Overlay</title>
<style>
#randomText {
display: none;
}
</style>
</head>
<div class="response"></div>
<body>
<audio class="tts-audio" id="tts-audio"></audio>
<div id="audioPlaceholder"></div>
<script>
const channel = new BroadcastChannel('my_channel');
channel.onmessage = (event) => {
console.log("Content of the input in index.html : " + event.data.data);
};
</script>
</body>
</html>