Audio-player gesucht

    Hallo alle zusammen,

    ich suche für meine Website einen Audio-player. Dieser sollte möglichst simpel sein, so viel wie möglich individualisierbar für mein Design und er sollte dem User möglichst nicht erlauben die Audiodatei zu downloaden. Bisher nutze ich einfach das <audio> Tag, in HTML5 aber das is auch eher öde im Design in man kann einfach mittels Rechtsklick die Datei herunterladen.

    Ich hab jetzt schon lange recherchiert und treffe eigentlich immer wieder auf die gleichen "20 best free web audio player" aber nichts davon macht mich wirklich glücklich.

    Um das nicht ganz so im dunklen zu lassen, erörtere ich kurz mal was am Ende bei rauskommen soll.
    Es geht um die Website meines musikalischen Soloprojektes. Hier möchte natürlich auch meine Musik veröffentlichen und zwar albumweise, das heißt für jedes Album möchte ich einen Abschnitt mit einer Liste der Songs die dann einzeln abgespielt werden können. (und wie gesagt der Player sollte etwas moderner aussehen bzw. sich gut dem Design meiner Seite anpassen lassen, das überwiegend schwarz und edel gehalten ist.

    Ich bitte um Rat.

    Zitat von vegan

    Hallo alle zusammen,

    ich suche für meine Website einen Audio-player. Dieser sollte möglichst simpel sein, so viel wie möglich individualisierbar für mein Design und er sollte dem User möglichst nicht erlauben die Audiodatei zu downloaden.


    Ein Stream ist immer auch ein download, von daher geht dein Wunsch an der Realität vorbei. Wenn du etwas nicht downloadbar haben willst, dann darfst du es nicht veröffentlichen.

    Zitat


    Bisher nutze ich einfach das <audio> Tag, in HTML5 aber das is auch eher öde im Design in man kann einfach mittels Rechtsklick die Datei herunterladen.


    Du kannst mittels Javascript alles am Audiotag verändern, im Netzt finden sich dazu unzählige Beispiele.Das Audio-Tag ist zudem mittel der Wahl.

    Einmal editiert, zuletzt von explanator (5. Dezember 2013 um 16:49)

    Zitat von explanator

    Ein Stream ist immer auch ein download, von daher geht dein Wunsch an der Realität vorbei. Wenn du etwas nicht downloadbar haben willst, dann darfst du es nicht veröffentlichen.


    Ja, das man es downloaden muss um es zu streamen is klar aber mich stört dass man einfach Rechtsklick auf den Player machen kann und dann einfach über Audio speichern untern das File auf seine Festplatte bekommt. Es gibt genug Player die mir zeigen, dass mein Wunsch garnicht so weit weg von der Realität weg ist.

    Zitat von explanator

    Du kannst mittels Javascript alles am Audiotag verändern, im Netzt finden sich dazu unzählige Beispiele.Das Audio-Tag ist zudem mittel der Wahl.


    Wonach suche ich denn da am besten. Ich bin leider noch nicht so wirklich der Javascriptheld. Ich würde einiges von dem was ich hier so finde vielleicht aufbauweise Stück für stück verstehen aber bei den fertig vorgesetzten Skripts blick ich noch nich wirklich durch.

    Du kannst das audio-Tag visibility:hidden oder display:none machen und dann per javascript deine Buttons designen. Dann isses mit rechtsklick und downloaden schonmal nicht getan. Wenn du dann die URL auchnoch base64-codierst und erst per JS decodierst und ins src vom audio-tag einfügst, kommt auch keiner ohne Fachkenntnisse mehr dran; das sollte sicher genug sein um dich gegen die meissten Sachen zu schützen. Aber sobald irgend ein Download-Tool deine Webseite unterstützt, hast du verloren, egal was du machst.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Geht das eigentlich nur mit Javascript oder kriegt man sowas auch mit jQuery hin? ...und davon abgesehen, was passiert eigentlich wenn jemand bei sich Javascript deaktiviert hat. Es nützt mir ja nichts das ich den schönsten Javascript player habe und ein findiger User das einfach abschaltet. Würde der Browser dann automatisch als fallback auf den standard HTML5 Player zurückgreifen oder einfach garnichts anzeigen? Bei display:none sollte man davon ausgehen dass er garnichts anzeigt aber Browser sind auch immer für eine Überraschung gut.
    Das mit der base64-Codierung klingt super, da werd ich mich gleich mal ransetzen. Bis ich für Download-Tools interessant werde vergeht noch ein bischen Zeit, dafür bin ich noch ein zu kleiner Fisch :wink:

    Ja, das geht nur mit Javascript und ja, jQuery IST JavaScript. Solte mit jquery sehr viel einfacher umzusetzen sein als mit purem Javascript.

    Du kannst das display:none per JS ausführen (jQuery: $("#id").css("display", "none");), dann wir der Standard-Player bei ausgeschaltetem JS angezeigt. Ob dann aber das mit dem Base64 noch geht, wage ich zu bezweifeln.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Zitat von vegan

    Geht das eigentlich nur mit Javascript oder kriegt man sowas auch mit jQuery hin?


    JQuery ist Javascript. Es handelt sich dabei nur um eine Javascript-Bibliothek um ständig wiederholte Dinge zu vereinfachen.

    Zitat


    ...und davon abgesehen, was passiert eigentlich wenn jemand bei sich Javascript deaktiviert hat.


    Ohne Javascript keine Mucke.


    Zitat

    Würde der Browser dann automatisch als fallback auf den standard HTML5 Player zurückgreifen oder einfach garnichts anzeigen?


    Es passiert nichts, wenn du den Player von Anfang an ausblendest.

    Zitat von explanator

    JQuery ist Javascript. Es handelt sich dabei nur um eine Javascript-Bibliothek um ständig wiederholte Dinge zu vereinfachen.


    Super, das kommt mir sehr entgegen, ich war mir nur nicht sicher ob jQuery auch alle notwendigen Befehle dafür in der Library hat. jQuery wird ja auch oft als abgespecktes Javascript oder Javascript Light bezeichnet.

    Zitat von Tobse

    Ob dann aber das mit dem Base64 noch geht, wage ich zu bezweifeln.


    Heißt das, die Codierung funktioniert nicht mehr oder der Browser findet die Datei einfach nicht weil er nicht decoden kann? Mit zweiterem hätte ich kein großes Problem.

    ich geh zwar nicht konform mit deinem fleischkonsum, aber schau dir mal mediaelementjs an.
    http://mediaelementjs.com/

    und bevor du schreist: "das is aber nen videoplayer" : ja! ist es, aber audio macht das ding auch und wenn du was verstecken willst, musste das mit javaFX oder mit Flash machen, aber selbst da kann man mit den entsprechenden tools wieder an die richtige quelle rankommen.

    deswegen hat el explanatore auch recht mit dem satz hier:

    Zitat

    Wenn du etwas nicht downloadbar haben willst, dann darfst du es nicht veröffentlichen.


    gibt zwar immer wege alles zu erschweren, aber am ende des tages kann man sich alles holen, was es im netz gibt ;)

    Du kannst mit meinem Fleischkonsum auch garnicht konform gehen, ich habe ja keinen ;)

    Habe mir das mediaelement.js angesehen, weiß aber noch nich ob es genau das ist was ich suche. Da muss ich mich mal gesondert einlesen denn die Installation sind schon einige Zeilen Code. Für erfahrene JS Hasen ist es bestimmt ein Klacks aber ich werd da schon ein-zwei Stunden sitzen bis ich da durchgestiegen bin.

    Zitat

    gibt zwar immer wege alles zu erschweren, aber am ende des tages kann man sich alles holen, was es im netz gibt

    Es ist ja auch, wie gesagt, nicht mein Ziel garnichts Preis zu geben ich will halt nur verhindern dass jeder mit nem einfachen Rechtsklick die Datei auf seiner Festplatte speichern kann. Klar gibt es immer Mittel und Wege an 0en und 1en ranzukommen. Wenn man als kundiger Informatiker oder Hobbyinformatiker weiß, wie man was decoded oder in welchem temp Ordner von welchem Browser man wo nachgucken muss und sich die Mühe macht, dann hat man es sich auch ein stückweit verdient es downloaden zu können. Aber man muss es ja nicht auf einem Silbertablett presentiert bekommen.


    Ich möchte es an dieser Stelle auch nicht vergessen den Teilnehmern dieses Threads zu danken. Eure Denkanstöße haben mich schon ein bischen weiter gebracht.:daumen2hoch:

    Zitat von vegan

    Du kannst mit meinem Fleischkonsum auch garnicht konform gehen, ich habe ja keinen ;)


    sag ich doch^^ fleisch ist mein gemüse :mrgreen:

    aber das essen mal beiseite gelassen, mediaelementjs liefert dir nen super player, wenn du den nicht direkt sichtbar machst, wie bereits eruiert wurde und die url base64 codierst sollte des kein großer akt werden, die schnipsel für dein vorgehen findest du im netz ohne viel aufwand.
    den player aufzusetzen ist auch kein hexenwerk, ich denke mal mehr als ne std solltest du nicht dafür benötigen.
    des base64-zeugs liest man eigentlich auch nur 1 mal und hast gerallt..

    mach mal was und wenn du fragen hast schreibste se hier rein :)

    Zitat von synaptic

    gibt zwar immer wege alles zu erschweren, aber am ende des tages kann man sich alles holen, was es im netz gibt ;)


    Naja, ich denke, jemand, der den JavaScript code versteht und erkennt, dass es sich bei einer Zeichenkette um Base64 handelt, kommt (über warez z.B) an vieles ran, was nicht gerade private-daten sind.


    Zitat von vegan


    Heißt das, die Codierung funktioniert nicht mehr oder der Browser findet die Datei einfach nicht weil er nicht decoden kann? Mit zweiterem hätte ich kein großes Problem.


    Der Browser kann schon Base64, aber wenn er nicht weiss, dass es Base64 ist, wird ers auch garnicht erst versuchen. Soweit ich weiss kann man bei bildern angeben, dass sie Base64-Codiert sind. Wenn das beim <audio>-Tag auch geht, kannst du dem Browser mitteilen, dass es sich um eine Base64-Codierte URL handelt und er kann sie entsprechend umsetzen. Ansonsten findet er die Datei nicht.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Soweit ich bisher gekommen bin, hab ich die grundlegende Technik, die hinter base64 steht, verstanden, also das Umwandeln von 8bit ASCII-Zeichenketten zu 6bit ASCII-Zeichenketten zu Binärcode und wieder zurück. Aber wie genau sieht das im Bezug auf Dateien verschlüsseln aus.
    In diesem Video http://www.youtube.com/watch?v=000vsjg-eak benutzt er einerseits dieses data:audio/ogg;base64, und dann hängt er aber noch diesen endlosen String an, der, so wie ich es verstanden habe, die umgewandelte torrent Datei darstellt.
    Also das versteh ich noch nich. Soll ich jetzt den Pfad zur Datei base64 Codieren oder die Datei selbst und dann so anhämgen wie er? Bzw wenn ich die Audiodatei (z.B. mp3) in Stringform ja schon ins HTML Dokument einfüge, muss ich die Datei dann überhaupt noch als "richtiges" mp3 mit uploaden oder reicht der String aus, denn soweit ich es verstanden hab decoded der Browser den String doch doch wieder als mp3 und spielt diese dann. Dann bräuchte es doch keine eigenständige mp3 mehr, oder?

    Einmal editiert, zuletzt von vegan (12. Dezember 2013 um 17:19)

    Wenn du die MP3 direkt Codierst und ins Dokument einfügst, brauchst du keine einzelne Datei mehr, nein. Ich meinte aber, dass du nur den Pfad base64-codieren sollst (BTW: Base64 ist KEINE Verschlüsselung!)

    HTML
    <audio id="playeraudio">
