Sign in to follow this  
Followers 0
MikeatW3S

How to send html5 <audio> control settings to next page

17 posts in this topic

My website has a number of webpages that each have an audio file that can be played for that page. When someone starts the audio, I want to save the volume and play settings so that the same settings will be used on the next page with the next audio file. If they start the audio on one page, I want to automatically start the audio for the next page with the same volume settings. Is there any ready code available to do this. I'm not really sure how to get started. Do I want to use cookies or session variables? Does that mean I need to go back and forth between php variables and javascript variables? Do both javascript and php use the same convention when accessing HTML DOM objects? Any help would be appreciated. Thanks.

Share this post


Link to post
Share on other sites

PHP doesn't run in the browser, it can't access the DOM of the current page. You could have a Javascript-only solution and store and read those settings in cookies, that won't require any PHP code or server communication.

Share this post


Link to post
Share on other sites

Can cookies store numerical data? Or do they only store information as text strings inside quotes? If I want to store the level of volume that has been set by the user, will I have to do a number to string conversion to store that info in the cookie, and then do a string to number conversion to set the volume property of the audio controls? What would be the javascript statements to do that conversion? As you can see I'm new to javascript. So I would appreciate any help. Thanks.

Edited by MikeatW3S

Share this post


Link to post
Share on other sites

Cookies are in the Javascript tutorial: http://www.w3schools.com/js/js_cookies.asp

 

Cookies only contain strings, but casting from number to string or string to number is easy. Usually it occurs automatically. If you pass a string to a property that expects a number it will be interpreted as a number.

Share this post


Link to post
Share on other sites

So how do you change a cookiename's value? Do you simply write over it? What if it is a string of a different length? Does document.cookie=cookieName + "=" + cookieValue simply replace the previous cookieValue string with a different string even if it has a different length? If there are multiple cookies, does document.cookie go out and find the cookie of interest and change it if it already exists? When you create a function to find the value of a cookie you have to parse every character in the string and then find its value. I'm wondering if you have to do something similar when changing the value of a cookie or if that's handled by the document.cookie function.

Edited by MikeatW3S

Share this post


Link to post
Share on other sites

The tutorial page explains it clear enough:

 

With JavaScript, you can change a cookie the same way as you create it:

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

The old cookie is overwritten.

The length doesn't matter.

 

The cookie tutorial also explains multiple cookies:

 

If you set a new cookie, older cookies are not overwritten. The new cookie is added to document.cookie, so if you read document.cookie again you will get something like:

cookie1=value; cookie2=value;

Setting a cookie, or changing its value, won't interfere with any of the other cookies.

Share this post


Link to post
Share on other sites

Is this a valid cookie setting function? (I found it on the internet and modified it a bit)

 

function setCookie(cookieName, cookieValue, expdays) { var expdate = new Date(); expdate.setDate(expdate.getDate() + expdays) ; document.cookie = cookieName + "=" + cookieValue + "; expire=" + expdate.toGMTString() + "; path=/"; } Do I have the order of exprie and path correct? Do I need to take out any spaces? And if I call the function with the same cookieName but different cookieValue, this will simply overwrite the previous cookieName with a different cookieValue and expiration date, right? Thanks.

Edited by MikeatW3S

Share this post


Link to post
Share on other sites

It should be "expires", with an S.

 

The function toGMTString() is deprecated, use toUTCString().

 

Aside from that, yes, your script is right. Using the same cookie name but changing other parameters will overwrite the value of that particular cookie.

1 person likes this

Share this post


Link to post
Share on other sites

Thank you, Foxy Mod. You've been a fine help.

 

One more easy question (for you).

 

How to call functions... Do I have to set a variable equal to a function as shown in the tutorial here? Or can I simply have a line of code that states, for example:

 

setCookie(CookieName, CookieValue, expdays);

 

 

It's not clear from the tutorial here if this is a legal function call procedure. Thanks.

Share this post


Link to post
Share on other sites

Read up on how functions work: http://www.w3schools.com/js/js_functions.asp

 

You only need to assign the function to a variable if the function gives you a value that you want to use later. getCookie, for example, will give you the value of the cookie, so that's why you assign it to a variable.

Share this post


Link to post
Share on other sites

Read up on how functions work: http://www.w3schools.com/js/js_functions.asp

 

 

 

