YouTube Audio Player
While I was procrastinating on my essay for GSW, I’ve made a couple slight changes to the YouTube Audio Player that should make it a little better.
Firstly, I’ve given you the ability to allow YouTube to set cookies. I’m not sure why anyone would be interested in doing this for a Music player, but its there. I guess the primary reason I set this is because youtube-nocookie wasn’t working properly the other day, as I soon found out from a comment on my blog. So if it isn’t showing up, you should allow YouTube to collect cookies.
The second, and by far the more important change is embedding the link (in the event that neither the object nor the embed shows) in a <noembed> tag. I’m not quite sure how I didn’t know about the existence of this tag, but I’ve gone ahead and programmed it in properly, which should get rid of the annoying duplication some users have been seeing on any players generated from this point forward.
And one last change I made while working on this blog post, I created an API! So now you can generate them on the fly if you want to and get just the HTML for the player. I’ll document the API below:
http://www.gtaero.net/ytmusic/?api=1
- &q=
- The URL to the YouTube Video or Playlist
- &a=1
- Only Add if you want the music to AutoPlay
- &loop=1
- Only Add if you want the music to Loop
- &js=1
- Only Add if you want to be able to use the JavaScript API with it
- &s=on
- Add if you want to enable the Progress Bar on the video.
- &psize= This is the progress bar size, acceptable variables are below
- s – Small, This will set the width of the video to 150px
- m – Medium, This will set the width of the video to 187px
- l – Large, This will set the width of the video to 224px
- &tc =1
- Only Add if you also want to show a timecode. Only works with progress bar. Changes the follow sizes to the corresponding pixels:
- s – 225px
- m – 262px
- l – 299px
- &invis=1
- Add if you want to make the player invisible. Note: People hate this.
- &html5=1
- Add if you want to use YouTube’s HTML5 player. You shouldn’t use this. Its VERY buggy.
- &cookie=1
- Add if you’re okay with YouTube setting cookies on the user’s computer.
And that’s all! Enjoy!
How to Retrieve a Zipcode Using JavaScript
// Retrieve user’s Zipcode // Demo at http://sandbox.gtaero.net/zipcode.html function retrieve_zip(callback) { try { if(!google) { google = 0; } } catch(err) { google = 0; } // Stupid Exceptions if(navigator.geolocation) // FireFox/HTML5 GeoLocation { navigator.geolocation.getCurrentPosition(function(position) { zip_from_latlng(position.coords.latitude,position.coords.longitude,callback); }); } else if(google && google.gears) // Google Gears GeoLocation { var geloc = google.gears.factory.create('beta.geolocation'); geloc.getPermission(); geloc.getCurrentPosition(function(position) { zip_from_latlng(position.latitude,position.longitude,callback); },function(err){}); } } function zip_from_latlng(latitude,longitude,callback) { // Setup the Script using Geonames.org's WebService var script = document.createElement("script"); script.src = "http://ws.geonames.org/findNearbyPostalCodesJSON?lat=" + latitude + "&lng=" + longitude + "&callback=" + callback; // Run the Script document.getElementsByTagName("head")[0].appendChild(script); } function example_callback(json) { // Now we have the data! If you want to just assume it's the 'closest' zipcode, we have that below: zip = json.postalCodes[0].postalCode; country = json.postalCodes[0].countryCode; state = json.postalCodes[0].adminName1; county = json.postalCodes[0].adminName2; place = json.postalCodes[0].placeName; alert(zip); } retrieve_zip("example_callback"); // Alert the User's Zipcode
A Quick Update to Simple Twitter
A lot of people use my Simple Twitter Feed written in JavaScript (for some reason). Well, today I pushed out a quick update that should fix all the woes users have given me in the past.
The code should now be valid XHTML strict, and I know longer use innerHTML for each list element. Instead, I’ve moved from adding the list elements via innerHTML to DOM Manipulation (appendChild). I’m not sure exactly what the benefits of this are, but I’m sure they exist.
As the previous HTML code seems to have been broken, this may cause some rendering errors for a few websites, but all in all it should work better than it has previously.
I’m not writing out a whole changelog, I’m just going ahead and saying that some changes were made – and hopefully Simple Twitter should work a lot easier for everyone using it.
Webkit JavaScript Notifications API
Something I learned about recently by following the updates being issued to Chrome, is that with today’s release they also pushed out the Webkit Notifications API to Chrome Stable (v4). Surprisingly, this is actually the first I’ve heard of it’s existence. I took a look and played around with it a bit, and it is qué cool.
Visit my Sandbox to see the code in action, or continue reading for some code excerpts.
Never Again (External JavaScript in the Body)
This is probably simply a personal taste, but I hate putting External JavaScript tags in the body of a web page. It feels and looks very unsightly to me. But as I learn more and more JavaScript, and really start to get a feel for the small language, I’ve realized that I don’t have to. That it’d be just as easy to place them directly into the header after the page is ready, by manipulating the DOM. Here is an excerpt from the beta turled website.
$(document).ready(function() { // Google Analytics var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); var script = document.createElement("script"); script.src = gaJsHost + "google-analytics.com/ga.js"; script.type = "text/javascript"; document.getElementsByTagName("head")[0].appendChild(script); try { var pageTracker = _gat._getTracker("CENSORED"); pageTracker._trackPageview(); } catch(err) { /* Do Nothing. */ } // Facebook Share var script = document.createElement("script"); script.src = "http://static.ak.fbcdn.net/connect.php/js/FB.Share"; script.type = "text/javascript"; document.getElementsByTagName("head")[0].appendChild(script); });
As you can see, I wait until the document is loaded using jQuery’s ready method, and then create elements for both Google Analytics and Facebook Share, before appending them directly to the <head> of the website. Keeping the code clean, reducing bandwidth usage for non-JavaScript users, and even making Google’s code cleaner. (By changing Google Analytic’s default code from document.write to DOM Manipulation.
So, Never again will I feel the need to insert external script tags at the bottom of the <body> just so that the rest of the page loads before them.
Note: If you’re not using jQuery, document.onload = function() { /* Code */ } works just as well, I promise.
Hunting Down the Bugs – TwCLI on Chrome for Linux Beta
This is the first post of a new series, looking at some of the odder bugs encountered while developing for the expanding Web, no matter how basic a bug it may be.
Thanks to twitter user @paperfairy, a bug was discovered on my Command Line Twitter Client, TwCLI.
For some reason, when submitting a command in Chrome for Linux, the page would simply refresh, and the command would never be sent. At first, I had no possible way to track down this bug. I didn’t have a linux box (with a GUI, anyway) so I simply told him that it was unfortunate, but it’d have to stay a bug. Until a recent post on lifehacker brought my attention to Portable Ubuntu. I immediately installed it, opened up the Chrome website in Firiefox, installed Chrome Beta, and headed over to TwCLI to see what was amiss.
Of course, it was a single line in a detection script to send Geo-Data to Twitter (as long as the user approved it, of course):
else if(google.gears) {
This single line was throwing an exception I hadn’t encountered in other browsers – Google wasn’t defined. Oddly, I thought it would handle that properly, since google wasn’t defined, it would just skip over it, but instead it threw an error and halted all further javascript code.
The fix was simpler than tracking down the bug, I simply had to add this to the start of the javascript code:
try{ if(!google) { google = 0; } } catch(err) { google = 0; }
And voila, I had both a check for google, and a catch if it decided to throw errors while checking for it.
Whether this is a Chrome bug or not, I don’t know – I simply don’t know enough about JavaScript in order to say so either way. But, are undefined variables supposed to throw errors, or are they simply supposed to return false?
JavaScript & CSS3 Lightbox
Usage:
- Call createLightbox(); to create the actual lightbox element (does not display anything).
- Call fillLightbox(string content) to fill the lightbox with RAW HTMLor
Call appendLightbox(element childElement) to append a DOM Node directly into the lightbox.
- Call setLightboxSize(int width, int height, null, string unit) to set the width and height of the lightbox. Unit will default to pixels “px” if not specified.
- Call showLightbox() to actually display the lightbox to the user.
- Call boolean lightboxVisible() to determine if the lightbox is still visible or not.
- Call hideLightbox() to remove the lightbox from view.
- Call cleanLightbox() to delete all content inside the lightbox container.
Another Quick YouTube Audio Player Update
The generator now also supports a Progress Bar and Time Code in three different sizes.
YouTube Audio Player Updates
The YouTube Audio Player has gotten three much-needed updates.
- Autoplay
- Loop
- Playlist Support
The first two, Autoplay and loop – which is self-explanatory, are checkboxes that allow you to enable them. (You’ll need to click Make to update the embeddable code).
The third, Playlist Support is fairly self-explanatory. This allows you to embed not just a single video, but an entire playlist using the audio player. There are two ways to use this feature. Either enter the URL of a playlist URL, or the URL of a video in a playlist and check the “Entire Playlist” option.
Of course, with these updates comes an update (hopefully the last) to the bookmarklet, which can be added to your browser bar by dragging this link: Generate Audio Player.
Enjoy!
SimpleTwitter Update
I’ve pushed a simple update to the SimpleTwitter JavaScript. Change log (if its even needed) below.
- Support for Twitter Lists
- Uses the same format as twitter, for example @navarr/shogi
- Support for Turled Profiles
- Using the variable &turl=true will link @replies to turled beta-profiles instead of twitter profiles.
- Surprisingly, this doesn’t break in co-ordination with lists. It just doesn’t display the list.
- Uses Search API
- We moved to the search API for retrieving tweets, as well as pulling a JSON file instead of XML. This MAY BREAK your current implementation (though it should not). If it does, you can use the older script by pulling old.php from the server instead of index.php
Yeah, that’s it. Was thinking about making the default for &turl being true instead of false, but figured that’d probably annoy more people than it was worth (at least until I get turled to be of more use as a twitter replacement).