<script>
$("#playeraudio").src = base64decode("ABFahzT425AF48=");
</script>

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Das klingt gut, denn es würde die Angelegenheit deutlich vereinfachen.
    Würde ich aber die Dateien codieren wollen, gibt es dafür schon ein tool? Ich versuche gerade mit Python etwas in der Richtung zu schreiben aber ich tue mich noch schwer damit.

    ne mp3 verschlüsseln is gewiss sinnbefreit :)
    die frage ist: wie schwer willst du es anderen machen?

    stell dir vor dein pfad zur mp3 hat in base64 (das is jetzt sehr untertrieben für die darstellung des vorhabens) 9 zeichen
    du splittest diese 9 zeichen in kleinen päckchen á 3 zeichen auf und überlegst dir ein weiteres vorgehen.
    nehmen wir an du hast 3 dateien, du speicherst also 3 mal deine informationen ab wie du deine base64-strings zusammenstückelst

    array für datei 1
    teil1, teil3, teil2

    array für datei 2
    teil3, teil1, teil2

    array für datei 3
    teil2, teil3, teil1

    im nächsten array gibst du an wie zusammengefügt wird
    lied 1
    0,2,1

    lied 2
    1,2,0

    lied 3
    2,0,1

    wenn du es jetzt richtig übel machen willst hauste noch einen verwirrungsstring da rein der in dienem algorithmus ignoriert wird.
    ja auch hier kann man dann am ende rausfinden, wie der richtige pfad ist, aber dafür braucht man:
    a) plan von js (nicht viel, aber zumindest ausreichend für arrays und base64)
    b) macht sich niemand die mühe das ganze dann noch nachzuollziehen, um an deine mp3 zu kommen.

    du kannst noch ein weiteres array machen, wo dann der md5-hash des pfades drinsteht und beim request der datei noch nen php-script mit mod-rewrite nutzen, um die files von ganz woanders aussm webspace zu ziehen, was ohne die php-file nicht möglich ist etc.

    verschleiern geht also ganz easy

    schlussendlich holste anhand der stück-infos die strings, baust se zusammen, dekodierst den base64, schiebst das ergebnis per ajax an die php-file, dort kannst du noch den referrer prüfen oder auch via htaccess den direkten dateiaufruf verhindern.
    lieferst dir die mp3 und bist am ende gott der verzweifelten, die dich bestehlen wollen :mrgreen:

    du kannst natürlich auch die js-arrays im php spiegeln und dann dann per get-parameter mitsenden^^

    Also erstmal :knien:
    Die Idee mit den Stückelungen gefällt mir, da lässt sich was draus machen.
    Ist das wirklich so sinnbefreit? http://iandevlin.com/html5/data-uri/audio.php der Quelltext sieht so aus als würde man das hier gemacht haben. Würde man jetzt bei einer Codierten mp3 oder wav oder webm oder was auch immer jetzt deine Stückelungmethode anwenden dann hätte man doch ein durchaus sicheres System fürs erste, oder ;)
    Aber ich denke den Pfad zu verschleiern reicht für meine Bedürfnisse auch erstmal.