Embedding Music on a Blog

[nyjm]

When I do reviews of Song Fight! tunes, or reference any music, really, I want to be able to embed the sound files on my blog. How can I do this?

I use Blogger. It's usually pretty user-friendly.

I've already looked at a few things:

Streampad is neat, but it grabs ALL of the .MP3s on the entire site. To boot, it's doesn't actually stream anything from Song Fight.

I've tried using the simple code from this page, but all I get is a blank spot on the page and a message saying that a "Plug-in is missing." When I search, no "appropriate" plug-ins can be found. I have QuickTime and Java and Flash Shockwave all installed and up to date. I've tried looking at the page with both Chrome and Firefox; same problem with each browser.

The floor is now open to suggestions, derision, second-guessing and the normal hullabaloo.

[roymond]

I use Wimpy Buttons. I know this because I looked at page source and that reminded me because it's been so long since I've added anything to my blog and in fact I'm not sure I can access MovableType any more. One day I will finish installing the Spud machine. Or something else.

[Lunkhead]

You may run into issues with Song Fight!'s policies about people linking directly to mp3s, too. They may prevent some players from playing the songs. You could try the Yahoo media player that JB is using on the boards. If you want to just link to any mp3 and have it work, that would be a good way to go, though you'll probably wind up with the same issue with that and other similar options that you've already seen, where all mp3 links get turned into player. You probably want to find one that can just convert links based on a CSS class that you can set and/or configure (e.g. only links like <a class="songfightLink" etc.></a> would get turned into players).

What would be great would be if songfight.org provided some kind of embed code for people to use, for songs, fights, artists, etc. I have that on my TODO list for the jukebox, but I've got a new job that is going to eat up most of my coding energy/time so I don't know if/when I'll get around to implementing an embed feature.

[jast]

jb added the Yahoo! MP3 player to the boards. It's really simple to add that... just requires you to change the template of your blog (if that's possible).

Alternatively, you can embed something manually and usually get a lot more control over the specifics. Here are a few players you can embed:
http://www.flashmp3player.org/
http://flash-mp3-player.net/ (I'm using this one on my own website, in the invisible programmable version which is controlled by custom JavaScript code. They do have standard versions of the player, too, though.)

Actually, you know what, someone else has already made a list: http://www.webdesignbooth.com/10-easy-t ... r-website/
The first one mentioned there is pretty popular. I see it on a lot of sites.

[nyjm]

Well, the Yahoo! MP3 player is a bust. It works, but can only stream the songs from the Carpenters' fight.

I understand the Song Fight policy. When I stream my own stuff, Bandcamp has a great embed player code that works swimmingly, so that's not really an issue, it's just getting Song Fight entries to play when not at SF! or playing the Jukebox. For the time being, I'll just link to the Jukebox and the .M3U playlist, I suppose.

[Lunkhead]

I will try to make it a higher priority for me to come up with some kind of embedding solution at least for the Jukebox. Maybe I can get to it this weekend, as I have Monday off. The Jukebox has already been whitelisted for playing the songs, so if I use an iframe that loads content from the Jukebox that should work around that issue.

If you or anyone else have any ideas on how you would like the embedding functionality to work, please list them here, so anybody who gets around to implementing this has some ideas of what to do.

[jast]

An iframe would be a simple solution. I think it's also possible for people to directly embed your Flash player, hot linking style. If I recall correctly, the cross-domain mechanism in Flash only cares where the Flash applet lives, not which site embedded it.

[Lunkhead]

The Flash player on the Jukebox is invisible, if it's there at all. I'm using something called jPlayer which will use HTML5 audio instead for many browsers. jPlayer provides JavaScript code for playing sound through HTML5 or Flash, and I wrote a custom UI and wired that up to jPlayer. I'll just have to make a smaller, more minimal version that fits in a little rectangular ifram. What size would be good? 300x200? Or should I copy one of the sizes that Bandcamp uses? I will probably just make it a fixed size and not really customizable in any way at first, unlike Bandcamp's widgets.

[nyjm]

300 x 200 is really the maximum size necessary. Though, it would be nice to have an option to add a tracklist to the player. But hey, I'd be happy for any ol' thning.

[Lunkhead]

Are you mostly looking to embed one player that plays a fight and/or artist? What about players for individual songs, do you care about that? I'm just trying to get a feel of what is most important so I implement that first.

[Spud]

So are we trying to find a way for people to hotlink directly from the archive onto their blogs? I was under the impression that this was discouraged...

[jb]

I'd be ok with it if the player was branded songfight and linked back to the entire fight or something. I'm not ok with just straight up linking to mp3 files, 'cause, y'know, get your own damn hosting.

JB

[Lunkhead]

All I was going to do was make a page on the jukebox, laid out to fit in a 300x100 pixel iframe, then make the code for the iframe available. This page would just be very minimal, with fight art, play/pause button, current time, length of song, seek bar, link to songfight.org, link to sfjukebox.org, etc. I was going to basically copy this Bandcamp embed:

Screen shot 2012-01-14 at 2.31.46 PM.png (92.94 KiB) Viewed 1976 times

I was planning to make a prominent songfight.org link and then a less prominent "powered by song fight jukebox" somewhere. Anyway, if you guys aren't OK with it then I won't do it, it's no big deal to me.

[Lunkhead]

So since the player would be for a fight, I guess this would be a more analogous Bandcamp widget:

Screen shot 2012-01-14 at 3.03.05 PM.png (61.79 KiB) Viewed 1972 times

[jb]

I'm ok with that Sam.

[Lunkhead]

Good! I've got it working. Here's what it looks like so far:

Screen shot 2012-01-14 at 5.35.13 PM.png (44.15 KiB) Viewed 1963 times

The "N song(s)" part turns into the artist's name, as a link to the artist's archive page, when playing a song. Also the duration of the song shows up to the right of the slider when the song is loaded, and there is a little progress animation inside the slider as the song loads.

Any feedback before I put this up on the Jukebox?

[Spud]

Why is it blue? I was serious. I want to start the Song Fight! Standards Consortium, and come up with a way for approving stuff as "official". Thoughts? Or would all you third-party guys rather remain unofficial?

[jb]

Why is it blue? I was serious. I want to start the Song Fight! Standards Consortium, and come up with a way for approving stuff as "official". Thoughts? Or would all you third-party guys rather remain unofficial?

I think that would be dandy too.

[Spud]

Why is it blue? I was serious. I want to start the Song Fight! Standards Consortium, and come up with a way for approving stuff as "official". Thoughts? Or would all you third-party guys rather remain unofficial?

I think that would be dandy too.

Excellent. So we're both on board. We need a few more members. I nominate Lunkhead. Other nominations welcome.

SPUD

[Lunkhead]

I can make the links the same red as the links on songfight.org if that's what you mean. If you guys want to have some kind of style guide for Song Fight! related sites/apps that would be cool. We could start a different thread to hash that out if you want. I'd be happy to just use whatever styles/fonts/colors/icons/etc. you want to mandate, or if you want other people to participate and contribute to that too that's also cool.

[Spud]

I will draft something, post it another thread, and we can discuss. This is an effort to look toward the future of Song Fight.

[RangerDenni]

It'll be good to link back appropriately and in a snazzy fashion when blogging