[[webdev:php:stuff:songs-im-dokument-mit-tinysong-url-formatieren]]

Songs im HTML-Dokument durch einen TinySong-Url ersetzen

Tinysong benötigt ein API-Key mittlerweile.

Der Titel klingt umständlich, aber es geht darum in einem Dokument markierte (Span-Element mit rel-Attribut „tinysong“) Songs automatisch eine tinysong-url hinzuzufügen, womit man dann den Titel bei Grooveshark anhören kann.

Man benötigt auf dem Webserver PHP und der Client Javascript/jQuery.

Das kann in etwa so aussehen:

<h2>Meine Hitparade</h2>
 
<ol>
    <li><span rel="tinysong">Porcupine Tree - Normal</span></li>
    <li><span rel="tinysong">Portishead - Hunter</span></li>
    <li><span rel="tinysong">Kate Bush - Running up that hill</span></li>
    <li><span rel="tinysong">Coil - Baby Food</span></li>
</ol>

heraus kommt dann sowas:

<h2>Meine Hitparade</h2>
 
<ol>
    <li><a href="http://example.com/id">Porcupine Tree - Normal</a></li>
   ...
   ...
   ...
</ol>

Screenshot der Ausgabe / Firebug

tinysong.php
<?php
// tinySong Ajax 
 
function GET($request){
    // cache!?!
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $request);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $output = curl_exec($ch);
    curl_close($ch);     
    return $output;
}
 
 
function tinySong($r){
    $r = preg_replace("#[^\w ]#","",$r);
    // update: tinysong erwartet jetzt ein API-Key als Argument!
    return GET("http://tinysong.com/a/".urlencode($r)."?format=json");
 
}
 
 
if(isset($_REQUEST["ts"])){
    header("Content-Type: text/html");
    print json_decode(tinySong($_REQUEST["ts"]));
 
}
 
?>
index.html
<html lang="de">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Page metadata -->
 
</head>
<body>
<h1>TinySong Api / Ein Test</h1>
 
<h2>Hitparade</h2>
 
<ol>
    <li><span rel="tinysong">Porcupine Tree - Normal</span></li>
    <li><span rel="tinysong">Portishead - Hunter</span></li>
    <li><span rel="tinysong">Kate Bush - Running up that hill</span></li>
    <li><span rel="tinysong">Coil - Baby Food</span></li>
</ol>
 
 
 
<script type="text/javascript">
 
    function tinySong(){      
        $("span").each(function(){
            var song = $(this); 
            if(song.attr("rel")=="tinysong"){
               $.ajax({
                    url: "tinysong.php?ts="+song.text(),
                    success: function(data){
                        song.html("<a href='"+data+"'>"+song.text()+"</a>");
                    }
               });
            }
        });
    }
    tinySong();
 
</script>
</body>
</html>
Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
  • webdev/php/stuff/songs-im-dokument-mit-tinysong-url-formatieren.txt
  • Zuletzt geändert: 2012/07/10 07:37
  • (Externe Bearbeitung)