Sitemap Datenschutzerklärung Impressum
weiterführende Links: Javascript | Verschlüsselung | Xor | Sprechende Uhr | Greasemonkey | Grafik | Umwandlung | Smartphone
Du bist hier:Start»Javascript»FreeCloudProxy

Free Cloud Proxy - Musik im Browser

freecloudproxy logo

10.04.2015

Was haben Bilder und Musik gemeinsam ? Beide können als digitale Daten gespeichert werden. Free Cloud Proxy kann Musik in Bilder umwandeln und Bilder in Musik. Es gibt viele kostenlose Bildspeicher-Dienste im Internet, die keine Registrierung erfordern (aktueller Stand: 2015). Free Cloud Proxy ermöglicht es Musik bei Bildspeicher-Diensten kostenlos und ohne Registrierung zu speichern. Daher der Name "Free Cloud Proxy". Dieses kleine Projekt habe ich bei freecloudproxy.sourceforge.net gespeichert.

Demo

Die Demo lädt ein Beispiellied, das in Bildern gespeichert ist. Die Bilder werden durch Javascript in Musik umgewandelt und in den Webbrowser als HTML5-Audio-Element geladen. Getestet mit Firefox. Andere Browser könnten ebenfalls funktionieren.

Alle Demos enthalten dasselbe Lied. Der einzige Unterschied sind die Bildhosting Server, die die Bilder mit unterschiedlicher Bandbreite und Geschwindigkeit bereitstellen. Wenn der 2-Minuten-Timeout zum Laden der Bilder abläuft, dann lade die Seite erneut. Falls das nicht hilft, probiere das Greasemonkey-Skript weiter unten auf dieser Seite.

Unterstützte Browser

Getestete und unterstützte Browser. Andere Browser können ebenfalls funktionieren.

Bei Firefox für Linux muss in about:config bei media.gstreamer.enabled auf true gesetzt werden. Um die Werbe-Einblendung von Anonymouse.org zu unterdrücken, kann die Firefox-Erweiterung Ublock Origin installiert werden (Adblocker).

Demo mit dem Greasemonkey-Skript

Das Greasemonkey-Skript freecloudproxy.user.js kann die sogenannte "Same Origin Policy" des Browsers Firefox umgehen. Es kann dadurch Bilder von verschiedenen Bildspeicher-Diensten laden (von verschiedenen Domains). Mit dem Greasemonkey-Skript funktioniert "Free Cloud Proxy" unabhängig von der Website Anonymouse.org, die in den oberen Demos ebenfalls zum Umgehen der "Same Origin Policy" benutzt wurde. Anonymouse hat eine Grenze für Dateigrößen von 2 MB pro Datei. Das Greasemonkey-Skript funktioniert ohne diese Größenbeschränkung und kann Bilder beziehungsweise Musik schneller als über Anonymouse herunterladen. Da die "Same Origin Policy" durch das Skript umgangen wird, ist die Benutzerin beziehungsweise der Benutzer für die Datensicherheit verantwortlich. Bitte schau dir die Links an, die durch das Skript geladen und angezeigt werden. Wenn diese Links auf JPG-Bilder verweisen, dann drücke "OK".

Sicherheit

Wie oben bereits beschrieben kann Greasemonkey die "Same Origin Policy" des Webbrowsers umgehen. Zusammen mit der Linkliste, die von unbekannten Menschen zur Verfügung gestellt wird, kann das zu einem Sicherheitsproblem werden. Zum Beispiel kann eine Person mit bösen Absichten einen heimtückischen Link in die Downloadliste einfügen - ein bösartiger Link kann z.B. so aussehen: https://router-im-internen-netzwerk/?aktion=schalteFirewallAus Da das Skript freecloudproxy.user.js nicht entscheiden kann, welcher Link bösartig ist und welcher Link auf ein Bild verweist, muss vorm Laden der Links "OK" oder "Cancel" geklickt werden. Wenn alle Links auf JPG-Bilder von Image Hostern verweisen, dann kann "OK" geklickt werden.

Unterstützte Browser

Das Greasemonkey-Skript wurde nur mit dem Firefox Webbrowser getestet. Damit das <audio>-Element im Firefox für Linux funktioniert, muss in der Adresszeile "about:config" eingegeben und geprüft werden, dass media.gstreamer.enabled auf true gesetzt ist (ist der voreingestellte Wert bei Firefox unter Linux).

Wie Free Cloud Proxy funktioniert

Im Webbrowser siehst du nur, dass eine Musik-Datei geladen wird. Hier erkläre ich, was im Hintergrund passiert:

Sequenzdiagramm für Freecloudproxy mit Anonymouse als Proxy

Der Proxy Anonymouse.org wird nur zum Umgehen der "Same Origin Policy" des Webbrowsers benötigt. Das bedeutet, dass wenn eine Webseite über die Domain Anonymouse.org geladen wurde, alle weiteren Dateien per Javascript ebenfalls über Anonymouse.org geladen werden müssen. Ein Beispiellink für dieses gesamte Konstrukt sieht folgendermaßen aus:

