Artist and Song search of Spotify and iTunes via web URL

Posted on Updated on

This took me a while to find out how to do, so I thought I’d share my research to you.

I had a problem where I wanted users to be able to click on a link and it would open up the Spotify, or iTunes program to the search results of the values I passed it.

As mentioned, this took a long while to get. The Spotify one was easy as, and they should be commended for their simplicity. The iTunes one was not as easy to find.

So, this is my resulting code example, which I hope will help you in the future.

See this example work in JSFiddle
https://jsfiddle.net/vr_driver/e4q2nme3/13/

HTML Code

<a href="https://search.itunes.apple.com/WebObjects/MZSearch.woa/wa/advancedSearch?genreIndex=1&media=music&restrict=true&submit=seeAllLockups&entity=songs&allArtistNames=tobyMac&allTitle=Love+Broke+Thru"><i class="fa fa-apple"></i>Apple iTunes</a>
<a href="spotify:search:tobyMac+Love+Broke+Thru"><i class="fa fa-spotify"></i>Spotify</a>

PHP Source Code

$artist = "TobyMac";
$title = "Love Broke Through";
echo '<a href="spotify:search:' . str_replace(" ","+",$artist) . "+" . str_replace(" ","+",$title) . '"><i class="fa fa-spotify"></i> Spotify</a>';
echo '<a href="https://search.itunes.apple.com/WebObjects/MZSearch.woa/wa/advancedSearch?genreIndex=1&media=music&restrict=true&submit=seeAllLockups&entity=songs&allArtistNames=' . str_replace(" ","+",$artist) . "&allTitle=" . str_replace(" ","+",$title) . '"><i class="fa fa-apple"></i> iTunes</a>';

// Or so the browser opens a window and then closes it.
$iTunes_link = "https://search.itunes.apple.com/WebObjects/MZSearch.woa/wa/advancedSearch?genreIndex=1&media=music&restrict=true&submit=seeAllLockups&entity=songs&allArtistNames=". str_replace(" ","+",$artist) . "&allTitle=" . str_replace(" ","+",$title);
echo '<a href="javascript:closeOnLoad(\'' . $iTunes_link. '\');"><i class="fa fa-apple"></i></a>';

JS

<script type="text/Javascript">
function closeOnLoad(myLink)
{
    var newWindow = window.open(myLink);
    newWindow.blur();
    setTimeout
    (
	function()
	{
	  newWindow.close();
	},
	1000
    );
};
</script>

Both of these examples do 2 different things.
The Full iTunes example opens up a new window by JS and then closes it a second later. This is to allow the page to load, and then have the Apple page call the iTunes program. It then opens it to an advanced search page (which until I started playing with this stuff didn’t even know existed).

The Spotify example just opens the app directly if you have it installed – if you don’t use WordPress of course. They’ve wrecked the link in the example by removing the “spotify:search:” at the front of the link.

If this has helped you, please let me know, I’d love to hear, even send me a donation through PayPal.

Cloudflare is great – most of the time.

Posted on Updated on

So for the last month or so, I’ve given a few sites the Cloudflare boost. The DNS has come up faster, pages and the sites work much better.

However, I’ve discovered something it doesn’t work so well for…

I run GLPI and it’s great for computer digital asset management.

However today I discovered how frustrating it can be as well for certain applications. On my CMS and other static sites I have no problems with it, as it compresses the JS, CSS and HTML for speed – which is good.

But. As it turns out, GLPI doesn’t play nicely with a feature that CloudFlare offer. Granted, they call it BETA technology so I will give them that, but, after having upgraded my version to the latest and still have it breaking and breaking other parts that were not broken originally, I managed to finally figure out the problem.

The JS that Cloudflare inserts breaks pretty much every “html::” POST class in GLPI.

So, the solution is to disable what they call “Rocketscript”, and your site will work fine.

These pages will explain it a little better:

http://webmasters.stackexchange.com/questions/60276/how-does-cloudflares-rocket-loader-actually-work-and-how-can-a-developer-ensur
https://laracasts.com/discuss/channels/javascript/rocketscript-what-is-it
https://snippets.webaware.com.au/snippets/stop-cloudflare-rocketscript-breaking-wordpress-plugin-scripts/

Full Screen Webpage HTML5 API

Posted on Updated on

This code will make your website go in to a full screen view, with the click of a button.

