使用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()" />