title: Javascript file download with Joomla
body: <p>I am coding in Joomla in which I have self synchronized three audio tracks i.e when one of them starts on the web page the other stop and below is the JS code for the same;</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      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);
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Below is the Styling;</p>
  
  <pre><code>&lt;style scoped="scoped" type="text/css"&gt;
  .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;
  }
  </code></pre>
  
  <p></p>
  
  <p>And the html code is;</p>
  
  <pre><code>&lt;div id="trackbox"&gt;&amp;nbsp;&lt;/div&gt;
  </code></pre>
  
  <p>Having achieved this I want to place a download icon besides every mp3 which allows me to download the track, I have the link to download the file and it is placed in the media (Content) of Joomla and also I want a icon to be placed which will trigger the download onClick.
  Is there a JS script code available with which I can implement the same.</p>