Yes, that is the tutorial I am refering to. I understand from it that if your function returns a value, you can use a variable assignment to a function to call that function. But I see a potential problem of calling a function by assigning it to a variable if the function returns nothing at all, like the setCookie() function. Won't that give you an error to assign a variable to nothing?

 

I've seen elsewhere where I can simply have a line of code that state: setCookie(A,B,C);

 

It works, but then I'm told that makes it a global function, which I think means it can be called by any webpage in any tab in the browser. Is there a work-around so that the function can only be called by the webpage in which you want to use it? Thanks.

 

P.S.

 

I did find this: http://www.w3schools.com/js/js_function_invocation.asp

 

It talks more about what object owns the function. Correct me if I'm wrong, but I think my best approach would be something like this:

 

var myCookieSetObject = {

setCookie: function (cookieName, cookieValue, expdays) { var expdate = new Date(); expdate.setDate(expdate.getDate() + expdays) ; document.cookie = cookieName + "=" + cookieValue + "; expire=" + expdate.toGMTString() + "; path=/"; }

}

 

 

and then call it using:

 

myCookieSetObject.setCookie(cookieName, cookieValue, expdays);

 

 

Then the owner of the function is myCookieSetObject on the current page so there is no conflict with that function being run on different tabs in the web browser. Does this all seem right? Thanks again.

Edited by MikeatW3S

Share this post


Link to post
Share on other sites

If a function does not return anything and you assign it to a variable, the variable will have undefined as its value. No errors or warnings.

function doNothing() {  // Nothing}var x = doNothing();console.log(x); // Shows "undefined"

Your Javascript functions are only available on the page they were created, other browser tabs can't access any of your code and there is no interference of any kind. Each tab or window is in its own closed environment. Just leave the setCookie() function global.

 

Leave your function global, there is no problem with it.

You would only need to worry about having things in the global scope if you're making a large application including scripts created by other people, then your global function may overwrite or be overwritten by a function or variable that somebody else created.

1 person likes this

Share this post


Link to post
Share on other sites

Here is the code I'm working with. I think there is something wrong with the getCookieValue() function. If I comment out (/*) the definition of the getCookieValue() function and comment out (//) the assignment statement that calls it in the cookieValue() function, then I can at least get the alert statement to display. If I deliberates put a typo in the setCookie() function then I don't get to the alert statement. And when I correct the typo in setCookie(), then I do get to the alert message. This is how I know that the getCookieValue() function must be the culprit. Is there something wrong with the return"" statement in getCookieValue()? Or do I need to be more careful with spaces when searching through the cookie string? Or could it be the fact that I am working on a localhost server. Does that prevent cookies from operating correctly. I'm sorry to make you look through the code. But I'm hoping this is easy for you. Thanks again.

 

<!DOCTYPE html><html><body> <button onclick = "cookieValues()" type="button">Set and get cookie value:</button> <script> function cookieValues() { var IsPlayOnValue = 13; setCookie("IsPlayOn", 5, 33); IsPlayOnValue = getCookieValue("IsPlayOn"); alert("IsPlayOn is set to: " + IsPlayOnValue); } function setCookie(cookieName, cookieValue, expdays) { var expdate = new Date(); expdate.setDate(expdate.getDate() + expdays) ; document.cookie = cookieName + "=" + cookieValue + "; expires=" + expdate.toUTCString() + "; path=/"; } function getCookieValue(cookieName) { var thisCookie = document.cookie.split("; "); for (var 1=0;i<thisCookie.length;i++) { if (cookieName == thisCookie.split("=")[0]) { return thisCookie.split("=")[1]; } } return ""; } </script> </body></html>

Edited by MikeatW3S

Share this post


Link to post
Share on other sites

Read about data types: http://www.w3schools.com/js/js_datatypes.asp

 

Things wrapped in quotation marks are strings, if you want that particular text to be used then wrap it in quotation marks. If you intend to use variables, functions, arrays or objects then you shouldn't wrap it in quotation marks.

Share this post


Link to post
Share on other sites

Yea, it should have been,

for (var i=0; instead of for (var 1=0; ...

 

Which brings up a question. I'm using Microsoft Expression Web 4. Is there a better programming environment software that will catch errors? For example, is Dreamweaver better at catching javascript errors? Thanks.

Edited by MikeatW3S

Share this post


Link to post
Share on other sites

Don't rely on your developer software to catch errors. Create your code, run it in a browser and check for errors on the browser. Browsers are constantly changing, no developer environments will be able to keep up with these changes.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0