Other - Tweaking the SCM music player for indiv. track info

Hey y'all!

Warning: while I'm at ease with HTML + CSS, I know very little JS. Please forgive me for being ignorant on these matters...

I've just implemented a nice open-source, JS-based radio on our Wordpress website: SCM Music Player (Sorry, I'd like to provide an URL, but it's blocked in my post... Easy to Google, though). Among other qualities, it enables one to browse around on the site while streaming.

Our website is at: www(dot)meridian(hyphen)online(dot)com

This radio is meant to enhance the browsing experience of our website, but also to give an introduction to the various artists who composed the music being played. Therefore, what I'd like to do is 'add' an extra piece of info to each track: a link to a page on our website presenting the musician, the contents of the track, etc.

For example, when the track "Transfiguration" is being played, I would like the music player to include a link to the page discussing this track.

Now I've included to the player a hard-coded link to the page presenting *all* of the available tracks; but I don't know how to replace this by a customized link that would directly lead to the post discussing the song.

Right now, the player works this way: in the header of my Wordpress theme, I must add a snippet of code, including the names + URL of each music file ("{'title':'Transfiguracão - by Cordel do Fogo Encantado','url':'(.../meridian-online/transfigurac-o-cordel-do-fogo'}" etc.).

I suppose I would have to find a way to add an extra bit of metadata for each track — namely, the URL to the explanatory page. But I don't know how to modify the JS files accordingly.

Any advice on how to handle this?
(I've written the plugin developer, but after many weeks, still no reply)

Cheers,
D-

From what I can tell; the script is creating an iframe to display the player on your site. So my idea would be this (since you do not have any support from the plugin developer)... use HTML5 window.postMessage() to retrieve the text from this tag:



which resides in this iframe ("Castle - by Dear Eloise", happened to be the singer and song that was playing, when I inspected the iframe element). Then display the singer and the song back into your page. I would create an array (either static or dynamic) of musician's names and corresponding links to the musician's website; then use a regex to match the musician's name (from the postMessage()... which I would probably put into a variable, to make it easier to compare, for the regex) with the link in the array and display that along beside the singer and song, in your website. This would all be put in a function; that would update ever X amount of seconds (to create a real time display [within your website] of the singer, song, and singer's website).

Off the top of my head; that sounds like a winner to me - good luck.

Hey man,
Thanks a lot for taking the time to write this reply.
The problem is, I don't know the first thing about Javascript... I looked up the terminology you mention, and I get a rough idea of what to do, but with my very deep ignorance of this language I will need... many, many hours (days possibly) in order to have anything happen.

I don't suppose there would be any easier way, right? If not, I'll just have to wait until I can coax someone into doing this for me! I'm sure it's a matter of minutes for someone who's really into this...

Cheers,
D-

Actually, after further pondering on my response to your question; I realized that you would need to have access to add a small piece of code to the plug-in website and you would not be able to do that; I am almost sure of that. My other idea would be to create a timed function that would be based on the song's length; that would update an element's innerHTML... and display the artist and the song title. Of course; you could not obtain the time dynamically; hence it would have to be hard coded or static... within your page. This also would not be an absolute real time correlation with the plug-in song's length... as I mentioned earlier... you cannot access the DOM of the iframe (that the plug-in creates, to display the music player widget). In my opinion; after reviewing your site and considering your limitation; I think your better off with the one page with all the artist and song titles, in it. Or... if I was you; I would try to contact the plug-in author/developer and present them with what your trying to do and ask them if they might have any suggestions.

Yes, I think I'll try to pester the plug-in developer enough so that he'll agree to help me out on this.

Thanks again, anyhow!