Music players!

Alright, I saw Dr. Preston's post about music players, and I said, "Hey, I can do that!"

I know of 3 ways to embed music players: YouTube, SoundCloud, and my personal favorite, Listube. UPDATE: Lindsey Wong found the SCM player, which is also really awesome. I tried it out myself (you can see it at the top of this page), but I found that the code is a little tricky, so I hope Lindsey doesn't mind if I explain it a little here, too. DOUBLE UPDATE: I was so sad when I found that the Listube player didn't work for YouTube videos, and I knew there just had to be a way to embed video playlists without actually making a playlist on the YouTube website. It took me awhile, but I finally found the solution at Stack Overflow. Read on for examples and instructions of all five methods! (Although this page is getting reeeeeeally laggy from all the stuff I put on it... sorry about that! ^^;)

Youtube

When writing a post in "compose" mode (as opposed to HTML), there's an icon at the top of the screen that says "insert a video" on scrollover. You can upload a video from your computer, or search for one on YouTube. Pretty simple.

If you want to resize it, you'll have to switch to HTML mode. There are two places where it will say height="266" width="320" (although the numbers might be different). As far as I know, you only have to change the second set of height and width (the second set is in the embed tag; the first is in the object tag), but you should probably change both just in case. The measurements are in pixels (px). For reference, 100 pixels are about an inch. (The top video is 320x266, and the bottom video is 600x350.)

YouTube version 2.0

Also, I think I found a way to embed a playlist of videos from Youtube, without making a YouTube playlist. Follow the instructions above for embedding a single YouTube video (using the video that you want to be first in your playlist), and then switch to HTML mode. There will be two places where the URL of the video will appear (value="" and src=""). Change both of the urls to this one:

http://www.youtube.com/v/VIDEO_ID1?version=3&loop=1&playlist=VIDEO_ID2,VIDEO_ID3

...changing VIDEO_ID1, VIDEO_ID2, VIDEO_ID3, etc. to the "gibberish" identifiers for the videos you want to be in the playlist. Thank you to the Stack Overflow forums for figuring this out :)

Below is an example of a video playlist that I created myself using this method, without using a YouTube account. It's the same music video for "Á meðan ég er ungur," then a lyric video for the song, and then an amazing random song about a fox just to prove that I made this playlist myself (or something. Actually I just like the fox song).

Soundcloud

I don't usually use SoundCloud, so I don't know much about it. All I know is what I figured out right now-- from the SoundCloud website, if you're on a song's page you can click "Share" and copy the Widget Code. If you click on the pencil, you can change stuff, like the colors and whether it autoplays (which is actually really easy to change in the url-- for autoplaying, the url should say either &auto_play=true or &auto_play=false respectively; for color, the url should say &color=0000FF or another hex color. You can also embed "sets" (playlists) in pretty much the same way. You can embed individual songs and existing sets without an account, but you have to have an account to make your own sets for embedding.

Listube

listube - free online on-demand music player

Listube is a music player that gets music from YouTube and SoundCloud and puts it into a nice list form, which you can reorder and save as playlists. After making a playlist, you can embed it in your blog by using the "Embed" button at the bottom-right of the screen. However, for some reason only SoundCloud songs and a few YouTube videos will play in the embeddable widget; most YouTube videos won't work (I think it has something to do with the ads). You can also get individual SoundCloud embed codes from the Listube website (make the video fullscreen, then click Share, then Embed, and copy the code. It will be orange and will autoplay; you can follow the instructions above to change the autoplay value and add a color value). Listube has an advantage over SoundCloud because you don't have to have an account to save playlists, but if you already have a SoundCloud account then you can use whichever you like best.

If you want any of these music players to be embedded on every page of your blog, all you have to do is go to Layout, add a Text gadget, and paste the code for your music player in the box. I've added a Listube player at the bottom of my blog so you can see.

SCM player

Lindsey found the SCM player, which is also really cool. Unlike the other four, it shows up as a small bar at the top or bottom of the page, outside of posts or widgets. Suuuper sleek. At their website, you can choose different skins, make a playlist out of MP3 links or songs from SoundCloud or YouTube, and customize several other attributes. If you paste the code on an individual post (like I've done here) it will only show up on that page; if you want it to show up on every page, you'll need to paste the code in your blog's HTML template. On Blogger, go to Design > Template > Edit HTML. This is the tricky part, because Blogger's HTML is really touchy about where exactly you paste the code. (For anyone who doesn't know anything about HTML, it's a markup language that uses <tags></tags> to define formatting.) I think all templates have the same structure at the beginning; the first four tags are labeled ?xml, !DOCTYPE, html, and head. If you paste the code right after the opening head tag (on a separate line), the player should work. (If you paste it in the wrong place, either your page will fail to load or Blogger will yell at you and not even let you save the template.)


I know this post is kind of jargon-y, so if you have any questions, please comment! Hope this was helpful!