Or, if you prefer, you can press CTL + ` instead.

I modified the original code from sitepointstatic.com with the keyboard shortcut, but it’s still basically the same.

          <span id="fullscreen">Go Full Screen</span>
JS Script:

        // full screen script         
        // http://blogs.sitepointstatic.com/examples/tech/full-screen/index.html
        var e = document.getElementById("fullscreen"); // button for activation.
        // var b = document.getElementById("body");  // Does not allow scrolling- good for individual elements, like pictures or video.
        var b = document.documentElement; // Does allow scrolling
        e.onclick = function() {
            if (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen")) {
                RunPrefixMethod(document, "CancelFullScreen");
            }
            else {
                RunPrefixMethod(b, "RequestFullScreen");
            }
        }
        
        var pfx = ["webkit", "moz", "ms", "o", ""];
        function RunPrefixMethod(obj, method) {
            var p = 0, m, t;
            while (p < pfx.length && !obj[m]) {
                m = method;
                if (pfx[p] == "") {
                    m = m.substr(0,1).toLowerCase() + m.substr(1);
                }
                m = pfx[p] + m;
                t = typeof obj[m];
                if (t != "undefined") {
                    pfx = [pfx[p]];
                    return (t == "function" ? obj[m]() : obj[m]);
                }
                p++;
            } 
        }
        
        // keydown event handler
        document.addEventListener('keydown', function(e) {
          if (e.ctrlKey && e.keyCode == 192) { // ` AND CTL
        RunPrefixMethod(b, "RequestFullScreen");
          }
        }, false);

Fail2Ban – You will lock yourself out

Posted on Updated on

There are parts I love about being able to manage a VPS, but there are parts I hate.

One of the biggest problems is if you get passwords wrong. Yep… It happens.

So when your server blocks your static IP, it gets difficult to get back in.

It’s not impossible, but, once you do you have to unblock yourself.

This took me a while to find, but it actually works, especially if you are running a Centos box with f2b.

Remove IP from blocklist

check its being blocked by running

iptables -L -n

if it is, unblock it by running

iptables -D <CHAIN> -s <IP>  -j <ACTION>

where <IP> is the one you want to remove, <ACTION> is what it does and <CHAIN> is the ruleset its blocked under. Some examples below;

iptables -L -n
...
Chain f2b-default (2 references)
target     prot opt source               destination
REJECT     all  --  217.147.243.129      anywhere             reject-with icmp-port-unreachable
RETURN     all  --  anywhere             anywhere
...
server:# iptables -D f2b-default -s 217.147.243.129 -j REJECT # remove it
server:# /sbin/service iptables save 

Whitelisting

Whitelisting is setup in the jail.conf file using a space separated list.

[DEFAULT]
# "ignoreip" can be an IP address, a CIDR mask or a DNS host. Fail2ban will not                          
# ban a host which matches an address in this list. Several addresses can be                             
# defined using space separator.
                                                                         
ignoreip = 127.0.0.1 192.168.1.0/24 8.8.8.8 XXX.XXX.XXX.XXX
# where the XXX.etc is your static IP.

# This will ignore connection coming from common private networks.
# Note that local connections can come from other than just 127.0.0.1, so
# this needs CIDR range too.
ignoreip = 127.0.0.0/8 10.0.0.0/8 172.16.0.0/12 192.168.0.0/16

Source: http://wiki.vitro.co.uk/mw/Fail2ban

JS: OnDrop not getting the source ID [solved]

Posted on Updated on

So this problem plagued me for several days before I finally figured it out.

For example, you have the following code and it works:

< script >
function allowDrop(ev) { 
 ev.preventDefault(); 
 } 
function drag(ev) { 
 ev.dataTransfer.setData('text', ev.target.id); 
 } 
function drop(ev, target) { 
 ev.preventDefault(); 
console.log(target.id + " : " + ev.target.id) 
console.log(ev.dataTransfer.getData("text/html")); 
console.log(ev.dataTransfer.getData("text")); 
var data = ev.dataTransfer.getData("text"); 
alert(data) 
 } 
< / script >

<style "type="text/css">
#div1 { 
 width: 350px; 
 height: 70px; 
 padding: 10px; 
 border: 1px solid #aaaaaa; 
 }
</style>
< div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)">
</div >
  
<img draggable="true" ondragstart="drag(event)" 
id="drag1" src="//placehold.it/336X69/ff0000" width="336" height="69" />

However, what if you changed the HTML code to this:

<a draggable="true" ondragstart="drag(event)" id="drag1" href="#">
 <img src="//placehold.it/336X69/ff0000" width="336" height="69" />
</a>

Well, put simply, it won’t work.

This won’t work either – even though the drag code is correct. It simply can’t be in an ‘A’ tag, like the following code.
<a href="#">
 < img draggable="true" ondragstart="drag(event)" id="drag1"
 src="//placehold.it/336X69/ff0000" width="336" height="69" />
 </a>

An “a” won’t return the source id in this instance. Why? I don’t know. But it won’t work, so don’t do it.