http://anonymouse.org/cgi-bin/anon-www.cgi/http://freecloudproxy.sourceforge.net/javascript_proxy.html?p=http://freecloudproxy.sourceforge.net/demons.pichost.txt

  1. Im ersten Schritt wird die Webseite mit dem Javascript geladen - das ist das "Free Cloud Proxy" Skript javascript_proxy.html. Es ist auf sourceforge.net gespeichert.
  2. Im zweiten Schritt lädt das Skript eine Text-Datei, die an das Skript über die URL nach dem "?p=" übergeben wurde. Diese Textdatei enthält Links zu Bildern, den Dateinamen und die SHA1-Prüfsumme des Liedes und einige zusätzliche Informationen, z.B. die Lizenz. Eine Text-Datei mit Links zu den Bildern sieht zum Beispiel so aus:
    // example of a text file with links to images

    // links to the images
    l=http://cdn.rawgit.com/bobby-flitter/freecloudproxy/master/image000.jpg
    l=http://cdn.rawgit.com/bobby-flitter/freecloudproxy/master/image001.jpg
    l=http://cdn.rawgit.com/bobby-flitter/freecloudproxy/master/image002.jpg
    l=http://cdn.rawgit.com/bobby-flitter/freecloudproxy/master/image003.jpg

    // the file name of the song
    f=cdk - Demons.mp3

    // SHA1 checksum
    c=44f72c32aef3b022fce6bbac076e8c98c16630b3

    // additional information
    a=License:\nCreative Commons by Attribution 3.0\nhttps://creativecommons.org/licenses/by/3.0/\nSong: cdk - Demons\nhttp://ccmixter.org/files/cdk/46920
    Die Textdatei kann z.B. bei pastebin.com gespeichert werden. Für den reinen Text sollte der Modus "raw" benutzt werden.
  3. Im dritten Schritt werden die verlinkten Bilder vom Bildspeicherdienst geladen. Es gibt mehrere kostenlose Bildspeicherdienste, die ohne Anmeldung benutzt werden können zum Beispiel http://pichost.biz.
  4. Im vierten und letzten Schritt werden die Bilder in eine Musik-Datei umgewandelt und zu der Webseite wird ein Musik-Player hinzugefügt (technisch: ein HTML5 <audio>-Element).

Die Version mit dem Greasemonkey-Skript

Das Sequenzdiagramm des Greasemonkey-Skripts ist etwas kleiner als das Diagramm mit dem Proxy.

Sequenzdiagramm für Freecloudproxy mit greasemonkey

Da Greasemonkey Dateien von verschiedenen Domains laden kann, ist der Proxy bei diesem Konzept nicht notwendig. Aber die Benutzerin beziehungsweise der Benutzer ist dafür zuständig, die Links auf gültige Bilddateien zu überprüfen und bei bösartigen Links "Cancel" zu klicken. Sind alle Links nach der Überprüfung in Ordnung, dann muss "OK" angeklickt werden.

Wie die Bilder aus einer Musik-Datei erzeugt werden können

# on a Linux system:

wget http://freecloudproxy.sourceforge.net/fileToImages.sh
chmod 755 fileToImages.sh
./fileToImages.sh cdk_-_Demons.mp3

# creates a directory with images and the link file:
cd parts.cdk_-_Demons.mp3/

oder für andere Betriebssysteme:

# on other system with ruby - download fileToImagesConverter.rb:

wget http://freecloudproxy.sourceforge.net/fileToImagesConverter.rb

ruby fileToImagesConverter.rb cdk_-_Demons.mp3

# creates a directory with images and the link file:
cd parts.cdk_-_Demons.mp3/

Lade die erzeugten Bilder zu einem Bildspeicherdienst hoch. Füge die Links zu der Datei linkfile.txt hinzu. Lade den Inhalt der linkfile.txt zu einer "Paste"-Seite hoch. Schließlich muss der Downloadlink wie oben beschrieben zusammengebaut werden.

Ausblick

Wie immer gibt es Spielraum für Verbesserungen. Einige Ideen:

  • kreativerer Umgang mit den Bildern - z.B. jedes Pixel eines Bildes zum Kodieren benutzen (canvas-Element)
  • die Textdatei mit den Links mit AES und einem Passwort verschlüsseln
  • Software entwickeln, die außerhalb des Browsers läuft und die Bilder zur Offline-Nutzung speichert
  • die Textdatei mit den Links könnte natürlich auch in Bildern versteckt werden

Kostenlose Cloud-Anbieter mit Stand vom April 2015

Beispiele für Bildspeicherdienste beziehungsweise "free image hosting" sind:

Viele Textspeicherdienste benutzen heutzutage CAPTCHAs, um sich gegen Spam zu schützen. Eine Alternative wäre es den Text mit den Bilder-Links ebenfalls in einem Bild zu speichern. Beispiele für Textspeicherdienste sind:

Viel Spaß beim Ausprobieren ! Falls noch etwas unklar sein sollte, dann kannst du die Kommentar-Funktion benutzen.

Kommentar schreiben

Ihre Daten werden verschlüsselt übertragen. Der Kommentar wird gelesen und eventuell veröffentlicht.
Wenn der Inhalt des Kommentars oder Teile des Kommentars nicht veröffentlicht werden, dann werden die gespeicherten Daten nach maximal 4 Wochen gelöscht. Um zukünftigen Missbrauch der Kommentarfunktion zu verhindern, werden die zum Kommentar gehörenden IP Adressen maximal 4 Wochen gespeichert.