I have a requirement, On Api response updating beep sound should trigger. The solution which I used is worked in Chrome and Firefox browsers but it is not working on Internet Explorer.
if ($scope.totalQueueList) {
var audio = new Audio();
audio.src = 'rest/assets/images/beep.mp3';
audio.oncanplaythrough = (event) => {
var playedPromise = audio.play();
if (playedPromise) {
playedPromise.catch((e) => {
console.log(e)
if (e.name === 'NotAllowedError' || e.name === 'NotSupportedError') {
console.log(e.name);
}
}).then(() => {
});
}
}
}
So anybody please help me out with how it works on Internet explore?
According to https://caniuse.com onplaythrough attribute is not supported in IE.
However, you can instead addEventListener to the element, where the event is playthrough (no ‘on’).
Related
Got bumped with a problem, maybe someone can help me with it.
There is a script that should restart and play a video on an event ( play video.play(); ). On other browsers like Chrome etc. it works, except Safari.
On Safari it just resets the video to 0, but doesn't play it.
Seems like video.play() doesn't work on that browser.
Autoplay and mured are on.
Has anyone had this problem?
Here is the website https://luna-wealth-3b31bac5f1f8e980696881bf9d5.webflow.io/client-online-access
<script>
window.addEventListener('DOMContentLoaded', function () {
const video = document.getElementById("573dfe8f-6592-57e6-c48c-8e93fbdae2e3-video");
const trigger = document.getElementById("trigger");
const observerVideo = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
if (video.currentTime === 0) {
video.muted = true;
video.play();
}
}
}, { threshold: 1 });
const observerTrigger = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
if (video.currentTime !== 0) {
video.currentTime = 0
}
}
}, { threshold: 0 });
observerTrigger.observe(trigger);
observerVideo.observe(video);
})
</script>
The problem was solved this way.
We removed the 100% width parameter from the video and set the container that contains the video to flex justify-center. And the script started playing the video on Safari correctly.
At some resolutions the video stretched beyond its real resolution and Safari did not want to replay it in the event...
Of course it was strange, but it worked =)
I'm trying to play a note using tone.js.
In my browser (on both Safari and Firefox) the note will play, but on IOS (Tested on both Chrome and Safari) it doesn't.
I'm using Tone.start() and only play audio in the then callback as the docs state that you should.
startButton.addEventListener('click', _ => {
box.style.display = 'none';
stopButton.style.display = 'block';
Tone.start().then(() => {
intervalId = setInterval(() => {
const note = getRandomNote();
synth.triggerAttackRelease(note + "4", "4n");
}, 2000)
})
})
Why might this happen?
So I had my phone on silent.... that was the issue.
I create websocket server in python to handle notification event. Now, i can receive notification, the problem is i can't play sound because new autoplay policy changed, if i play sound using javascript it give me domexception. Any suggestion please ?
As i know, playing sound is simple in html-javascript. like this example: https://stackoverflow.com/a/18628124/7514010
but it depend to your browsers and how you load and play, so issues is:
Some of browsers wait till user click something, then let you play it (Find a way for it)
In some case browsers never let you play till the address use SSL (means the HTTPS behind your url)
The loading be late so the playing be late / or even not start.
So i usually do this:
HTML
<audio id="notifysound" src="notify.mp3" autobuffer preload="auto" style="visibility:hidden;width:0px;height:0px;z-index:-1;"></audio>
JAVASCRIPT (Generally)
var theSound = document.getElementById("notifysound");
theSound.play();
And the most safe if i want sure it be played when i notify is :
JAVASCRIPT (In your case)
function notifyme(theTitle,theBody) {
theTitle=theTitle || 'Title';
theBody=theBody || "Hi. \nIt is notification!";
var theSound = document.getElementById("notifysound");
if ("Notification" in window && Notification) {
if (window.Notification.permission !== "granted") {
window.Notification.requestPermission().then((result) => {
if (result != 'denied') {
return notifyme(theTitle,theBody);
} else {
theSound.play();
}
});
} else {
theSound.play();
try {
var notification = new Notification(theTitle, {
icon: 'icon.png',
body: theBody
});
notification.onclick = function () {
window.focus();
};
}
catch(err) {
return;
}
}
} else {
theSound.play();
}
}
(and just hope it be played. because even possible to volume or some customization make it failed.)
to bypass new autoplay policy :
create a button that can play the sound, hide it and trigger the sound with :
var event = new Event('click');
playBtn.dispatchEvent(event);
EDIT
assuming you have :
let audioData = 'data:audio/wav;base64,..ᴅᴀᴛᴀ...'; // or the src path
you can use this function to trigger whenever you want without appending or create element to the DOM:
function playSound() {
let audioEl = document.createElement('audio');
audioEl.src = audioData;
let audioBtn = document.createElement('button');
audioBtn.addEventListener('click', () => audioEl.play(), false);
let event = new Event('click');
audioBtn.dispatchEvent(event);
}
usage :
just playSound()
EDIT 2
I re test my code and it does'nt work hum ... weird
iam use webrtc for made an video call when i made an call between chrome and chrome work without problem
but when i made call with firefox ... firefox share video to chrome but video from chrome not shown in firefox i think there are problem in attach mediastream for firefox because
the video element src read this
<video id="remoteVideo" autoplay="" src="[object MediaStream]"></video>
and in console of firefox its show this
404 failed to load http://localhost/videocall/[object%20MediaStream].
and this is my code for attach stream to video element
pc.onaddstream = function(event) {
var ts = document.getElementById("remoteVideo");
attachMediaStreamx(ts, event.stream);
};
attachMediaStreamx = function(element, stream) {
if (typeof element.srcObject !== 'undefined') {
element.srcObject = stream;
} else if (typeof element.mozSrcObject !== 'undefined') {
element.mozSrcObject = stream;
} else if (typeof element.src !== 'undefined') {
element.src = URL.createObjectURL(stream);
} else {
console.log('Error attaching stream to element.');
}
};
Just try
pc.onaddstream = function(event) {
remoteVideo.srcObject = event.stream;
};
You should not have src="[object MediaStream]" in your HTML code. Just remove that bit. It is probably interfering with the srcObject.
I use this function for play sound
var soundObject = null;
function PlaySound() {
if (soundObject != null) {
document.body.removeChild(soundObject);
soundObject.removed = true;
soundObject = null;
}
soundObject = document.createElement("embed");
//soundObject.setAttribute("src", "../Sounds/beep-01a1.wav");
soundObject.setAttribute("src", "../Sounds/Small Blink.mp3");
soundObject.setAttribute("hidden", true);
soundObject.setAttribute("autostart", true);
document.body.appendChild(soundObject);
// alert('hii sound');
}
it works fine in all browser instead of Microsoft Edge browser it shows buzzer icon in browser
Any help is appreciable, Thanks.
The Edge browser seemingly ignores the "hidden" attribute. Try this:
soundObject.setAttribute("style", "display:none");