Embedding Music on a Blog

[Lunkhead]

Player is up, to access directly go to a URL like this one:

http://sfjukebox.org/embed/player?fight ... _not_right

If you go to a page for a fight, you'll now see "Show/Hide Embed Code" down in the lower left:

http://sfjukebox.org/fights/its_just_not_right

You can copy the code and try to use it in your blog/site/etc.. It's just an <iframe> tag, which may not work for everybody. It looks like Bandcamp has different non-iframe embed options for some common platforms like Tumblr and Wordpress.com but uses iframes for others like Wordpress.org (?), Blogger, and TypePad.

[RangerDenni]

Yay! This'll be great!

[Lunkhead]

Would anybody be interested in a player that plays all of an artist's songs? I could imagine people embedding that in their sites or something. It would be really easy for me to do.

[nyjm]

Oh this is perfect! Thank you! It plays all the songs in a fight, just as I review them and the pic links back to songfight.org. Spot on.

Check it out, everyone:

http://jardincandide.blogspot.com/2012/ ... ation.html

I'm not personally interested in being able to play all of a single artist's songs, since I never do that and I'm more interested in generating interest in this site via my reviews. (Not that I'm reaching hundreds of people or anything, but if you keep at something... maybe some day someone new will wander by.)

Thanks again.

[Lunkhead]

That's actually pretty cool, if I do say so myself, which I will since it wasn't very difficult.

Looks like the background is transparent. Mind if I make it white? I may in the future make that a configurable option but for now I think I'd prefer it to be white by default.

[RangerDenni]

that's very nice looking!

[Spud]

Might I suggest:

Logo would be link back to Song Fight!
This design is approved by me, anyway (it looks like JB has already signed off, but I will let him speak to that) and I would be glad to call it "official".
I wonder what happens with very long titles?

