Oracle APEX preload audio files - javascript

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.

Related

Is there a way to allow automatic audio playback (alarm website)

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.

Audio continuously playing across all pages?

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.

Multiple users control

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

Google Chrome Extension - Execute audio player page on background

I need to execute a page that contains an audio player when I click the extension I'm building. But when I click outside of it, the player stops. I need to keep it running.
I tried to use the "background" attribute on the manifest file, but I think it only works with javascript files.
Any sugestions?
You should use a background page or an event page (according to a permanent or temporary need).
http://developer.chrome.com/extensions/background_pages.html
You just have to provide a page attribute to the background property. As mentioned in the above page.

Reloading a page inside a div, or rechecking a js file without rel

A bit of background first. I have made a player based on soundManager2, in the HTML file of the player there is a link to the soundManager2 js file, a js file which creates my interface, and a php file which generates js code to create the playlist.
The reason the playlist is in an external file is so while the music is playing a user can add tracks to it. Then on the final track the player will reload itself using window.location.reload(); in order to recheck the external playlist to see if any tracks have been added, if they have it continues on and plays those, if not it loops back to the beginning.
I just tried to embed the music player into the web page it has been created for using the jQuery below:
$("body").ready(function(){
$("div").load("music_player.html", function() {
button_up();//Loads the first track of the playlist
});
});
As you may have guessed my problem is that window.location.reload(); reloads the whole page and not just the player in the div. So what I need to know is, is there a way to just reload the content of the div which I can call from the music players js file. Alternatively, is there a way to tell the music player to recheck the playlist file each time a track is finished (soundManager allows you to call functions at the end of a sound), and this would probably be the better solution.
Yes just use AJAX, and all your problems with the full page reload will disappear.

Categories

Resources