✔ Variable in einem href einbauen

[ojamaney]

Hallo,
ich bastel immer noch an meiner Seite mit Audio-Player herum. Funktioniert so weit alles. Ich lade mit js einige Cover auf die Seite und mit Klick auf ein Cover wird die mp3 abgespielt. Über eine Playbar lässt sich nun pausieren, neu starten und jetzt kommt das Problem: die Datei soll dort ge-downloaded werden.

Dazu bräuchte ich aber den Namen der Datei die gerade abgespielt wird. Der steht in einer js-Variable und die kann ich so nicht in den href einpflanzen.

Im Netz habe ich diverse Hinweise gefunden die mir aber nichts genützt habe, da sie entweder nicht funktionierten oder keine Lösung geboten haben.

Mit "document.location.href" habe ich es hinbekommen aber dann wird die Datei im Browser geöffnet. Das will ich nicht.

Ist für mich auch unverständlich dass PHP und Js nichts von einander wissen und es keine einfache Lösung zum Variablenaustausch gibt.

Ich hoffe jemand hat eine Lösung die nicht 2 DIN-A4 Seiten Quellcode beinhaltet. ^^

 

[Sempervivum]

Mit "document.location.href" habe ich es hinbekommen aber dann wird die Datei im Browser geöffnet. Das will ich nicht.

Dann ist doch schon ein wichtiger Schritt getan. Wie man dann das Ziel zum Download anbietet, wird hier beschrieben:
https://wiki.selfhtml.org/wiki/HTML/Textauszeichnung/a#Download-Verweise
Also keine zwei DIN-A4-Seiten, sondern ein einfaches Attribut.
Leider tanzt der IE mal wieder aus der Reihe.

 

[ojamaney]

Danke für die Antwort aber das hilft mir ja nicht weiter.

Wo füge ich hier das Attribut "download" ein?

<input type="button" value="Download" onClick="download('media/musik.mp3')" >
<script>
function download(file)
{
window.location=file;
}
</script>

So wie das da steht spielt der Browser die Datei ab.

 

[Sempervivum]

Lies den Inhalt des Links: Statt eines input-Buttons ein a-href-Tag mit dem Attribut "download".

 

[ojamaney]

Ich habe den Link gelesen aber ich brauche das ja in JS, nicht als html. JS ist Neuland für mich.
Ich weiss aber, dass ich meine Variable nicht im a-href-tag unterbringen kann. Sollte es doch gehen dann bitte ich um ein Beispiel.

Das habe ich bis jetzt und es funktioniert. Aber wo soll ich das download Attribut angeben damit der Browser die Finger von meinen Dateien lässt?

<script>
function download(file)
{
window.location=file;
}
</script>
<img onClick="download('media/'+curFile+'.mp3')" src='download.png' />

 

[Sempervivum]

Steht die Variable in JS oder in PHP zur Verfügung? Enthält sie die URL (absolut oder relativ ist egal) der Datei, die herunter geladen werden soll?
Edit:

Der steht in einer js-Variable

Das beantwortet die erste Frage.

 

[Sempervivum]

<a id="download-clip1" download>
<script>
    var clipurl = 'media/musik.mp3';
    document.getElementById("download-clip1").src = clipurl;
</script>

 

[ojamaney]

Ja, in den Variablen (mp3Path+curFile+mext)steht der relative Pfad.

Es tut sich aber nichts beim klicken auf das Bild. Ich bekomme es nicht zum funktionieren. Vielleicht bin ich einfach nur zu blöd dafür....

<script>
var dFile = mp3Path+curFile+mext;                       
document.getElementById("download").src = dFile;
</script>
<a id="download" download><img src='download.png' /></a>

 

[Sempervivum]

Du musst das a-Tag vor dem Javascript notieren, sonst ist es bzw. seine ID noch nicht vorhanden.

 

[Sempervivum]

OMG, da habe ich einen ganz dummen Fehler gemacht: Man muss natürlich das href-Attribut setzen und nicht src:

<a id="download" download><img src='download.png' /></a>
<script>
    var dFile = mp3Path+curFile+mext;                       
    document.getElementById("download").href = dFile;
</script>