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.
Related
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.
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.
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 .
I am currently coding a website for a band and i have a music player located within a frame in the website. I would like to make the music player pop out from within the page when i click on a button.
I was wondering if there was some sort of javascript/jquery code i can employ for this function. If not, what other work-around can i use to achieve this.
If possible, as part of the function, i would like the frame to close from the window after it has popped out, and the other frame to load up as a complete website.
If you must... ;)
http://javascript.internet.com/generators/popup-window.html
You can call javascript window.open() function from your flash music player with ExternalInterface.call() (and make sure you've set allowScriptAccess=samedomain as flash param in html for it to work).
Then open your music player swf in a popup with some additional parameter attached, so you know that it lives in popup window.
To make the popup version continue playing where framed one was at, you can use a LocalConnection call. The framed version would listen for LocalConnection, and expose its current play state (what is playing, at what second etc) and popped up version could ask for this and continue exactly from the same place. This will make the popping up experience much smoother for end user.
Finally the framed player can call additional javascript functions via ExternalInterface.call() to remove itself from framed document's DOM.
I have lots of mp3s on my site that I want my friends to be able to play only- but I don't want them all downloading as soon as the page opens and would prefer them to only start downloading into the buffer if someone wants to play it- is this possible with the embed tag? I can't seem to find anything on Google so I am wondering if it's something I'll have to do in JavaScript or think of an HTML work around.
cheers
You can use javascript to construct the embeds and insert them into the DOM when a user clicks a button or something similar.
You will want to use the Object tag vs. the Embed tag for one, but that said, don't set the auto-play option and they won't load until requested.
If you want a really simple fix - don't embed the music files just have links to them. Then a user won't have the file download until they click on them (this is what blog.stackoverflow.com does for the podcasts...).
If you have time on your hands you can go for my solution... I created a separate html page for each song and used the embed tag on each. Then I just created links to the pages to open in a new window. I know... hack! But it works well, and the other related links go along with it in the new window for each song.
You could always try out Yahoo Media Player,
You just make link to the mp3s and they can play them at their own pace.
I have seen this used for PodCasts, and Playlists of Mp3s its very handy and free.
http://mediaplayer.yahoo.com/
First link
Second link
Third link
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Simple :)
You can even add album art and manipulate the order the mp3s are added to the playlist thru simple html.
http://yahoomediaplayer.wikia.com/wiki/How_to_link