Band website advice

a1000pigeons

Hi,
I'm a student developing a website for a number of bands (maybe 4). I'm looking for advice on how to enable viewers of the site to play audio from each band. I know how to embed a single audio track but am not sure how set up a player on home page or each bands page allowing the user to select one of possibly four tracks (similar to myspace?). The other big concern is cross browser compatibility and not using flash (needs to be viewable on iPhone). Basically I need a player that is easy to set up and bulletproof...thanks in advance.

Freddio

A simple solution is to open a popup to navigate through basic pages with the different audio files embedded. An alternative is to use iFrames.

Giblet

Jesus no!

There are plenty of flash players out there that you could use, or just use simple links to the songs themselves, most people might handle the audio themselves through the browser.

Fad

a1000pigeons wrote: »

Hi,
I'm a student developing a website for a number of bands (maybe 4). I'm looking for advice on how to enable viewers of the site to play audio from each band. I know how to embed a single audio track but am not sure how set up a player on home page or each bands page allowing the user to select one of possibly four tracks (similar to myspace?). The other big concern is cross browser compatibility and not using flash (needs to be viewable on iPhone). Basically I need a player that is easy to set up and bulletproof...thanks in advance.

Could you use a think like soundcloud (Or a similar player) where you host it on the band's soundcloud page and just embed it on the website?

Freddio

Giblet wrote: »

Jesus no!

There are plenty of flash players out there that you could use

Flash doesn't work on an iPhone

Giblet wrote: »

, or just use simple links to the songs themselves, most people might handle the audio themselves through the browser.

That's what I said, why are you saying "Jesus no!"?

a1000pigeons

Thanks for the advice, I was thinking of using html5 and providing different formats for various browsers and then a fallback to a flash player for IE etc. Not sure though about a player for html5, have embedded single songs with audio tags but would like a playlist setup, is this possible with javascript? Another problem is that the clients would like the audio to continue playing while going from page to page on the site??? I think this might be possible if the audio playing opens in a seperate window though might this contradict the playlist ui. Hopefully someone with web experience might have done this a thousand times and have a solution. If anyone has sample code they might pm to me or can elaborate a bit more that would be great as I'm a bit of a rookie, that's in a bit of a pickle. Thanks again!

EDIT: Actually just came across 'jPlayer' a html5 jquery audio/video player with flash fallback - could be the answer to all my problems, anyone ever use this (www.jplayer.org) ?

Giblet

Freddio wrote: »

Flash doesn't work on an iPhone



That's what I said, why are you saying "Jesus no!"?

Embedding (if using embed tag) and iFrames.

I would go with Flash with HTML5 fallback, As the HTML5 audio tag has less support at the moment and some browsers don't support the same formats as others. It would making switching easier, but it really comes down to how you want to detect support and which approach you would be happy with.
Also, providing a link directly to the mp3 if you detect no Flash or Audio tag support.

I'm not a big fan of flash and it's a shame we only now have a half working audio api for html.

a1000pigeons

Hi,
Just tried installing jplayer and it seems the players skin CSS is not being read, only a HTML list appears. I'm just wondering has anyone else experienced this or used jplayer. I'm trying to determine if it's me or a bug, as I can't see why it's not working for me.

Liam Byrne

Giblet wrote: »

Jesus no!

There are plenty of flash players out there that you could use

Er, no, because

a1000pigeons wrote: »

.....not using flash (needs to be viewable on iPhone).

conor.hogan.2

http://podcastr.com/weirdthings

thats done in html5, and it also remembers where you were listening if you switch from your phone to pc.

should work in all the new browsers and then just use soundclick or some random flash alternative for anyone who needs it.

Giblet

I guess you read my most recent reply there Liam.

How about Firefox not supporting MP3...



This is an example of how it may be possible.
Just a quick overview, no real code here.

<style>

.no-js .AudioLinks
{
    display:block;
}
</style>

<script src="modernizer.js"></script>
<script src="swfobject.js"></script>
<script>
//SWFObject Setup for AudioContent
</script>
<div id="AudioContent" class="hidden">
<script>
if(Modernizer.supportsAudio)
{
    $("audio").show();
}
else
{
   $(".AudioLinks").show();
}

</script>
</div>
<audio class=hidden>
<source>blah1</source>
<source>blah2</source>

</audio>
<div class="AudioLinks">

</div>

Modernizr is a JS library which helps with feature detection.
A bit overkill, but basically in conjunction with jQuery in this example, SWFObject checks for Flash, or displays alt content if Flash not available. Alt content runs script which uses Modernizr to check to Audio tag support. If no support, show the Audiolinks. The default for no javascript is to show Audiolinks. You can also do it backwards, check HTML5 Audio and sources, then check flash in the fallback of the audio tag and show links in alt content. Embed tags don't work in Modern IE

This still won't detect codec support, only NETWORK_NO_SOURCE if it didn't work, so you may have to provide duplicate sources.

tom_odoherty

Hi there.

One possible fix would be to use embedded players from Bandcamp for the music. They recently switched from Flash-based players to iframes, so it'll work on iOS devices. One possible disadvantage here is that the Bandcamp players have defined pixel widths, whereas the SoundCloud players scale in width to fill their container element.