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!

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.

Visit my Sandbox to see the code in action, or continue reading for some code excerpts.

One interesting thing about this new API is that it not only requires a user to authorize it, but in order for an authorization click to appear, the user has to do something.  You can’t make it appear as soon as the user visits the page, they have to click something or trigger an event.

For the sake of this example, lets say the user clicks a link that triggers the JavaScript function “notification();” and we want to show a notification onscreen.

Code block
   
function notification()
{
	if(window.webkitNotifications) // If we have the Notification API
	{
		var nc = window.webkitNotifications; // Set the API to nc for easy access
		if(nc.checkPermission()) // 1 = Not Allowed, 2 = Denied, 0 = Allowed
		{
			nc.requestPermission(myNotification); // Request Permission with a callback to myNotification();
		} else { myNotification(); }
	}
}
function myNotification()
{
	try
	{
		var nc = window.webkitNotifications;
		var notif = nc.createNotification(null,"Notification Title","Notification Body"); // Parameters: string URL_TO_IMAGE, string Title, string Body
		notif.show(); // Show Notification
	} catch(Err) {
		alert(Err.message); // Will output a security error if we don't have permission.
	}
}

As you can see from the code, its a fairly straightforward API for showing desktop notifications, and once the user has given the website permission, they can be triggered any time. Up to five notifications can appear, and the rest will be kept in a queue until the others are dismissed, either by the user or by calling .cancel(); on the notification variable (notif in this case).

Code block
   
$(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.

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?

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.

Read More.

• 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!

• 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).