I'm working on an angular app which basically shown on tv. When there is any notification sent from server, i want to show the notification and read out loud the notification. I am able to show notification and for reading the notification I'm using SpeechSynthesis API sometimes it is working and sometimes it gives me not-allowed error. After doing some browsing I got to know that these are browser restriction policy and we cant bypass. Then I found an article which told to use AudioContext API, but initially it should have some user interaction.
I've also tried using navigator.mediadevices.getusermedia({audio:true})
var constraints = { audio: true } // add video constraints if required
navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => {
const audioContext = new (window.AudioContext)();
const objectURL = URL.createObjectURL(audioBlob);
const bufferSource = audioContext.createBufferSource();
fetch(objectURL)
.then(response => response.arrayBuffer())
.then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
.then(decodedData => {
// Assign the decoded audio data to the buffer source node
bufferSource.buffer = decodedData;
// Connect the buffer source to the AudioContext's destination (speakers)
bufferSource.connect(audioContext.destination);
// Start playback
bufferSource.start(0);
audioContext.resume();
})
.catch(error => {
console.error('Error loading or playing audio:', error);
});
})
The above code snippet works in some browser in TV after allowing the permission, but not in all.
Can anyone suggest any approach on how to achieve this.
Note: As this app runs in TV, there wont be any user interactions happening.
Ref: https://developer.chrome.com/blog/autoplay/#iframe-delegation
Thank you, Looking forward.