To make a drop and drag work properly in all browsers, the ondragstart must not be on an ‘A’ tag. IMG are ok. maybe even LI, or DIV – but not A.

I hope this helps. It took me a long time and a lot of JS code to find alternatives, but it was a simple fix in the end.

This has been confirmed to work on the following:

Safari:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/602.2.14 (KHTML, like Gecko) Version/10.0.1 Safari/602.2.14

Opera:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 OPR/42.0.2393.94

FireFox:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:50.0) Gecko/20100101 Firefox/50.0

Chrome:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36

Opera Dev:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2914.3 Safari/537.36 OPR/43.0.2431.0 (Edition developer)

 FireFox Dev:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:52.0) Gecko/20100101 Firefox/52.0

 

While this code example isn’t perfect, and WordPress keep on messing up the formatting and the actual content of this page, I’ll keep adding to it to get it 100% right.

Please note the extra spaces in the code there, at the script and div tags. This is because WordPress is breaking it on me.

It’s a frustrating state of HTML that the drop and drag currently in. Nothing is ever 100% functional and many features are just cross-browser broken. This is a good example of that.

Here is my answer formatted better:

http://stackoverflow.com/questions/26499462/get-dropped-elements-id-instead-of-drop-target-id/41274540#41274540

Shoutcast. Server.

Posted on Updated on

Ok, so while I’m on the topic of using Winamp on macs and so on, I thought it was time to bust out where to find the instructions of where to download the current ShoutCast DNAS server from.

The name is kind of appropriate, as I’ll be running it from d’NAS… 😉

At the moment Nullsoft seem to be slowly undergoing changes (again) and thus the software is being developed.

However.

They do have the legacy tools still available on their servers. You just have to search for them.

sc_serv2_linux-latest.tar.gz
sc_serv2_linux_x64-latest.tar.gz
sc_serv2_win32-latest.exe
sc_serv2_win64-latest.exe
shoutcast-dsp-2-3-5-windows.exe

There are plenty on how to instructions. The problem is trying to find the software in the first place.

Oh, there is also some other software called ShoutCastGUI, but I found this software frustrating, as it wanted to post my playlist and radio station to an online location somewhere, and had the most annoying NAG screens ever.

So while ShoutCastGUI did a great job at what it was designed to do, it was also not the tool for me. I just wanted to be able to set up a stream inside my house and not publish it. The config was easy, but there was too much other stuff… like a chat server? Why that’s there, I don’t know. But it is what it is. Hat’s off to the devs though, it’s a good program. I just don’t need all the extra stuff.

So for a bare-bones setup, just stick with the above links I’ve listed.

Winamp on Macs

Posted on Updated on

Yes, this has been a long time coming as Winamp seems to have stalled in development for many years. However, even though it’s recently been picked up again I’ve found a solution that will keep (or start) your love of Winamp again if you are using a mac. #win!

screen-shot-2016-11-17-at-23-29-59

Firstly, I must point out that using the built in WineBottler version of Winamp caused issues for me on El Capitan with a Wine error of “ntlm_auth cannot be opened because of a problem”.

screen-shot-2016-11-17-at-23-29-47

So, for whatever reason unfortunately that wasn’t an option. Instead what I did was find a copy of Winamp 2.91 and downloaded it. I tried the most recent release of 5.666 redux and just just failed.

So, the secret to this working…

Download WineBottler from Mike’s site. Install it in to your Application Path. Make sure you grab and install the Wine app as well.

Then, run the WinAmp setup file.
http://download.oldapps.com/Winamp/winamp291_full.exe

screen-shot-2016-11-17-at-23-36-56

After the normal setup process, you should then be able to run Winamp…

The exe file will probably be in /Users/{USERNAME}/Wine Files/drive_c/Program Files/Winamp/winamp.exe

Double Clicking on it should probably give the prompt above, and it should run. If not, I’m sure you can figure out how to make it work there… right click, Open With… etc

screen-shot-2016-11-17-at-23-38-34

However, in this modern world, you’ll probably want to play .m4a files too (thanks iTunes). So, grab this file as well and run it using Wine.
http://ncu.dl.sourceforge.net/project/faac/MP4%20plugin/in_MP4%202.0%20RC3/in_mp4-2.0-rc3.exe

Execute that install file and then you should be able to add the .m4a files.

You may find issues because of the stupid Mission Control program Apple has installed… but, to get the menu up (such as searching), you should be able to hit “Option-F3” or “Option-J” etc.

screen-shot-2016-11-17-at-23-44-23

The skins are a bit quirky and I’m happy with the standard one. Give it a go on others and let me know how you go! 😀

Enjoy! 😀