Taragana's Del.icio.us mp3 Player Plugin - schlanke Alternative?

Gast 3738

Hey ho,
Taragana's Del.icio.us mp3 Player Plugin ist zwar ganz nützlich, sieht aber mit diesem billigen del.icio.us-Design relativ hässlich aus. Der Vorteil dagegen ist, dass es sehr schlank ist. Meine Frage: Da Del.icio.us nicht zulässt, dass man diese Funktion anpassen kann, bin ich auf der Suche nach einem Ersatz. Der sollte im Grunde genau so funktionieren, am besten auch nur einen Play/Pause-Button anbieten (auf dieses Tagging-Gedöns kann ich verzichten). Die Alternative, die ich bereits kenne, ist dieses Plugin, das beim Play-Button-Drücken plötzlich größer wird. Ist mir zu wuchtig.

Vielen Dank im Voraus.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Gast 3738

Tja. Ich hab 'ne Lösung gefunden. Und sie basiert doch auf die del.icio.us-Funktion, man kann jedoch Play- und Stop-Button frei auswählen und die Tag-Funktion fehlt. Dazu erstmal eine JavaScript-Datei erstellen, die etwa player.js heißt.

Code

if(typeof(Delicious) == 'undefined') Delicious = {}
Delicious.Mp3 = {
    playimg: null,
    player: null,
    go: function() {
        var all = document.getElementsByTagName('a')
        for (var i = 0, o; o = all[i]; i++) {
            if(o.href.match(/\.mp3$/i)) {
                var img = document.createElement('img')
                img.src = 'http://DEINEDOMAIN/play.gif'; img.title = 'Play'
                img.height = 12
                img.width = 12
                img.style.marginRight = '0.5em'
                img.style.cursor = 'pointer'
                img.style.border = '0'
                img.onclick = Delicious.Mp3.makeToggle(img, o.href)
                o.parentNode.insertBefore(img, o)
    }}},
    toggle: function(img, url) {
        if (Delicious.Mp3.playimg == img) Delicious.Mp3.destroy()
        else {
            if (Delicious.Mp3.playimg) Delicious.Mp3.destroy()
            var a = img.nextSibling, c=''
            if (document.defaultView && document.defaultView.getComputedStyle) c = document.defaultView.getComputedStyle(a,null).getPropertyValue('color')
            else if (a.currentStyle) c = a.currentStyle['color']
            c = c.replace(/^rgb|[ ()]/g, '')
            var hex = c.match(/^#?([a-f0-9]{6})$/), hexSm = c.match(/^#?([a-f0-9]{3})$/), rgb = c.match(/^([0-9]+),([0-9]+),([0-9]+)$/)
            if (rgb) { var c16 = "0123456789abcdef", c=''; for(var i=1,d;d=rgb[i];i++) { var j=d%16; c=c+c16.charAt((d-j)/16)+c16.charAt(j) } }
            else if (hex) c = hex[1]
            else if (hexSm) c = hexSm[1].charAt(0) + hexSm[1].charAt(0) + hexSm[1].charAt(1) + hexSm[1].charAt(1) + hexSm[1].charAt(2) + hexSm[1].charAt(2)
            else c = "000000"
            img.src = 'http://DEINEDOMAIN/stop.gif'; img.title = 'Stop'; Delicious.Mp3.playimg = img;
            Delicious.Mp3.player = document.createElement('span')
            Delicious.Mp3.player.innerHTML = '<object style="vertical-align:bottom;margin-right:0.2em" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"' +
            'codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"' +
            'width="50" height="14" id="player" align="middle">' +
            '<param name="wmode" value="transparent" />' +
            '<param name="allowScriptAccess" value="sameDomain" />' +
            '<param name="flashVars" value="theLink='+url+'&amp;fontColor='+c+'" />' +
            '<param name="movie" value="http://del.icio.us/static/swf/mp3.swf" /><param name="quality" value="high" />' +
            '<embed style="vertical-align:bottom;margin-right:0.2em" src="http://del.icio.us/static/swf/mp3.swf" flashVars="theLink='+url+'&amp;fontColor='+c+'"'+
            'quality="high" wmode="transparent" width="50" height="14" name="player"' +
            'align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"' +
            ' pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>'
            img.parentNode.insertBefore(Delicious.Mp3.player, img.nextSibling)
    }},
    destroy: function() {
        Delicious.Mp3.playimg.src = 'http://DEINEDOMAIN/play.gif'; Delicious.Mp3.playimg = null
        Delicious.Mp3.player.removeChild(Delicious.Mp3.player.firstChild); Delicious.Mp3.player.parentNode.removeChild(Delicious.Mp3.player); Delicious.Mp3.player = null
    },
    makeToggle: function(img, url) { return function(){ Delicious.Mp3.toggle(img, url) }}
}


Delicious.addLoadEvent = function(f) { var old = window.onload
    if (typeof old != 'function') window.onload = f
    else { window.onload = function() { old(); f() }}
}


Delicious.addLoadEvent(Delicious.Mp3.go)

Alles anzeigen

Dabei http://DEINEDOMAIN/ entsprechend ersetzen. Erstellt dabei einen Play- und einen Stop-Button, die laut Angabe (siehe img.height und img.width) 12x12 Pixeln groß sein müssten - oder ihr nehmt diese hier: Play und Stop. Benennt diese am besten in play.gif und stop.gif um und ladet sie auf euren Server hoch.

Sobald eure JavaScript-Datei fertig ist, ladet es auf euren Server hoch. Dann bearbeitet ihr eure header.php und setzt zwischen den <head>-Tags:

Code

<script type="text/javascript" src="http://DEINEDOMAIN/player.js"></script>

Jetzt kann man sämtliche mp3-Dateien wie etwa Podcasts im Browser abspielen, ohne viel Gedöns: Verlinkt einfach auf mp3-Dateien, mehr ist nicht.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Taragana's Del.icio.us mp3 Player Plugin - schlanke Alternative?

Jetzt mitmachen!