Looking for ideas how to rebuild my "radio"

[thesoundsmith]

My site, http://www.thesoundsmith.com/ has, as a feature, a mini "radio" station one can call up from the main menu displayed on all pages. On a PC, it calls up a small browser window sort of car-radio shaped, with a playlist of every song on my site worth listening to (IMO). Most of them have a lik to my shopping cart. You can select a new, random song, go back to the previous one or go to the Zencart shopping cart to download the tune.It is powered by an XML-based playlist selecting audio files. A short version is below:

<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/"><channel>  <title>DashRadio - The Soundsmith Channel</title>  <link>http://www.thesoundsmith.com</link><item>   <media:content url="wavs/rad/lcancestors.mp3" />	 <media:thumbnail url="pix/lcicon.jpg" />   <title>Dance of the Ancestors</title>   <description>Life Cycles</description><link>http://www.thesoundsmith.com/private/zcart/index.php?main_page=product_music_info&cPath=62&products_id=240</link></item><item>   <media:content url="wavs/rad/lcdragons.mp3" />	 <media:thumbnail url="pix/lcicon.jpg" />   <title>Hangin' with the Dragons</title>   <description>Life Cycles</description><link>http://www.thesoundsmith.com/private/zcart/index.php?main_page=product_music_info&cPath=62&products_id=240</link></item>...  <item>	  <media:content url="wavs/esp2/15.Fire_And_Rain.mp3" />	 <media:thumbnail url="pix/esp2icn.gif" />	  <title>Fire and Rain</title>	 <description>Especially For You Too</description>  <link>http://www.thesoundsmith.com/private/zcart/index.php?main_page=product_info&cPath=71&products_id=297</link></item></channel></rss>

I have just (mostly) finished upgrading to HTML5 playback so iOS devices can view the site. But I cannot figure out how to convert the DashRadio window. It will open on an iPad, but full-screen and ugly, and of course, does not play, nor does it apparently attempt to implement the associated javascript.At this point, I'd be happy if i could offer a radio without links to the downloads, perhaps a simple on-off swith on the menu, but i don't see how. (it's a php menu, if that matters...)Any ideas, suggestion are appreciated - I am NOT a cometent js programmer, so please don't assume I know what I'm talking about all the time. I do a lot of copy/pasting and testing to get these scripts to work, and don't always know why they do - and almost never know why they do NOT...Thanks.

[justsomeguy]

You're using a Flash music player, iOS does not support Flash. You'll need to use the HTML5 audio features to support iOS. http://www.google.com/search?client=opera&q=html5+audio+for+ios&sourceid=opera&ie=utf-8&oe=utf-8&channel=suggest

[thesoundsmith]

The "radio" window uses the JW Player v5, which supports HTML5 with Flash as a fallback, but I don't know how to re-script the playlist to recognise iOS requirements- just a part of my ignorance, I'm afraid, my main programming language was pre-Microsoft FoxPro,,,. But beyond that, the basic design will need to change,it does not appear that the main menu is a logical place, as iOS doesn't support little independent floating playback windows like Win7... That's kind of my question at this point - how can I incorporate the idea into a browser that does not support independent windows, and how do I change the XML script (or what do I change it into...) When I have the design concept, then I'll worry about the implementation, right now I just don't see how to fit it into an iOS-friendly design. Again, any help appreciated. and thanks for the link, there are some helpful nuggets there.

Edited March 22, 2013 by The Soundsmith

[justsomeguy]

If you want to avoid the popup, then you could have the link to launch the player instead inject it on the page somewhere, in a div or something, or just have a regular link that navigates to another page that just has the player on it. For JW Player, the only documentation I see is for version 6, if that's something you purchased then you would probably want to ask them how to inject the player into a page that is already loaded if that's the route you want to take. For the code on your site, I don't see JW Player code, I only see it using swfobject to embed the Flash movie. Maybe there is server-side code that sends different markup based on the browser.

[thesoundsmith]

I used to use a couple php scripts to load the players, they worked great for .flvs but I have had to start from scratch with the mp4s. The playlists and the whole setup are different and I have not yet mapped my old scripts into the new system. But for now, this setup lets iPad viewers access the pages, and the radio just doesn't work. I can live with that for now.The DashRadio implementation incorporates all the other pieces I need to make the rest of it work. I expect to put the "radio" on each page, but it would need to play through when a page is changed - if a song is playing, it should not be interrupted. I was thinking of placing it at the bottom left of each page, replacing the Link Legend text.. But I assume that requires global variables and external event-listeners to be aware of the other players as well., so if you play a track on the body of the page, it shuts down the radio.i work best from example; JW had great examples of what I needed, but they don't translate into this problem (in a way i can understand.) I think I will spend some more time on the Safari link you sent, I may get some inspiration there.Thanks again.

[thesoundsmith]

I'm sorry, I just cannot see how to map the two ways of accessing the API together. I have a fiarly involved bunch of script tha culminates with this call - and a long stream of flashvars, params and attributes:

		    var attributes = {				    id:"player1",				    name:"player1"		    }		    swfobject.embedSWF("player.swf", "placeholder1", "540", "270", "9.0.115", false, flashvars, params, attributes);}</script></head><body onload="createPlayer('xml/mysonglist.xml')">

