2

edit: condensed question: How can I create a flash-free continuous music player (one that is uninterrupted as the user navigates the site)

So I want to set up a website with an audio player that behaves in much the same way as that of many flash players on sites such as hypem.com and pitchfork.com, however I want to avoid Flash altogether if possible so I can retain compatibility with Apple mobile devices. (edit: mind you i am not creating something mobile-specific! just a webpage with an audio-player feature that can be used on an Ipad/Iphone/Ipodtouch)

I've been looking everywhere for info and so far some people have thrown around that Javascript might provide a solution, but all the players I've found use Javascript AND Flash and do not address the continuous play issue.

paulj
  • 51
  • 1
  • 12
  • 1
    It is certainly possible as Pandora does it! - http://www.engadget.com/2011/09/21/pandora-rolls-out-html5-redesign-to-everyone-drops-40-hour-list/ – mrtsherman Nov 15 '11 at 03:48
  • As I understand it, Pandora still use Flash for the actual audio streaming, but has replaced the Flash UI they had earlier. Some comments on the article you link to says so, and a quick google search too: http://www.google.com/search?q=pandora+%22still+requires+flash%22 – Lars Blåsjö Nov 15 '11 at 17:27

2 Answers2

0

Take a look at the html5 <audio> tag.

http://www.catswhocode.com/blog/mastering-the-html5-audio-property

Try and keep your SO questions specific. Ask your site layout question in another question.

https://stackoverflow.com/faq

Community
  • 1
  • 1
mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • Thanks for the link but I have already learned about those properties. Sorry, I should have condensed my question as I realize it may have appeared unclear especially if someone is unfamiliar with hypem or pitchfork. My question is fairly specific: Is it possible to make a flash-free *continuous* audio player? keyword: continuous; uninterrupted play as someone navigates page to page – paulj Nov 15 '11 at 17:13
  • @user1046613 - when saying you should be specific I meant that you shouldn't ask site layout questions in the same breath that you ask about continuous audio. And this does answer your question. The HTML5 audio tag can do this and it is javascript/html only. I can put together a jQuery example if you like or qw3n provided you with a strict js only solution. – mrtsherman Nov 15 '11 at 17:20
  • Ok, i edited my post so it's a bit more concise. Thanks for your help, I can test it out myself and see how it goes, I just didn't know it was capable of uninterrupted play because I hadn't found anywhere that specified this functionality. Your example of pandora and your persistence has solidified that it is possible and I will attack the HTML5 audio tag to see what I can do! – paulj Nov 15 '11 at 17:33
  • Here is an example - http://jsfiddle.net/yeEXZ/ . You set new src attribute for the audio player. Then you have to call load and play. To make it continuous you would probably use ajax to get the next song. If you need help with the ajax portion ask in another question. Good luck. – mrtsherman Nov 15 '11 at 18:40
0

Here is some code that should get you on the right track

First the html audio element supported by all the browsers but in the IE family only IE9

<audio id="test" controls="controls" type="audio/ogg">Your browser doesn't support the audio tag.</audio>

Then the javascript

window.onload=function(){
var pre='';
var arr=['songTitle1','songTitle2','songTitle3'];
var ind=0;
var ele=document.getElementById('test');
ele.src=(ind++)+'.ogg';
ele.play();
//when the song ends start a new one
ele.onended=function(){
  ele.src=(ind++)+'.ogg';
  //if you are done with all the songs loop back to the beginning.
  //Or you could add some code to load more songs from the server
  ind=ind==arr.length?0:ind;
  ele.play();
}

}

This just takes an array of song titles and plays through them assuming that you have the ogg files in the same directory as the html file. Right now I think ogg is the only format that you can play on all browsers.

qw3n
  • 6,236
  • 6
  • 33
  • 62