[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Page refresh without stop music playing

Posted on 2008-11-09
7
Medium Priority
?
4,613 Views
Last Modified: 2013-11-19
Hello,

I have a question that I know the answer but maybe there might be a solution. I have a website that based on php and ajax system. in our website we have music section that musicians can add their songs. Members can listen these songs via flash music player. But unfortunately php and ajax systems dont offer any solution to continue play songs on page refresh as far as I know. Only flash based websites offer that chance.

So I'm planning to add a member info bar on bottom of page. I thought it can be a frameset and it wont be never refreshed although mainframe refresh. but it's so premitive technic actually. I guess Facebook tried something like that for notifications bar bottom of the page. but their system has completely changed in order to go another page without refresh.

Actually I'm stucked on this and I need usable member info bar (contains music player). Do you know any technics or technology in order to make it.

Thanks
0
Comment
Question by:middleofnowhere
  • 4
  • 3
7 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 22917017
>>But unfortunately php and ajax systems dont offer any solution to continue play songs on page refresh as far as I know
It's not clear if you are referring to refreshing the actual BROWSER (as in clicking the reload button) or the CONTENT in the current window ( as in clicking some link within the content).
If you are referring to refreshing the BROWSER, then you can't keep the music playing. The browser literally "trashes" everything that is currently in the window and starts over after you reload the page. Even if you are using flash. The flash component is "imported" into the document via html markup, but when you reload the page, that html markup is also "destroyed" and once you refresh the page, it will be a "new markup" (from the browser's point of view) and hence everything starts over.

If you are talking about refreshing the only the CONTENT, then you are probably updating the wrong portion of the page. For example if you currently have something like:
<div id="content">
 <p>Our mission is ....</p>
 <!-- object that "imports" your flash/music -->
 <embed...></embed>
 <p>If you need to contact us...</p>
</div>
 
and then make an ajax call so that eventually youupdate the content div:
document.getElementById("content").innerHTML=ajaxObj.responseText;
 
then yes, that would be the problem since you are replacing the original flash/music object with what you got from the ajax call. In the example this happens because you are replacing everything within <div id="content"></div>, which encompasses the flash/music player. Instead what you need to do is to change your markup so that you do not overwrite your player object, like moving it outside the div:
<div id="content">
 <p>Our mission is ....</p>
 <p>If you need to contact us...</p>
</div>
 
<!-- object that "imports" your flash/music -->
 <embed...></embed>
 
OR perhaps by targeting more specific sections:
<div id="content">
 <p id="mission">Our mission is ....</p>
 <!-- object that "imports" your flash/music -->
 <embed...></embed>
 <p>If you need to contact us...</p>
</div>
document.getElementById("mission").innerHTML=ajaxObj.responseText;

Open in new window

0
 

Author Comment

by:middleofnowhere
ID: 22922768
first of all, thank you for your quick respond. So I'm talking about refreshing "browser" as you mentioned. in fact you are definitely right on ajax requests on page. But if I try to change whole links on the system in order to make dynamic loaded content I will have some troubles I guess :

1- Page hits will decrease  ( if page doesnt regular refresh, it doesnt count as far as I know)
2- adress bar cannot change if page do not refresh (there are some possibilites on change adress bar via java or something but I dont know exact solution)
3- there are too many files and links on the system that need to update.

I'm using ajax system partially in different pages. Actually I just need little part of page stay static that only controlling via ajax. in this case it looks the best way popup mp3 player if I need to get rid of this issue.

I thought I can use two framesets in order to having a static area in the page. but framesets are seperated files which have not controls each other via ajax (or am I wrong again?)

In this case it looks there is no sophistiated way except fully ajax controlled navigation.
0
 
LVL 82

Expert Comment

by:hielo
ID: 22923716
>>1- Page hits will decrease  ( if page doesnt regular refresh, it doesnt count as far as I know)
If you are tracking page hits based on your server logs, then ajax or no ajax, the server logs will still reflect the requested page. So if you used ajax your hits wil not be affected. If you are tracking hits based on some embedded script then yes, using ajax would impact your hits because the page is not being reloaded and the script is not being executed every time. You would have to make changes to your scripting to force the scripts to track those hits as well.

>>2- adress bar cannot change if page do not refresh
agree

>>3- there are too many files and links on the system that need to update.
I understand

>>I thought I can use two framesets in order to having a static area in the page.
Yes, you can do that

>>but framesets are seperated files which have not controls each other via ajax (or am I wrong again?)
if the source files are from your domain, you should be able to modify content within your frame from another frame. If the content of your frames are from different domains, then you cannot do that.

NOTE: If you reload the frame where your music is playing OR the whole page, then the player will begin all over again as well.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:middleofnowhere
ID: 22924015
its looking we are so close to the solution. frameset can be solution then. So only information that I need how can I control a frameset via another frame's ajax code. I'm using jquery framework. for example this is a request in order to load content in a div : $('#divname').load('content.php',{variable: value}).
so lets assume that I run this script from MAIN FRAME, and I'd like to load content into #divname that is containing in OTHER frame. is it possible or How would the code line be? (if you dont have enough knowledge about jquery you can just say "yes it is possible" and I will search possible solutions on jquery :)

thank you for your great help.
0
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 22924458
>>"yes it is possible"
again, its possibile if the content is from your site. It sounds like it is. See example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
 "http://www.w3.org/TR/REC-html40/frameset.dtd">
 
<html>
<head>
<title></title>
 
</head>
<frameset rows="20%,*">
	<frame name="alpha" src="alpha.html"></frame>
	<frame name="beta" src="beta.html"></frame>
</frameset>
</html>
 
alpha.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script>
</head>
<body>
<!-- 
basicall the code below says:
upon click load the content of greeting.html in <div id='fetchedContent'></div> which is located in document of beta frame
 -->
<div onclick="$('#fetchedContent', top.beta.document ).load('greeting.html')">Click to retrieve content and change content of beta frame</div>
</body>
</html>
 
beta.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
 "http://www.w3.org/TR/REC-html40/loose.dtd">
 
<html>
<head>
<title></title>
</head>
<body>
<div id="fetchedContent">This is the original content of beta</div>
</body>
</html>
 
greeting.html
<h1>Hello</h1>

Open in new window

0
 

Author Closing Comment

by:middleofnowhere
ID: 31514850
this solution will solve my problem. I'll try this asap. thank you for interest again.
0
 
LVL 82

Expert Comment

by:hielo
ID: 22924916
you are welcome
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Before we dive into the marketing strategies involved with creating an effective homepage, it’s crucial that EE members know what a homepage is. In essence, a homepage is the introductory, or default page, of a website that typically highlights the …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question