The page can be seen here: http://www.thesoundsmith.com/rhinoOLD.htm This works great until I address iOS, so I am trying to replace the swfobject embed call with some equivalent call to the API The code I have working to replace this is below, but the playlist is inline, and I cannot address the player except manually. I need to play specific songs on the playlist as demonstrated on the working page.

<div id="container">Loading the player...</div><script type="text/javascript">    jwplayer("container").setup({	    flashplayer: "jwplayer/player.swf",	    playlist: [	    { file: "wavs/rhino/loveisblind.mp3", image: "pix/rhino72.jpg", title: "Love Is Blind", description: "Rhinoblossom" },	    { file: "wavs/rhino/celebrationblues.mp3", image: "pix/dpic4.jpg", title: "Celebration Blues", description: "Rhinoblossom" },	    { file: "wavs/rhino/damnyoureyes.mp3", image: "pix/rhino72.jpg", title: "Damn Your Eyes", description: "Rhinoblossom" }	    ],	    skin: "dashskin/dashskin.zip",	    "playlist.position": "right",	    "playlist.size": 260,	    height: 270,	    width: 540 ,	    repeat: 'list'    });</script>

This page can be seen at: http:// http://www.thesoundsmith.com/rhino.htm iOS can access the music, but the direct calls on the lower part of the page are, of course, ignored.How do I call the "container" player - I left it container to differentiate - to map into the existing javascript controls? I only need server-based MP3s. Is it possible to write the call so I don't have to do a major rewrite of the 200-odd songs in the xml playlist? (I don't mind chaning "description" to "attributes" or the like, but I want to avoid hand-retiooling.Thanks as always.

[justsomeguy]

I'm not sure which part you're referring to that isn't working. If you want to keep the thing playing as people navigate around the site then you'll need to put everything in a frame so that only one of the frames is changing. I'm not sure how well mobile browsers deal with frames though.

[thesoundsmith]

Sorry, I think I have had to change focus, there may not BE a solution to a site-wide player. But what I am trying to do now is regain the ability to construct a playlist in XML that I can select songs from by calling sendEvent('ITEM',x) from a link elsewhere on the page. I have this in the old code on a number of pages, and planned on adding more, but the player as currently implemented cannot see these commands.:

  <h5><a  class="tune" href="javascript:player.sendEvent('ITEM',1)">Celebration Blues</a></h5><p class="line2">Written for the 1993 Monterey Bay Blues Festival, this turned out to purely serendipitously echo the theme for that year, "Celebrate the Blues."</p>

This works great on the rhinoOLD page with the older player, but to make it work on the updated one, I need to map the jwplayer "container" script call into the other player's code. Instead of the swfobject imbed. It seems that the embed is the equivalemt of the '.setup', but I'm not familiar with the syntax of that call, so I can't just re-build it. (And it seems every time they roll out an update, they use a different method to call the API, so all the previous work had to be rewritten.)It appears that in iOS, the radio will only work page at a time, but if I can get a fix on this part of the concept, I may be able to find ways around the iOS issues, or just give up - but at least have my pages working properly.I know I am behind in the prgramming realm, I stopped 12 years ago when I retired, and now try to focus on the music. I only update when technically necessary, and next round, if there is one, will probably need someone with a more up-to-date skillset. But right now, I'm what I've got. So if there is a simple way to remap this call to invoke the player I'd love to see it, I do learn best from example.Sorry to take up so much of your time, but if I get this cross-mapped successfully, I can deal with the rest.

[justsomeguy]

There's no object called player defined. According to Chrome, there is a jwplayer object, which has a method called getPlayers that returns an array of players, in this case only one. I can type in commands like jwplayer.getPlayers()[0].play() to start it, or jwplayer.getPlayers()[0].playlistItem(2) to play a certain item on the playlist. Is that what you're looking for? You can set player equal to jwplayer.getPlayers()[0] after you do the setup if you want to use that as a shortcut. The player object does not have a sendEvent method defined on it.

[thesoundsmith]

That's what I was looking for. That syntax and approach, I can make it work from there. Thanks again.

[justsomeguy]

For your reference, the way I found that out was using Google Chrome's developer tools, specifically the Javascript console. It will execute or evaluate whatever you type in the context of the page. I typed "player" and hit enter and it said it was undefined. I looked at the source for the jwplayer.js file and saw that it was creating an object called jwplayer, so I typed "jwplayer.", and once I hit the dot Chrome popped up with an auto-complete list of properties and methods on the jwplayer object. One of the things listed was a method called getPlayers, so on the console I typed jwplayer.getPlayers(), hit enter, and the return value of that function was an array with a single object in it (Chrome calls it b.api). I expanded b.api by clicking the arrow to the left of it, and it popped down with all of the properties and methods on that object. You might want to go through that list to see if there's anything else you want to use. You'll see things like the config object, which if you expand that you'll see all the settings you sent to the setup method. There are a bunch of get methods to get various things from the player (getCurrentItem, getDuration, getPlaylist, etc), and methods to control the player like play, playlistItem, playlistNext, seek, setMute, etc.

[thescientist]

there is documentation on it, which can help when looking up specific features/configuration options, etc.http://www.longtailvideo.com/support/jw-player

[thesoundsmith]

Great info, thanks to you both. I do not use Chrome, but it looks like I have a real reason to install. I have the majority of my site working fine now (the "radio" that started this is still in limbo, but I have some ideas...) The jw help I finally found the correct version (there is a different set for each version of the player) But the Chrome info is really useful.

Edited March 28, 2013 by The Soundsmith