使用Joomla下载Javascript文件

Question

我正在用Joomla编码，其中我自同步了三个音轨，即当其中一个在网页上开始时，另一个停止，下面是相同的JS代码;

<script type="text/javascript">
function _(id) {
return document.getElementById(id);
}
//function Download(url) {

//document.getElementById('my_iframe').src = url;
//};
function audioApp() {
var audio = new Audio();
var audio_folder = "/images/audios/how-to-meditate/relaxation/";
var audio_ext = ".mp3";
var audio_index = 1;
var is_playing = false;
var playingtrack;
var trackbox = _("trackbox");
var tracks = {
"track1": ["Relaxation in the Forest", "relaxation-in-the-forest"],
"track2": ["Relaxation of the Muscles", "relaxation-of-the-muscles"],
"track3": ["Relaxation with the Breath", "relaxation-with-the-breath"]
};
for (var track in tracks) {
var tb = document.createElement("div");
var pb = document.createElement("button");
//var dn = document.createElement("button");
var tn = document.createElement("div");
tb.className = "trackbar";
pb.className = "playbutton";
//dn.className = "download";
tn.className = "trackname";
tn.innerHTML = tracks[track][0];
pb.id = tracks[track][1];
tb.appendChild(pb);
pb.addEventListener("click", switchTrack);
tb.appendChild(tn);
trackbox.appendChild(tb);
audio_index++;
}
audio.addEventListener("ended", function() {
_(playingtrack).style.background = "url(images/icons/play.JPG)";
playingtrack = "";
is_playing = false;
});
function switchTrack(event) {
if (is_playing) {
if (playingtrack != event.target.id) {
is_playing = true;
_(playingtrack).style.background = "url(images/icons/play.JPG)";
event.target.style.background = "url(images/icons/pause.JPG)";
audio.src = audio_folder + event.target.id + audio_ext;
audio.play();
} else {
audio.pause();
is_playing = false;
event.target.style.background = "url(images/icons/play.JPG)";
}
} else {
is_playing = true;
event.target.style.background = "url(images/icons/pause.JPG)";
if (playingtrack != event.target.id) {
audio.src = audio_folder + event.target.id + audio_ext;
}
audio.play();
}
playingtrack = event.target.id;
}
}
window.addEventListener("load", audioApp);
</script>

下面是样式;

<style scoped="scoped" type="text/css">
.trackbar {
background: #FFF;
height: 50px;
font-family: "Arial";
}
.trackbar:nth-child(even) {
background: #FFF;
}

.playbutton {
opacity: .8;
display: block;
float: left;
width: 40px;
height: 40px;
margin: 0px 50px 0px 50px;
background: url(images/icons/play.JPG) no-repeat;
border: none;
cursor: pointer;
outline: none;
}
.playbutton:hover {
opacity: 1;
}
.trackname {
float: left;
color: #000;
margin: 12px 400px 0px 14px;
font-size: 20px;
}

html代码是;

<div id="trackbox">&nbsp;</div>

实现这一点后，我想在每个允许我下载曲目的 mp3 旁边放置一个下载图标，我有下载文件的链接，它被放置在 Joomla 的媒体(内容(中，我还想放置一个图标，这将触发下载 onClick。 是否有可用的JS脚本代码来实现相同的代码。

Answer 1

这就是解决问题的方法;

<a href="audiofile.mp3" id="anything" hidden="" download=""></a> <input alt="Submit" src="images/icons/download.jpg" type="image" onclick="document.getElementById('anything').click()" />