[Billy's Little Trip]

Might I suggest:

Logo would be link back to Song Fight!
This design is approved by me, anyway (it looks like JB has already signed off, but I will let him speak to that) and I would be glad to call it "official".
I wonder what happens with very long titles?

Yeah, I like this one better. The title cover art and a visual SF logo everywhere around the WWW is a good marketing tool. Or just for subliminal purposes if nothing else.

[Lunkhead]

Spud, long titles and artist names currently wrap to additional lines, which pushes the bottom content down so it winds up hidden under the bottom edge of the iframe. My plan was to make it so they just run off to the right on their own lines and whatever goes beyond the right edge of the iframe gets hidden. I was going to try to get to that tomorrow. Your mockup leaves less room for long titles and artist names though? Looks like you've shaved 60 pixels off the width? Also, your mockup is missing the duration of the song, which shows up to the right of the seek bar when a song is playing. Or are you, by omitting it, suggesting to remove it? Personally I feel like it's nice to know how long the song is when you're listening to it. Also, personally I feel like that's a pretty humongous Song Fight! logo. What if somebody has a couple of these on one page? It might be a bit too eye catching. Bandcamp doesn't put their own logo on their players, possibly because all the links on their player go back to bandcamp.com. All the links on this player except for the "player by Song Fight! Jukebox" point to songfight.org pages. Maybe I could change the text "SONG FIGHT!" link to be an image you provide so that it's in the official font? Or if there is a font I can use via CSS and not via images that would be cool.

[Lunkhead]

OK, how about this?

Screen shot 2012-01-15 at 9.55.11 PM.png (44.77 KiB) Viewed 1747 times

Is "Impact" the right font? It seemed like a pretty good match.

[Billy's Little Trip]

@ Lunk. I always use Arial black.

[jast]

OK, how about this?

Font seems to match, but whereas Spud's layout looks kind of "cramped on purpose", yours gives me this "we just put this stuff in random places" impression. I don't really have any great alternative ideas, but one thing you could do is alternate the fight logo and the SF logo, i.e. switch between them every couple of seconds.

[RangerDenni]

My favorite font is comic sans

http://www.mcsweeneys.net/articles/im-c ... ns-asshole*

(*P.S. there's heaps of cussing in this link.)

[Spud]

@ Lunk. I always use Arial black.

Figures. It's Impact.

[Spud]

Looks pretty good, Sam.

If I was product manager, I would offer the following design suggestions, to give it a little more of that "intentional" look that Jast commented on. I am not trying to be a jerk, this is just what I do for a living.

See this figure, with guides:

1. Align the bottom of "Player by Song Fight Jukebox" with the bottom of the logo.
2. Equal border. I have implemented a five-pixel border all around.
3. Flush-right the time indicators so that they don't jump around when a song hits the 10-minute mark (it happens), and so that the right edge can be used for alignment.
4. Having done that, make the player buttons and time the same width as the Song Fight! logo (I had to push the buttons 1 pixel closer together).
5. Also having done that, make the "Player by Song Fight Jukebox" and the progress bar and time the same width also. (I made the tag line 1pt bigger to keep the box 402px wide).
6. Align the two time indicators vertically. The one on the right was one pixel lower than the one on the left.

Here is the result without guides:

[jast]

Yeah. Difficult to implement that in HTML, though. Every dog and their browser will render it differently, after all.

[Spud]

Yeah. Difficult to implement that in HTML, though. Every dog and their browser will render it differently, after all.

I don't see anything that can't be done in CSS... you put everything it its box and push it all to the edges.

[jast]

Yeah, but for example the bottom text in your mockup is aligned by the baseline of the text. When the browser renders stuff, the CSS doesn't really get any say in the descender height. In fact, the CSS isn't even the authority on text size and font. So, chances are that the only way to make it happen is to render the text into an image, and that's sort of yucky.

[Billy's Little Trip]

@ Lunk. I always use Arial black.

Figures. It's Impact.

Good to know. I've been using Arial Black on the cover art from day one. You should have said something sooner, Spud. You should have said, hey, BLT, start using Impact. Arial Black doesn't have my kind of girth I can get a grip on.

[Lunkhead]

Good point about right aligning the times. I will do that for sure. I don't really feel like doing much more with this though, frankly. I copied Bandcamp's player, and if it's good enough for them then it's good enough for me. But if you (Spud, or jast, or anybody) want to take my HTML and CSS and change them to what you think is better and post that, I'd be happy to take a look at that.

[Billy's Little Trip]

You guys need to think outside the box, literally. Everything is squares and rectangles. If I knew how to do this kind of stuff, I'd make an imbedded player look like a pair of boobs. Left nipple is play, right nipple is volume, and you have to motorboat them with your cursor to go to the next song.

....oh, and no boring meters, they'd jiggle and bounce to the beat. I'd name my design, BLTeets.

[Spud]

Billy, I can't point out everything.

If you download or even view the logo on the main page, you will see that the name of the file is sf_logo_impact_ass2.GIF. "sf_logo" should be clear, "impact" should give you a clue, and I have no idea, really, what "ass2" might mean.



As long as we're at it, I might as well let you know that you've got the color wrong. Should be C60000, not FF0000, or 198,0,0. I realize that saving as jpg sometimes alters this slightly, but it shouldn't be WAY off...

There is another question regarding letter spacing and the proportions of the font. If you study the original logo, you will see that the aspect ratio on the word "SONG" is different than the aspect ratio on the word "FIGHT!", in order to fit one over the other. This is part of what gives the logo its character (no pun intended). When you string then out into one long line (which I do NOT prefer for this reason, among others), you have to pick one, or find a common ground. When I have to do it, I go somewhere in between. You seem to prefer the FIGHT! spacing and aspect, which is OK. Most people go with the SONG spacing and aspect, which I find too wide. No solid rules here. Just make it look good.


On the other hand, I am not saying that every time the words SONG FIGHT! appear in cover art, they should be in IMPACT at C60000. Use your judgement. Often, that would just not work with the art, and that's fine. Many good covers take a completely different take on the font, and I assumed that that was what you were doing.

Also, you should learn how to size images. Take a look at my sample vs. your sample. Also, compare these two, for example:



If you're having a hard time seeing the difference, check out this enlargement:



But hey, I can't be the goddamned design police can I? Who would submit anything? I think I am annoying Sam already...