I am creating a website that alerts when certain events happen with an audible alert. Since the arrival of chrome 66 it is not possible to play audio without the user making a gesture. For me this is a big problem, I was searching but I did not find any solid solution.
For example Youtube. When entering a link in the browser, the video starts automatically, without any user gesture. How do they do it?
It also occurred to me to ask for permission for the browser to allow automatic audio playback. Something like: "Notification.requestPermission ()". But I couldn't find how
When you navigate to a YouTube video link within YouTube itself, it doesn't actually navigate to a new page. YouTube uses a library called Structured Page Fragments (SPF) to render only relevant parts that need to be changed. Because of this, the browser doesn't consider this as a newly navigated page, and allows YouTube to automatically play videos with audio.
For example, from the Homepage, when you click a video in the Subscription box, this counts as a user interaction. The page then loads the fragments required to watch the video using SPF and - because the user is in the same navigation context as far as the browser is concerned - plays the video automatically with audio.
However, if you load the same video in a new navigation context (such as using a link from an external site, or opening it directly in a new tab) users will still need to interact with the page - in this case by clicking the video - to get audio. Once this is done, because the user has now interacted with the page and other videos are dynamically loaded using SPF, further interaction is not required for other videos to play automatically with audio in that navigation context.
Note that you don't need to specifically use SPF to achieve this effect. You can use libraries such as Angular and Vue to change views with a click event, and these should still count as the user having interacted with the page.
Related
Is this even possible? To have an mp3 play where it left off when you navigate to a different page on the same website? I seriously don't even know where to begin. Kind of new to HTML, CSS, etc.
Any Ideas? Thanks.
Not across multiple page loads. But you can have a single page which plays audio and provides navigation therein for the user. A couple overarching structural options would include:
Create a Single Page Application (SPA). Here your one "page" would play the audio, and the site navigation would happen within this single page instance with JavaScript/AJAX. The browser would only ever load one "page", but the overall application would dynamically load/unload as elements of that page as you see fit.
(A very old method, but still works) Create a parent page with frames for navigation. The parent (frame) page would contain the audio, and the rest of the navigation through the application would be done in frames within that page.
I'd recommend the first approach, but either would work.
If you reload the entire page (and therefore the audio source), there is no way to provide a seamless playback. There will always be a very noticeable gap due to page load times, even if you try to keep track of the position within the audio track. Slow internet connections will make it worse.
Instead, you can embrace one of those four options:
Single Page App:
As also pointed out by David, my suggestion would be to create a single page application, i.e. a page that loads once, then loads/replaces all additional content dynamically. One the user clicks a navigation link, instead of loading a new page (or reloading the current page), you just replace the main content, using AJAX. The part that provides the audio stays in place.
Additional tab/popup/window
You could create an additional tab, popup window or window just for the sake of playing the audio. One example of this is the German radio station "radioeins". At the time of writing, their website provides an orange button in the top right that will open a popup window for their live stream, allowing the user to continue browsing their website with the music continuing to play uninterruptedly from the popup. I would only go down this route if the single page app is not an option, as popups or additional tabs are bad UX and popups might be blocked by browsers.
iframe
You could provide the main content of your page within an iframe, or the other way round, provide the audio from within an iframe. I would recommend against this, as there are several disadvantages to this approach.
Frames
Frames would provide a similar approach to iframes, but they are deprecated, so I strongly recommend against this one as well.
tl;dr
Make it a single page application if you can, otherwise resort to a popup-solution.
I have an Oracle Apex application running on a Android device, which some specific sounds need to be played on multiples pages when a button is clicked, e.g. A notification..
The way I did it is, create the audio object on the header of the page,
var audio = new Audio('/path/Alert.mp3');
And trigger the play event when a button is clicked,
$('#btn_alert').click(function(){
audio.play();
})
This doesn't work as expected for 2 reasons,
When the button gets clicked for the first time, there always a delay before the sound gets played, seems like the page is loading the file or somehow. And from the second time onwards, the sound gets played immediately (looks like its been cached). How do I preload the audio file on a mobile device?
Is there anyway to define the audio object in global scope, so I don't have to repeat the same code on every page?
Thanks a lot
If you add and item to a Global Page - a specific type of page - it will be available on all pages in the APEX application. More here, and in the docs.
WRT to the audio, this may help. Also you might try a dynamic action on page load to load the file.
i want to create a script page using PHP or Javascript to:
multiple control for all users.
exemple:
- a page with an audio sound Player,
for exemple 3 users conntected to this script page
when some one of thos users click on Start playing, it will play for all users, and when an other click on Stop it will stop playing for all user.
= all users have the same controle permission.
is some one have an idea to create this with a flexible languague please, it's very important.
I take you already have loaded the video/audio and the page is hosted and ready and you are only looking into controlling it by multiple users.
One way is to listen to the events or change in status of the play/pause/stop properties of the player. If you are familiar with Firebase (realtime database), you want to create a document with play, pause and stop <==> Player propeties. When the user clicks on any one of the button on the player save it to Firebase against its property.
For every change to the document Firebase will automatically propagate it to all connected users. And on the page you can call the play(),pause(),stop() functions of the player based on the switch status. Hope this helps to get you started. Obviously there will be other ways. This is just one of it.
Functions for html player
Firebase for web with Javascript
Situation: I have a page that shows a stream of posts (news) submitted by our members. I have a setInterval() in this page that causes it to refresh every x seconds - if user is idle for x seconds.
Recently I have added video posts where user can click on an item and video would begin to play immediately in the page (so far I'm only using youtube iframes).
The problem: my auto refresh sometimes refreshes the news content while user is watching a video and being "idle"... which causes video to close and content to reset...etc. Meaning, user will loose his/her position in the video and have to start over.
My question: how do I detect if this page has at least one video that is currently "playing"? I'd like to use this to decide if auto refresh should occur or not.
Note: I'm not currently in favor of using the custom player or google/youtube js api because soon I will be adding support for videos from other services such as vimeo, 56.com...etc.
Question rephrased: is there a "universal" javascript or jquery method to detect if a video is currently playing in the document or window?
Thank you!
I need a video to automatically pop up, ideally in a lightbox. It needs to automatically pop up when a user first visits the page, play the video then close. I also need a button to play again if needed. I also only want this video to play the first time a person visits the homepage, so when you navigate back to the homepage it will not play again.
Diodeus has a good point. The stack overflow community is to help specific questions, not to write programs for each other.
You have a number of needs, and I will try to help you sort them out:
Embedded Video
Lightbox
Automatic Popup
Stored State
Embedding videos can be a challenge. Quickly searching TheGoogle (embed a video) gives me this link:
http://www.hunlock.com/blogs/Everything_You_Ever_Needed_To_Know_About_Video_Embedding
I did not read it, but the point is you can find many resources for video embedding.
Lightbox
There are many lightbox scripts ( http://www.lokeshdhakar.com/projects/lightbox2/ ), you will have to slog through them to find one that you like.
Automatic Popup
If you're using jQuery I would suggest the jQuery.ready function.
Stored State
To see if a user has visited the homepage before, I would suggest setting a cookie. http://www.quirksmode.org/js/cookies.html