Embedding Music on a Blog

Ask questions and get answers about how to make music in any particular way. Hardware or songwriting or whatever.
User avatar
nyjm
Ice Cream Man
Posts: 1066
Joined: Thu Mar 17, 2005 6:14 am
Instruments: acoustic guitar, electric guitar, synth, various MIDI instruments
Recording Method: Reaper, Line 6 POD, GLS Audio 57 and 58
Submitting as: noah mclaughlin, Ford's Theater Disaster, Juliet's Happy Dagger
Location: atlanta, ga
Contact:

Embedding Music on a Blog

Post by 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. :-)
"You sound like the ghost of David Bowie." - SchlimminyCricket | it was a pleasure to burn | my website | Juliet's Happy Dagger
User avatar
roymond
Beat It
Posts: 5188
Joined: Sat Sep 25, 2004 3:42 pm
Instruments: Guitars, Bass, Vocals, Logic
Recording Method: Logic X, MacBookPro, Focusrite Scarlett 2i2
Submitting as: roymond, Dangerous Croutons, Intentionally Left Bank, Moody Vermin
Pronouns: he/him
Location: brooklyn
Contact:

Re: Embedding Music on a Blog

Post by 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.
roymond.com | songfights | covers
"Any more chromaticism and you'll have to change your last name to Wagner!" - Frankie Big Face
User avatar
Lunkhead
You're No Good
Posts: 8104
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Embedding Music on a Blog

Post by 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.
User avatar
jast
Ice Cream Man
Posts: 1325
Joined: Tue Jul 29, 2008 7:03 pm
Instruments: Vocals, guitar
Recording Method: Cubase, Steinberg UR44
Submitting as: Jan Krueger
Pronouns: .
Location: near Aachen, Germany
Contact:

Re: Embedding Music on a Blog

Post by 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.
User avatar
nyjm
Ice Cream Man
Posts: 1066
Joined: Thu Mar 17, 2005 6:14 am
Instruments: acoustic guitar, electric guitar, synth, various MIDI instruments
Recording Method: Reaper, Line 6 POD, GLS Audio 57 and 58
Submitting as: noah mclaughlin, Ford's Theater Disaster, Juliet's Happy Dagger
Location: atlanta, ga
Contact:

Re: Embedding Music on a Blog

Post by 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.
"You sound like the ghost of David Bowie." - SchlimminyCricket | it was a pleasure to burn | my website | Juliet's Happy Dagger
User avatar
Lunkhead
You're No Good
Posts: 8104
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Embedding Music on a Blog

Post by 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.
User avatar
jast
Ice Cream Man
Posts: 1325
Joined: Tue Jul 29, 2008 7:03 pm
Instruments: Vocals, guitar
Recording Method: Cubase, Steinberg UR44
Submitting as: Jan Krueger
Pronouns: .
Location: near Aachen, Germany
Contact:

Re: Embedding Music on a Blog

Post by 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.
User avatar
Lunkhead
You're No Good
Posts: 8104
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Embedding Music on a Blog

Post by 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.
User avatar
nyjm
Ice Cream Man
Posts: 1066
Joined: Thu Mar 17, 2005 6:14 am
Instruments: acoustic guitar, electric guitar, synth, various MIDI instruments
Recording Method: Reaper, Line 6 POD, GLS Audio 57 and 58
Submitting as: noah mclaughlin, Ford's Theater Disaster, Juliet's Happy Dagger
Location: atlanta, ga
Contact:

Re: Embedding Music on a Blog

Post by 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.
"You sound like the ghost of David Bowie." - SchlimminyCricket | it was a pleasure to burn | my website | Juliet's Happy Dagger
User avatar
Lunkhead
You're No Good
Posts: 8104
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Embedding Music on a Blog

Post by 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.
User avatar
Spud
Hot for Teacher
Posts: 4770
Joined: Fri Sep 24, 2004 10:25 am
Instruments: Bass, Keyboards, eHorn
Submitting as: Octothorpe
Location: Seattle
Contact:

Re: Embedding Music on a Blog

