I want to use the HTMLMediaElement.play() method to play a sound when a button is clicked. Everything working fine in Chrome and Firefox, but Safari 15... Every time I click the button there is some kind of delay or it is not even played. I used the code as described below:
const mainButton = document.getElementById('main-button');
const buttonSound = new Audio (button-sound.mp3);
mainButton.addEventListener('click', e => {
buttonSound.play();
});
It would be great if someone could help!
I have not tried it yet, but this seems like a viable solution: https://browserhow.com/how-to-allow-or-block-auto-play-sound-access-in-safari-mac/ it sounds like it is disabled by default in the browser so if you enable it, it should then play. If it is delayed, does the sound file start from 0 seconds? I know that sounds obvious but that could be a reason for the delay.
This can be changed I believe by going into the safari settings specifically the article indicates to do this as follows:
Launch the Safari app on a mac computer.
Select Safari from the menubar options.
Choose Preferences… option under the Safari menu.
Switch to the Websites tab within the Preferences popup window.
Choose the Auto-Play in the sidebar.
At the bottom of the drop-down — When visiting other websites select
Allow All Auto-Play.
Related
Question:
How to listen to MediaPlayPause keyboard event in unfocused tab.
Background:
I recently noticed that Youtube is able to Play/Pause the video when I press the Play/Pause Media button on the keyboard, even when the browser tab/window is not in focus.
This seems to only work in Chrome (I've tested in Chrome 74 on Windows 10), so there must be some Chrome-specific API method they're using to make it work, since keyboard events generally can't be accessed when the tab isn't in focus.
I'd like to achieve a similar functionality in a web-app, but can't figure out how. Therefore I ask of the greater collective if anyone knows how this is achieved?
I am working on a weather visualization project using Mapbox (3 panes are locked together and one is for navigation, it's hard to explain until you see the link.)
Before I continue, I will post a link to the web app I am discussing here, so you can see it. My code is a MESS, and I am aware of that, but I believe this is a browser issue.
http://ability.a2hosted.com/main.html
In Edge and Firefox, the fullscreen and navigation buttons work fine. In Chrome, they do not work... the fullscreen button gets the browser stuck until you press escape (and doesn't render properly anyway!). And, in fact, chrome does not even display the navigation button at all.
Is there a way to get these buttons to show up and function as they do in firefox and edge? Or, maybe an alternate button? I am attaching a screenshot of how the page should look.
I should note, I can live without the fullscreen buttons, but I need the navigation button option to be working in chrome. This really is a must for my project, so even if there's another link or button I could place over it to activate it somehow, it's fine as long as it works. I am not good enough with JS to understand what may be causing this issue after 2 hours of research.
From https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol:
Not all browsers support geolocation, and some users may disable the feature. Geolocation support for modern browsers including Chrome requires sites to be served over HTTPS. If geolocation support is not available, the GeolocateControl will not be visible.
I have created a Web App which plays music playlist and it works well on desktop browsers and also in mozilla and opera of android. But When I play the songs on Chrome browser of Android and I turn off the screen, it stops after playing the current song. And as soon as I turn the screen on, it starts loading the next song in line.
From my observations, what I have understood is Google Chrome browser on android pauses the javascript code from executing if the screen is turned off till the screen is not waken up again. Is there any way I can prevent my specific library from pausing? Any approach or events?
Some related this question is what I am looking for: JavaScript halts in inactive android Chrome tab
There are so many WebApps which does not stop playing music. Does it need some permissions from Google App Store?
check what happens with youtube, at least few years ago i had an awful time dealing with that and that's what proved to my client it cant be done in the given time frame and budget. that was actually device specific, on some devices it worked fine and on others it didnt. check if it happens on other devices. the only solutions i could think of ware either to prevent screen turn off (on problematic devices or all of them at the beginning), or to build an app and handle onPause event
I don't think that you can change the behaviour of the Chrome app, if they want to save battery in the background and stop the javascript, you won't reactivate it.
There are maybe some other ways to get it working.
Tell your users that they should use Firefox or Opera on their mobile device.
All apps are allowed to play or stream music in the background, so you could make or use an app for your task.
Maybe you can use the default music player app on android. Open a playlist of streams using the app. (I don't know if this is possible, because I have no android device.)
I know that is not exactly what you want, but a maybe a way to get it working.
I'm currently implementing HowlerJS and I got it working. But the following happens on Safari using El Capitan:
Open Safari and enter HowlerJS and click play, and it starts loading.
For several of the machines it never plays
Refresh page, click play, it works.
Close open Safari, happens again.
And it is also happening on iOS. Now I've seen that you need to wait for a user click to play audio, which is what I'm doing.
On click of the button it loads and plays the audio. Has anyone faced this problem? I'm using the stable version 1.1.28.
Safari 9 has started to suspend audio on initial page load. In addition to all the other song and dance you usually have to do, now we have to instruct the AudioContext to resume and defer our business logic until that promise resolves. You'll probably want this check just inside a click handler.
if(Howler.ctx && Howler.ctx.state && Howler.ctx.state == "suspended") {
Howler.ctx.resume().then(function() {
console.log("AudioContext resumed!");
// fire your callback here
});
}
Howler 2.0 has supposedly already fixed this, but no such luck as of 1.1.28 for us stable users >_>
For a friend I'm creating a narrowcasting (well, not really, just to one screen) page which reads content from his webshop and shows a slideshow with highlighted items, together with his logo and the time.
To run this I'm using an Android 4.1 device with a screen, I've installed Chrome onto the device which works properly. Everything is going pretty good so far, there's just one thing that annoys me. As we speak I'm using the Fullscreen API to go fullscreen as soon as the user presses the enter key. But due to changing content I want to do a refresh once in a while to fetch new content.
Here's where the problem lies: once the page refreshes it leaves fullscreen mode. I have been looking for settings in Chrome Android to allow fullscreen mode without a mouseclick or keydown event but haven't succeeded so far. Is there any way I can get the result I want (going fullscreen without a click of keydown)?
The reason I'm using Chrome Android is because this browser gave the best HTML5 support (for future use) and the best resolution (1280x720). But it's lacking a fullscreen mode I can use from within the browser. I tried Firefox for Android with a fullscreen plugin, that worked perfectly (not leaving fullscreen when refreshing), but Firefox only gave me a 960x520 viewport which is pretty small.
There's just one thing that comes up in my mind for now, which is doing an AJAX request to fetch the new content and replace the pages HTML with the fetched HTML (or perhaps just the 'slides' container).
Thanks for thinking along!
This code will do the same thing as refreshing the page automatically. I'm not sure if it'll prevent you from exiting fullscreen because I don't have a working copy to mess around with.
$.ajax() //Get the current page
.done(function(msg) {
document.documentElement.innerHTML = msg;
});
I don't recommend doing somthing like this, however. Your best bet is to abstract the part of the page that needs to be updated to it's own page, ie:
$.ajax("http://example.com/get_next_element")
.done(function(msg) {
$("selector_for_fullscreen_element").html(msg);
});