Spotify Play Button: handle play/stop programmatically - javascript

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/

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

Pause youtube and vimeo programatically and detect if a video is playing

I have a slider which allows video embeds ( currently by pasting in iframe code from youtube/vimeo etc). The problem I have is that the video needs to pause the slider when the user clicks the video play button and also pause the video when the slider moves to the next frame.
It seems that I will need to use the vimeo and youtube API's to get access to the information and control I want. I have looked through the API's and I think I can probably get this happening; however my problem is that from what I've seen so far the youtube API tends to work off the video ID, whereas the Vimeo API seems to work with iFrames, but I need to have a consistent input for end users in that I want to say "Paste the video ID here" OR "Paste the Iframe here" OR "Paste the video URL here" ... I don't want to have to ask them for an ID from youtube for one video and an Iframe from Vimeo for the next one.
I know how to manipulate the data to make the two consistent but I'd rather avoid that if at all possible. What is the best approach to get programatic access to Youtube and vimeo so that I can achieve access to play and pause and know whether a video is playing or not.
there is a small widget on https://github.com/dachcom-digital/jquery-video with which you can archive the things you're asking for.
You can ask the user for the video ID and render some HTML container. Then you apply the widget and can pause, play, etc. the videos with one consistent API.
Hope this helps.

Automatic Javascript Video Pop-Up

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

Categories

Resources