Post by 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...
"I only listen to good music. And Octothorpe." - Marcus Kellis
Song Fight! The Rockening
User avatar
jb
Hot for Teacher
Posts: 4158
Joined: Sat Sep 25, 2004 10:12 am
Instruments: Guitar, Cello, Keys, Uke, Vox, Perc
Recording Method: Logic X
Submitting as: The John Benjamin Band
Pronouns: he/him
Location: WASHINGTON, DC
Contact:

Re: Embedding Music on a Blog

Post by 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
blippity blop ya don’t stop heyyyyyyyyy
User avatar
Lunkhead
You're No Good
Posts: 8104
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Embedding Music on a Blog

Post by 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
Screen shot 2012-01-14 at 2.31.46 PM.png (92.94 KiB) Viewed 1555 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.
User avatar
Lunkhead
You're No Good
Posts: 8104
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Embedding Music on a Blog

Post by 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
Screen shot 2012-01-14 at 3.03.05 PM.png (61.79 KiB) Viewed 1551 times
User avatar
jb
Hot for Teacher
Posts: 4158
Joined: Sat Sep 25, 2004 10:12 am
Instruments: Guitar, Cello, Keys, Uke, Vox, Perc
Recording Method: Logic X
Submitting as: The John Benjamin Band
Pronouns: he/him
Location: WASHINGTON, DC
Contact:

Re: Embedding Music on a Blog

Post by jb »

I'm ok with that Sam.
blippity blop ya don’t stop heyyyyyyyyy
User avatar
Lunkhead
You're No Good
Posts: 8104
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Embedding Music on a Blog

Post by 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
Screen shot 2012-01-14 at 5.35.13 PM.png (44.15 KiB) Viewed 1542 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?
User avatar
Spud
Hot for Teacher
Posts: 4770
Joined: Fri Sep 24, 2004 10:25 am
Instruments: Bass, Keyboards, eHorn
Submitting as: Octothorpe
Location: Seattle
Contact:

Re: Embedding Music on a Blog

Post by 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 only listen to good music. And Octothorpe." - Marcus Kellis
Song Fight! The Rockening
User avatar
jb
Hot for Teacher
Posts: 4158
Joined: Sat Sep 25, 2004 10:12 am
Instruments: Guitar, Cello, Keys, Uke, Vox, Perc
Recording Method: Logic X
Submitting as: The John Benjamin Band
Pronouns: he/him
Location: WASHINGTON, DC
Contact:

Re: Embedding Music on a Blog

Post by jb »

Spud wrote: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.
blippity blop ya don’t stop heyyyyyyyyy
User avatar
Spud
Hot for Teacher
Posts: 4770
Joined: Fri Sep 24, 2004 10:25 am
Instruments: Bass, Keyboards, eHorn
Submitting as: Octothorpe
Location: Seattle
Contact:

Re: Embedding Music on a Blog

Post by Spud »

jb wrote:
Spud wrote: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
"I only listen to good music. And Octothorpe." - Marcus Kellis
Song Fight! The Rockening
User avatar
Lunkhead
You're No Good
Posts: 8104
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Embedding Music on a Blog

Post by 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.
User avatar
Spud
Hot for Teacher
Posts: 4770
Joined: Fri Sep 24, 2004 10:25 am
Instruments: Bass, Keyboards, eHorn
Submitting as: Octothorpe
Location: Seattle
Contact:

Re: Embedding Music on a Blog

Post by 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.
"I only listen to good music. And Octothorpe." - Marcus Kellis
Song Fight! The Rockening
User avatar
RangerDenni
Ice Cream Man
Posts: 1214
Joined: Mon Apr 19, 2010 1:00 am
Instruments: vocals, piano, drums, bit o’gitfiddle, other noisy stuff
Recording Method: cubase, pianoteq, desperation.
Submitting as: a mysterious presence of quiet silence and apology reverb
Pronouns: She/Her They/Them
Location: Austin, TX
Contact:

Re: Embedding Music on a Blog

Post by RangerDenni »

It'll be good to link back appropriately and in a snazzy fashion when blogging :)
"Really interesting how the point you’re making slowly emerges like Martin Sheen from the mud in Apocalypse Now..." ~j$
Post Reply