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
Related
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.
I have several Spotify Play Buttons generated from here https://developer.spotify.com/documentation/widgets/generate/play-button/
Each play button is independent and generated through an iframe, I would like to know if there is a way to programmatically handle the play/stop events. The goal is to prevent to have more than one Play Button can play music at the same time, thus if a user start playback on Play Button 1, I would like to stop playback on all the other Play Button.
Is this possible, considering that the iframe is on the Spotify domain?
Due to the restrictions of same origin policies in browsers, if you embed an iframe on your website/page you do not have access to it since it is from another domain.
The play button inside the iframe does not have any observable events that you can initiate a click on. I did work for 20 minutes trying to initiate a click on the frame, did not work.
I suggest finding a solution elsewhere in the documentation, another method to achieve your goals. I have no idea what other things they offer.
Spotify: https://developer.spotify.com/documentation/web-api/libraries/
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.
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!
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.