Question

I have a music player that links to a song using the following syntax:

<li><a href="" data-src="http://s3.amazonaws.com/audiojs/02-juicy-r.mp3">title</a></li>

Is there any way that I could have that executed server side and then be displayed like (see below) for the user?

While searching, I ran across this…I like the idea behind having an external file that has the data…like:

<?php
// get-file.php
// call with: http://yoururl.com/path/get-file.php?id=1
$id = (isset($_GET["id"])) ? strval($_GET["id"]) : "1";
// lookup
$url[1] = 'link.mp3';
$url[2] = 'link2.mp3';
header("Location: $url[$id]");
exit;
?>

then using: http://yoururl.com/path/get-file.php?id=1 as the link…the only problem is that when you type http://yoururl.com/path/get-file.php?id=1 the user goes straight to the file…is there any way to disable that ability…maybe some code on get-file.php itself?

Answer 1

Ok, so I did a combination of things that I am satisfied with…although not completely secure, it definitely helped me obscure it quite a bit.

First of all, I am using the AudioJS player to play music – which can be found: http://kolber.github.com/audiojs/

Basically what I did was:

1. Instead of using “data-src” as the path to my songs I called it “key”, that way people wouldn’t necessarily think it was a path.
2. Instead of using “my-song-title” as the name of the songs, I changed it to a number like 7364920, that way people couldn’t look for that in the source and find the url that way.
3. I added + “mp3” to the javascript code after all of the “key” variables, that way I would not have to declare it in obfusticated link.
4. I used a relative path like “./8273019283/” instead of “your-domain.com/8273019283/”, that way it would be harder to tell that I was displaying a url.
5. Added an iTunes link to the href, that way people might get confused as to how I was pulling the file.

So, now my inline javascript looks like:

<script type="text/javascript">
        $(function() {
            // Play entire album
            var a = audiojs.createAll({
                trackEnded: function() {
                    var next = $("ul li.playing").next();
                    if (!next.length) next = $("ul li").first();
                    next.addClass("playing").siblings().removeClass("playing");
                    audio.load($("a", next).attr("key") + "mp3");
                    audio.play();
                }
            });
            // Load the first song
            var audio = a[0];
            first = $("ul a").attr("key") + "mp3";
            $("ul li").first().addClass("playing");
            audio.load(first);
            // Load when clicked
            $("ul li").click(function(e) {
                e.preventDefault();
                $(this).addClass("playing").siblings().removeClass("playing");
                audio.load($('a', this).attr('key') + "mp3");
                audio.play();
            });
        });
    </script>

My link looks like:

<a href="<?php $link = 'http://itunes.apple.com/us/album/falling/id504779876?i=504779883&uo=4'; $obfuscatedLink = ""; for ($i=0; $i<strlen($link); $i++){ $obfuscatedLink .= "&#" . ord($link[$i]) . ";"; } echo $obfuscatedLink; ?>" target="itunes_store" key="<?php $link = './8249795872/9273847591.'; $obfuscatedLink = ""; for ($i=0; $i<strlen($link); $i++){ $obfuscatedLink .= "&#" . ord($link[$i]) . ";"; } echo $obfuscatedLink; ?>">Falling</a>

When you load it up in the browser and you view the source you’ll see:

<a href="&#104;&#116;&#116;&#112;&#58;&#47;&#47;&#105;&#116;&#117;&#110;&#101;&#115;&#46;&#97;&#112;&#112;&#108;&#101;&#46;&#99;&#111;&#109;&#47;&#117;&#115;&#47;&#97;&#108;&#98;&#117;&#109;&#47;&#102;&#97;&#108;&#108;&#105;&#110;&#103;&#47;&#105;&#100;&#53;&#48;&#52;&#55;&#55;&#57;&#56;&#55;&#54;&#63;&#105;&#61;&#53;&#48;&#52;&#55;&#55;&#57;&#56;&#56;&#51;&#38;&#117;&#111;&#61;&#52;" target="itunes_store" key="&#46;&#47;&#56;&#50;&#52;&#57;&#55;&#57;&#53;&#56;&#55;&#50;&#47;&#57;&#50;&#55;&#51;&#56;&#52;&#55;&#53;&#57;&#49;&#46;">Falling</a>

Then when you use Web Inspector or Firebug you’ll see:

<a href="http://itunes.apple.com/us/album/falling/id504779876?i=504779883&amp;uo=4" target="itunes_store" key="./8249795872/9273847591.">Falling</a> - *which doesn't completely give the url away

Basically what I did was make the link look like it’s an api-key of some-kind. The cool thing is that you can’t just copy the link straight from view source or straight from Web Inspector/Firebug. It’s not fool-proof, and can definitely be broken, but the user would have to know what they’re doing. It keeps most people away, yet still allows the player to get the url it needs to play the song 🙂

*also, I got the php obfusticate script from somewhere on Stack Exchange, just not sure where.