Audio player that plays throughout the site - javascript

I am trying to implement a feature on our wordpress site. Since the site is wordpress, we do have access to the plugins but our site is actually pretty custom and as a developer I do feel comfortable implementing code.
The feature we are trying to implement is similar to these sites:
http://www.premiumbeat.com/royalty_free_music/most_popular
http://99percentinvisible.org/
The audio player continues to play even as you navigate the site. Queuing is not as important to us but the ability to play while navigating the site would be great. I do realize we can have a popup player but we like the idea of on that is sticky to the bottom of the page. Anyway to do this?

The site that you are using as an example happens to be a single-page application. Unfortunately, you'll have to implement your entire site as a SPA if you want to keep the radio playing seamlessly between page loads. Using a traditional site structure means that the music will inevitably stop playing between page loads.
You can store the state of the player in localStorage and continue playing where you left off, but that's as close to seamless as you can get without making the site a SPA.
Edit: alternatively, you can have the page open up a new tab that plays your music and responds to ajax calls from your main page. That might be a problem if the user disables popups on your site.

Related

How to play background music in JavaScript without user interaction? [duplicate]

This question already has answers here:
Playing sound from INACTIVE browser tab
(2 answers)
Closed 12 months ago.
I have a site where the user can log in and can start and get calls. The login is automatic after the first time, so they can get to the contacts page without interacting with the site other than opening it. It's a site that automatically starts on the computers of the customers, just so they can receive or start calls, hence they might not even interact with the site.
When they receive a call, a background music starts, like this:
var audio = new Audio('ringtone.mp3');
audio.play();
Of course it does not work unless the customer pressed at least a button or hovered over something on the site, or anything like that. I am wondering if it's possible to start background music without user interaction? I understand it is no longer possible because people do not want annoying ads to play, but I'm wondering if there is a still working solution. Or can I somehow ask for their permission like for notifications? I would ask for it once during the first login, then it would get saved.
Edit:
It is not an SPA. Also my problem is not that it does not play sound when the tab is inactive. The problem is that there's a restriction on sounds which prevents JavaScript from playing sounds unless the user did anything on the site, interacted with it (hovering over a button, clicking a button, or anything). The user does not necessarily interact with the site because it starts up automatically, hence the problem when there's an incoming call.
Not sure if the OP's website is a SPA, if your using React, and using something like React-Router etc, this is a SPA (Single Page Application).
Playing Audio automatically in a normal browser window without some form of user action is blocked by most browsers. (sound policy).
Now the reason I asked the OP if his website was a SPA, these work well as Web App's, and Web Apps have a slightly different sound policy. aka, been able to play audio without user interaction.
So how do you make your website into a Web App,..
Easy, you tell the browser :)
For example in Chrome, under more tools, there is an option that says create shortcut.., this does more than just create a shortcut, it also puts your website in Web App mode.
This also works for mobile's too, eg. on Android there is the option Add to home screen,
And yes other browser have this feature too, but Firefox have decided to remove this feature, so it's not a browser I will use, or recommend to my customers anymore. Whats happening with Mozilla, they seem to have been taken over by stubborn dev's. Shame!!
So if the OP website is a SPA, all he has to do is use the create shortcut, and auto start this.
There are other benefits to making into a Web App too, like not having the address bar at the top etc. But again Mozilla have decided that's not what users want or need, thanks Moz, bye bye now..
What if's not SPA?.. ps, SPA just means there is no normal navigation / page loading. (might not have been obvious from my previous explanation).
Ok, things get a little bit more tricky. The OP mentions he auto-starts these in the morning, now the only issue here this prevents any user interaction, so obviously the sound policy kicks in.
So another idea, using something like puppeteer you could start the app, place a button on your website, that could play a startup sound, or even a silent mp3. You could then instruct puppeteer to click this button.

How can I add hidden play audio for Rails app using Bootstrap and Heroku

Halo ! app experts!
I like to add my idea to my web-site which is deployed in Heroku using Bootstrap and Rails 4.
I have about 5~6 different pages in app/views folder
My idea is this:
When user comes to the 'landing page' which is views/home/index.html.erb, the user can click on a picture then can start hear the background music for whole web. I mean once the user clicked the picture(in index.html.erb), the user should able to hear the background music whereever the user goes into different pages.
If the user left the web or closed the ex)chrome or safari, and comes back to the my web-app, the background music should't there. The user must go back to the views/home/index.html.erb page and click the picture to start listen the background music agian.
Is it... possible? If so, Can you please guide me or teach me?
Thank you in advance!!
The audio playback can not be continues when a user navigates away from one page to another. To make it constantly play, the page that the audio is playing (home/index.html.erb) must not be navigated away.
This means that you have to load your page content using AJAX. Since, jQuery is already loaded with your Rails app, use its $('#your-main-content').load('/another-page') method to load content to your page.

Static mp3 player for website

