I've done some research on the subject, but can't get a clear answer with how to go about doing this. I have tried the following method:
<script type="text/javascript" src="../binaryajax/binaryajax.js" ></script>
<script type="text/javascript" src="id3.js" ></script>
var file = "mymusicfile.mp3";
// define your own callback function
function mycallback() {
// either call ID3.getAllTags([file]) function to return object holding all the tags
alert(
"All tags in this file: " + ID3.getAllTags(file).toSource()
);
// or call ID3.getTag([file], [tag]) to get a specific tag
alert(
"Title: " + ID3.getTag(file, "title") + " by artist: " + ID3.getTag(file, "artist")
);
}
ID3.loadTags(file, mycallback);
The first method, (getAllTags) doesn't allow my script to run, and the second method returns null for both title and artist on all of my mp3's.
Source of Info: http://blog.nihilogic.dk/2008/08/reading-id3-tags-with-javascript.html
I know these methods are using ID3(v1), so that may be the problem. Either that, or I suppose it's possible by mp3's don't contain ID3 information. But if anyone could provide some insight into how to do this, or how to identify if my mp3's contain ID3 info and whether it's v1 or v2 would be great.
Edit: I should say, I'm accessing the files via Blob URL's because the app that I'm developing let's the user select a directory on their computer and then queries the files for media files. In doing this, you can't access the absolute path of the file, but you still can access the file information and use the file.
For others to use: this worked quite well for me :)
github.com/aadsm/JavaScript-ID3-Reader/tree/master/src use the project repository
Related
I've added a random date param to my CSS and JS files in order to "cache-bust"...
HTML (head)
<!-- STYLE -->
<link href="assets/css/style.css" rel="stylesheet" id="style">
<!-- SCRIPTS -->
<script src="assets/js/scripts.js" id="scripts"></script>
JS (jQuery 3.4.1)
var randomParam = new Date().getTime();
// CSS
var ogCSS = $("head").find("#style").attr("href");
$("head").find("#style").attr("href", ogCSS + "?" + randomParam);
// JS
var ogJS = $("head").find("#scripts").attr("src");
$("head").find("#scripts").attr("src", ogJS + "?" + randomParam);
The CSS file works great. The JS file not so much.
"Network" tab (CSS renamed and called again, JS is not)...
"Sources" tab (JS not called again, has original name)...
I cannot use PHP. I cannot access the server. This is all client-side.
What can I do to make it work? Or is this just how it is?
UPDATE
Forgot to mention that "Elements" in the DevTools show the JS file being renamed properly (see below). It's just not being re-called in "Network" or showing up as being renamed in "Sources". So it's stuck in cache.
I know this question is old, but in case someone comes across it (as I did), the problem is likely here:
ogCSS + "?" + randomParam
That does not create a valid and complete query string. The format of the query string should be:
?<param_name>=<param_value>
but in the code above, we only have ?<param_value>. This means the value will be treated as a name, presumably with a null value, which is generally ignored by most servers I have worked with. To make this correct, you would need to append both a parameter name (often "_" for this use case) and a value, so something like:
ogCSS + "?_=" + randomParam
Hey guys I am trying to learn how to use JSON files. I understand the basics but I am trying to grasp loading them into an HTML file and I am having a couple of difficulties.
The first difficulty I am having is that if I put in the full file extension to load the file I get an error 'expected hexadecimal digit'. I did some research on it and I think it is because in the file extension it is \u so it is expecting a hexadecimal but I am not sure how to work around it.
The second problem I am having is that if I just use the file extension users.json it works in my editor but not in a browser. It is not loading the file at all, the code is fine (I believe). I think it is just not loading the file because of the file extenion.
Suggestions on how to fix my problems? Thanks in advance.
<body>
for output
<div id="forOutput"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var output;
$(document).ready(function(){
alert("JQuery loaded");
});
$.getJSON('C:\Users\Spencer\Desktop\JSJqueryTesting\JSONTesting\users.json', function(data) {
output = data;
for (var i in data.users) {
alert(data.users[i].firstName + " " + data.users[i].lastName+ " " + data.users[i].joined.month);
}
});
$("#forOutput").html("User 1 lastname: " + output.users[1].lastName);
</script>
The file extension is perfect (.json), however, you can't load local files (because of security reasons). If what you are trying to do, were possible, that would mean any website could access all your local files. Now that's really not such a good idea, and therefore (by default) only files that share the same domain(e.g. stackoverflow.com/*) are allowed. This is called Same Origin Policy.
I'm trying to download some data using pure javascript/html from cross-domain, dropbox to be specific.
<html>
<head>
</head>
<body>
<div id = 'twitterFeed'></div>
<script>
function myCallback(dataWeGotViaJsonp){
var text = '';
var len = dataWeGotViaJsonp.length;
for(var i=0;i<len;i++){
twitterEntry = dataWeGotViaJsonp[i];
text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
}
document.getElementById('twitterFeed').innerHTML = text;
}
</script>
<script type="text/javascript" src="http://dl.dropbox.com/u/6438697/padraicb.json?count=10&callback=myCallback"></script>
</body>
for some reason, the json is not loading. however the json loads correctly when I make the url "http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback" instead. I got this example from here
Can anybody explain why dropbox doesn't work?
thanks!
UPDATE:
<script type=text/javascript>
function myCallback(dataWeGotViaJsonp){
alert(dataWeGotViaJsonp);
}
</script>
<script type="text/javascript" src="http://dl.dropbox.com/u/6438697/test2?&callback=myCallback"></script>
returns either [object object] or undefined... something is still wrong? the contents of test.json is myCallback( {"your":"json"} );
You can't just add the word 'callback' to your URL and expect Dropbox to wrap it for JSONP. You put a JSON file on your Dropbox and shared it publicly, but Dropbox isn't a dynamic server. You need a scriptable environment to take the callback parameter value and wrap it around the JSON in order to make it "JSONP".
The reason the Twitter URL works is that their API is configured to take the callback parameter as a sign that the client is expecting JSONP, which is really just a fancy term for "a JavaScript object literal wrapped in a callback function". You tell twitter what that function will be called, and they'll return a file that the browser will execute as a script, passing the object as a parameter to your callback function.
If you don't need the JSONP callback function name to be dynamic AND you need to use Dropbox, just wrap the JSON yourself. All you need to do is edit the file, and prepend valid JSON with the name of the function, and append it with the close paren.
ie,
myCallback( {"your":"json"} );
It is possible to use Google Apps Script as a proxy for hosting sites that do not support jsonp. There is writeup on how to do it here http://ramblings.mcpher.com/Home/excelquirks/jsonp
i'm trying to get the url and title of any website with this javascript we wrote. i made the javascript in a .HTM and get it from out my regedit in the menuExt. like file://C:\Users\lala\script.htm
here's the script
<script type="text/javascript" defer>
javascript:{var jolExt={url:"http://example.com/script_container.php?id=¬e=",submit:function(a){var b=jolExt.base64.encode(jolExt.strip(document.getElementsByTagName("title")[0].innerHTML));var d=jolExt.base64.encode(jolExt.strip(location.href));
window.open(jolExt.url+d+"¬e="+b,"","width=380,height=335")},submitToOtherJol:function(){jolExt.submit(true)},submitToJol:function(){jolExt.submit(false)},strip:function(a){return a.replace(/ {2,}/g," ").replace(/^ +/g,"").replace(/ +$/g,"")},base64:{_0:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(a){var b="";var d,c,h,j,i,f,g;var e=0;a=jolExt.base64._1(a);while(e<a.length){d=a.charCodeAt(e++);c=a.charCodeAt(e++);h=a.charCodeAt(e++);j=d>>2;i=((d&3)<<4)|(c>>4);f=((c&15)<<2)|(h>>6);g=h&63;if(isNaN(c)){f=g=64}else if(isNaN(h)){g=64}b=b+this._0.charAt(j)+this._0.charAt(i)+this._0.charAt(f)+this._0.charAt(g)}return b},decode:function(a){var b="";var d,c,h;var j,i,f,g;var e=0;a=a.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(e<a.length){j=this._0.indexOf(a.charAt(e++));i=this._0.indexOf(a.charAt(e++));f=this._0.indexOf(a.charAt(e++));g=this._0.indexOf(a.charAt(e++));d=(j<<2)|(i>>4);c=((i&15)<<4)|(f>>2);h=((f&3)<<6)|g;b=b+String.fromCharCode(d);if(f!=64){b=b+String.fromCharCode(c)}if(g!=64){b=b+String.fromCharCode(h)}}b=jolExt.base64._2(b);return b},_1:function(a){a=a.replace(/\r\n/g,"\n");var b="";for(var d=0;d<a.length;d++){var c=a.charCodeAt(d);if(c<128){b+=String.fromCharCode(c)}else if((c>127)&&(c<2048)){b+=String.fromCharCode((c>>6)|192);b+=String.fromCharCode((c&63)|128)}else{b+=String.fromCharCode((c>>12)|224);
b+=String.fromCharCode(((c>>6)&63)|128);b+=String.fromCharCode((c&63)|128)}}return b},_2:function(a){var b="";var d=0;var c=c1=c2=0;while(d<a.length){c=a.charCodeAt(d);if(c<128){b+=String.fromCharCode(c);d++}else if((c>191)&&(c<224)){c2=a.charCodeAt(d+1);b+=String.fromCharCode(((c&31)<<6)|(c2&63));d+=2}else{c2=a.charCodeAt(d+1);c3=a.charCodeAt(d+2);b+=String.fromCharCode(((c&15)<<12)|((c2&63)<<6)|(c3&63));d+=3}}return b}}};jolExt.submitToJol();}
when i'm using my add-on i made i only get the path i set on the regedit in the menuExt. Does any1 know's how to solve this. i alraidy tried to putt the full javascript in the string value but it didn't help.
so in short language, i am asking the url but i get the path of my regedit editor in the menuExt. and i need the url of the parent site and the title of the parent site.
Plz help me :)
Regards,
Freezingmoon
The problem is that the document instance in your script is the MenuExt script's document. What you need is the document from which the script was called.
To get this use the external.menuArguments object. This contains the window of the callee. Consider this simple MenuExt script
<script type="text/javascript">
// Get callee's 'window' object
var win = external.menuArguments;
// Get the callee's 'document' object.
var doc = win.document;
// Get the callee's object which invoked this
// (aka: what you right-clicked on)
var src = win.event.srcElement;
// Spit back page title and URL
alert('Viewing ' + doc.title + ' at ' + win.location +
'. You clicked on ' + src + '.');
</script>
To get the item right-clicked on, use external.menuArguments.event.srcElement, as shown above.
How do I get the absolute or site-relative path for an included javascript file.
I know this can be done in PHP, (__file__, I think). Even for an included page, one can check the path (to the included file). Is there any way to have this self awareness in Javascript?
I know I can can get the page URL, but need to get the JS URL.
Eg. Javascript needs to modify the src of an image on the page. I know where the image is relative to the JavaScript file. I don't know where the Javascript is relative to the page.
<body>
<img id="img0" src="">
<script src="js/imgMaker/myscript.js"></script>
</body>
function fixPath(){
$$("#img0")[0].set('src','js/imgMaker/images/main.jpg');
}
Please do not tell me to restructure my function - the example is simplified to explain the need.
In the actual case, a Mootools class is being distributed and people can put it into whatever folder they want.
I would just read the src of the script element, but the class can be part of any number of javascript files, so I can't know what the element looks like.
JavaScript (not JScript) has no concept of file names. It was developed for Netscape back in the days. Therefore there is no __file__ feature or anything similar.
The closest you can come are these two possibilities:
What you already mentioned: Harvest all src attributes of all JS files and try to figure out which one is the right.
Make it a necessary option, that the path to the images must be set in the embedding HTML file. If not set, use a reasonable and well-documented default:
<script type="text/javascript">
var options = {
'path_to_images': '/static/images/' // defaults to '/js/img/'
};
</script>
Based on http://ejohn.org/blog/file-in-javascript/
(function(){
this.__defineGetter__("__FILE__", function() {
return (new Error).stack.split("\n")[2].split("#")[1].split(":").slice(0,-1).join(":");
});
})();
(function(){
this.__defineGetter__("__DIR__", function() {
return __FILE__.substring(0, __FILE__.lastIndexOf('/'));
});
})();
Then later
img.setAttribute('src', __DIR__ + '/' + file);
if you have folders:
/webroot
/images
/scripts
Then images would be an absolute path of /images/whatever.jpg and scripts would be an absolute path of /scripts/js.js
I'm using the following method to get the base URL and using it for loading the other prorotypes, maybe this is what you need. Lets say current script name is 'clone.js'.
/*
* get the base URL using current script
*/
var baseURL = '';
var myName = 'clone.js';
var myPattern = /(^|[\/\\])clone\.js(\?|$)/;
var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
var src;
if (src = scripts[i].getAttribute("src")) {
if (src.match(myPattern)) {
baseURL = src.replace(myName, '');
break;
}
}
}
Var baseURL should contain what you need.
The path to the JS is irrelevant; links in the HTML file are always relative to the HTML file, even if you modify them from external JS.
[EDIT] If you need to build a path relative to the current web page, you can find its path in document.location.pathname. This path is relative to the web root but you should be able to find a known subpath and then work from there.
For example, for this page, it pathname would be /posts/1858724. You can look for posts and then build a relative path from there (for example posts/../images/smiley.png)
I know this question was asked awhile back but I have a similar situation to Sam's.
In my case, I have two reasons for the situation:
The user can access different sub-domains, each with its own index page.
The user can enter a password that causes index.php to adjust the paths.
Most of the references point to the same src locations for the scripts, but some do not. For instance, those at a different level of the tree would require a different path.
I addressed it by assigning an id to the index page's script tag. For example, the head might include...
<script id='scriptLocation' type='text/javascript' language='javascript' src='../scripts.test/script.js'></script>
My JavaScript is then able to read the path...
var myPath = document.getElementById("scriptLocation").src;
Found another approach, perhaps someone with more JS ninja can flush this out.
CSS stylesheet are able to find the node that called them using document.stylesheets.ownernode.
I could not find a similar call for javascript files.
But, in some cases, if one can include a CSS file together with the javascript, and give the first rule some unique identifier.
One can loop through all stylesheets till they find the one with the identifier [if(document.stylsheets[i].cssRules[0] == thisIs:myCSS)], than use ownerNode to get the path of that file, and assume the same for the JS.
Convoluted and not very useful, but its another approach - might trigger a better idea by someone.