I was creating a website for my YouTube channel since I make music for YouTube and etc.
I was wondering how can I add a mp3 player for my website without it stopping on every page reload.
I want the mp3 player to constantly playing no matter how many pages it goes on.
One way I only think this will work is having it on another server side. But the thing is that 1 person isn't going to want to listen to the same music on the website.
I'm able to just broadcast the song on one page but I want users to listen to my music and browse other pages as well.
Can someone please show me how to do this? Thanks :)
There's two ways you can do that:
The correct way would be for you to set up all your site content as AJAX calls, so your MP3 player would be at the top and untouched. It requires programming knowledge and some planning to make all the AJAX calls correctly.
The easy way, although i don't recommend because it's not W3C valid, is to put a frame at the top with your mp3 player, so it won't postback with the rest of the page when you navegate.
load your content into a div/iframe and have the mp3 playing on the main page.
You'd be best off to go with a div loaded content, iframes are going out the way of the dinosaur.
<----- Main Page -----> Music Player here
>----- ContentDiv -----< Load content into the div
<----- Main Page -----> Or Music Player here
or with an html mockup, Content being what you load your pages into, Music Player being on the main page and never being reloaded.
<head></head>
<body id="mainpage">
<div id="musicplayer"></div>
<div id="content">
</div>
</body>
The answer the Mike has suggested would be a very SEO unfriendly method, if thats a concern, but the only way I can think of to have the music completely unbroken. If you don't mind the break in music between page loads, then you would need to capture the current play length of the track and then pass that in either a cookie or as a parameter in the url which would require you to montior the user behavior and have a js function bound to all naviagtion links monitoring that.

How to keep audio playing while navigating through pages?

I am making a website for my friends band. I would like to know if its possible (apart from using Ajax) to keep audio playing after clicking on a link to another page on the site?
I currently have it set up using Ajax to reload the content, but I am having a few issues with it, and I'd rather not deal with the bother unless I really have to.
If not possible, is there a way to minimise the disruption (pausing then playing again) while navigating? It would be possible for the new page to continue playing the track from where the last page stopped, but I would like to minimise the pause. Or, on this subject, is it possible to keep certain page elements loaded after changing the URL (without using # urls), like facebook does (as in, you click on it, but the banner never disappears during loading)
Thanks for any help :)
Use Ajax to load content and History API’s pushState() to alter URL without page reload.
For consistent behavior across browsers, consider using a wrapper library like History.js.
Sites like Facebook use JavaScript/AJAX for these kind of things. If you don't want to use it, you can use frames (not recommended). Divide the page in two frames: the player and the website itself. This way you can easily turn it off too, just open the site without frames.
Good luck!
Of course you could also pop up the player in another window/tab.
(For now) It won't be possible without frames or javascript.
It might be troublesome to implement it differently than via AJAX, however you can either use IFrames, where the music would be played in the main one and the content is displayed in the child on or you can always make it a Flash webpage.
Build it in Wordpress and use the AnythingSlider plugin to have the pages shift within the main page. This way you can have tabbed navigation and never leave the actual page. No need to write too much code. The AnythingSlider uses html for the slides.
You can also not use wordpress and just use the AnythingSlider code.
http://css-tricks.com/anythingslider-jquery-plugin/
and
http://wordpress.org/extend/plugins/anythingslider-for-wordpress/
and
http://css-tricks.com/examples/AnythingSlider/

playing audio on a web page without interruption by page reload

I want to create a web page that contains an (Flex/Flash) audio player that doesnt get reloaded when the page reloads. Currently, i am popping out the player in a new window. Please check http://www.paadal.com to see it in action.
What i want to achieve is to have the player in the same window, but it shouldnt reload. I am sure many of you will say use AJAX to prevent reloading of page like songza.fm. But the problem is search engines cannot index AJAX applications. This is true for a full fledged Flex app as well.
Is there any way to have the player in the same window? but not reload.
Thanks
Just add Ajax to existing page hierarchy, change each link to ajax call after page load (with javascript) and only reload content of some container. If you do it that way, search engines (and users without JS, with mobile phones for example) can access your page, and users with JS enabled can get bonus as music player
No, you cannot have a single element exempt from a page-reload, not without loading portions of the page via asynchronous calls to the server. When a window refreshes, it flushes the DOM out, including your mp3 player.
saying "searching engines cannot index AJAX apps" is totally dependent on how the application is written, there are plenty of ways to write an application that is still spider-able and plenty of other techniques for indexing (like www.sitemaps.org implimented by most major search vendors)
You can not maintain anything in a browsers memory after leaving the page (which is implied by a page reload)
For your use, it sounds like using old HTML frames/framesets could easily solve your issue, with a hidden frame containing your audio and the rest of your site in the main frame window.
It depends on the design of your website. You can us a standard html background sound, embedded media player or flash player on your main web page. The others pages will have to be used as a single pop up layered into each other. this will cause your music from the main page to play and allow you to navigate throughout your website because you linked the popup pages. To return to the main page use a close window script .

Categories