title: inserting the src file in dynamically to audio tag and storing src name in html code
body: <p>I have been writing some code that plays audio files. I've used the one audio player and when one button is clicked, corresponding src files ogg and mp3 are dynamically inserted into the source tags of the audio player. The only way I could see to do this (while also trying to avoid an inline javascript onclick event handler) is as follows. I have the directory of the mp3 file and the ogg file stored in a div tag with an id. and then have hidden the tag with css. (This filename will be extracted from a database) Anyway, I have a feeling this is not a good practise to have content hidden in a div like that. and I always try to keep up with best practises. Have you any thoughts and what could be better? thanks</p>
  
  <p>My html:</p>
  
  <pre><code>    &lt;ul id='audio_list'&gt;
  
                  &lt;li class='gradient_blackblue'&gt;
  
                      &lt;div class='audio_controls_area'&gt;
                      &lt;div id='timer'&gt;&lt;/div&gt;
                          &lt;div class='circle'&gt;&lt;/div&gt;
                          &lt;div class ='play_pause'&gt;
                              &lt;div class='play button_style' id='btnPlayPause0'&gt;&lt;i class='fa fa-play'&gt;&lt;/i&gt;
                              &lt;div id='file_mp3'&gt;music/electronic beat-monksee.mp3&lt;/div&gt;
                              &lt;div id='file_ogg'&gt;music/electronic beat-monksee.ogg&lt;/div&gt;
                              &lt;/div&gt;  
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                      &lt;div class='audio_description'&gt;Electro Soundz
                          &lt;div id='slider_area'&gt;
                          &lt;span id='songTime0' class='songTime'&gt;0:00&lt;/span&gt;
                          &lt;input id='sliderTime0' class='slider' type='range' min='0' value='0'/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/li&gt;
  
  
                  &lt;li class='gradient_blackblue'&gt;
                      &lt;div class='audio_controls_area'&gt;
                          &lt;div id='timer'&gt;&lt;/div&gt;
                          &lt;div class='circle'&gt;&lt;/div&gt;
                          &lt;div class ='play_pause'&gt;
                              &lt;div class='play button_style' id='btnPlayPause1'&gt;&lt;i class='fa fa-play'&gt;&lt;/i&gt;
                                  &lt;div id='file_mp3'&gt;music/dubstep.mp3&lt;/div&gt;
                                  &lt;div id='file_ogg'&gt;music/dubstep.mp3&lt;/div&gt;
                              &lt;/div&gt;  
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                      &lt;div class='audio_description'&gt;Dubstep beat
                          &lt;div id='slider_area'&gt;
                          &lt;span id='songTime1' class='songTime'&gt;0:00&lt;/span&gt;
                          &lt;input id='sliderTime1' class='slider' type='range' min='0' value='0' /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
              &lt;/li&gt;
  &lt;/ul&gt;
  
      &lt;audio id ='audio_player'&gt;
      &lt;source id='src_mp3' type='audio/mp3'/&gt;
      &lt;source id='src_ogg' type='audio/ogg'/&gt;
      &lt;object id='audio_object' type='audio/x-mpeg' width='200px' height='45px' &gt;
              &lt;param id = 'param_src' name='src'/&gt;
              &lt;param name='autoplay' value='false' /&gt;
              &lt;param name='autostart' value='false' /&gt;
          &lt;/object&gt;
      &lt;/audio&gt;
  </code></pre>
  
  <p>My css:</p>
  
  <pre><code>*,
  *:after,
  *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  body{
  
  
  }
  
  .play_pause {
   width: 50px;
    height: 50px;
    margin: 15px;
    position: relative;
  
  }
  
  .play_pause .button_style{
    cursor: pointer;
  width:100%;
  height:100%;
  display: block;
  position: relative;
  border-radius: 50%;
  border-bottom: 1px outset #1532AE;
  color: #fff; /*color of play before pressed*/
  font-size: 30px;
  text-align: center;
  line-height: 50px;
  background: rgb(9,178,249); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(9,178,249,1) 0%, rgba(11,164,237,1) 15%, rgba(20,76,173,1) 73%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(9,178,249,1)), color-stop(15%,rgba(11,164,237,1)), color-stop(73%,rgba(20,76,173,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(9,178,249,1) 0%,rgba(11,164,237,1) 15%,rgba(20,76,173,1) 73%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(9,178,249,1) 0%,rgba(11,164,237,1) 15%,rgba(20,76,173,1) 73%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(9,178,249,1) 0%,rgba(11,164,237,1) 15%,rgba(20,76,173,1) 73%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(9,178,249,1) 0%,rgba(11,164,237,1) 15%,rgba(20,76,173,1) 73%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#09b2f9', endColorstr='#144cad',GradientType=0 ); /* IE6-9 */
  z-index: 1;
  }
  
  .play_pause .play{
  box-shadow:
      inset 0 2px 3px rgba(255,255,255,0.13),
      0 5px 8px rgba(0,0,0,0.3),
      0 8px 10px 2px rgba(0,0,0,0.6); /*this is what makes it look like it is being pressed*/
  text-shadow: 0 2px 0px rgba(0,0,0,0.25); /*the middle text*/
  }
  
  .play_pause .button_style:before {
    content: ""; 
    position: absolute;
    left: -8px;
    right: -8px;
    top: -8px;
    bottom: -8px;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 10px 10px rgba(0,0,0,0.13); 
    -webkit-filter:blur(1px); /*smooth trick*/
    -moz-filter:blur(1px);
    -ms-filter:blur(1px);
    -o-filter:blur(1px);
    filter: blur(1px); /*future proof*/
  
  }
  
  .play_pause .button_style:after {
    content: ""; 
    position: absolute;
    left: -8px;
    right: -8px;
    top: -8px;
    bottom: -8px;
    z-index: -2;
    border-radius: inherit;
  box-shadow:
      inset 0 1px 0 rgba(255,255,255,1), /*tried changin but its just blue line around outside*/
      0 1px 2px rgba(0,0,0,0.3),
      0 0 10px rgba(5,52,140,1); /*outside shadow line*/
    }
  
  .play_pause .isPlaying { /*button*/
    box-shadow:
      inset 0 2px 3px rgba(157,157,157,0.13),
      0 5px 8px rgba(0,0,0,0.35),
      -1px -1px 8px 0px rgba(0,0,0,0.6);
  text-shadow: rgb(70, 70, 70) -1px -1px 1px;
  } 
  
  
  .play_pause .fa-play:after {
    content: "";
    display: block;
    position: absolute;
    width: 70%;
    height: 70%;
    left: 50%;
    top: 50%;
    z-index: -1;
    margin: -37% 0 0 -40%;
  
  }
  
  .play_pause .fa-stop{
  content: "";
  display: block;
  position: absolute;
  width: 70%;
  height: 70%;
  left: 13%;
  top: 21%;
  font-size: 26px;
  z-index: -2;
  }
  
  
  .circle {
    content: ""; 
    position: absolute;
  background: #fff;
  left: 10%;
  
    top: 9%;
  width: 64px;
  height: 64px;
    z-index: -50;
    border-radius: 50%;
  }
  
  
  #timer{
  position: absolute;
  left: 10%;
  top: 9%;
  width: 64px;
  height: 64px;
    z-index: -45;
    border-radius: 50%;
  }
  
  #timer:before, #timer.timer{
  display: none;
      content: "";
      position: absolute;
      width: 6px;
      height: 64px;
      left: 46%;
  
      z-index: -1;
      background: url(timer.png) 0 0 no-repeat;
  
  }
  
  
  #file_mp3{
  display: none;
  
  }
  #file_ogg{
  display: none;
  
  }
  </code></pre>
  
  <p>Javscript and jquery:</p>
  
  <pre><code>var player;
      var intv;
      var slider;
      var max;
      var duration;
  
      //init
      window.onload = function(){
      player = document.getElementById('audio_player');
      }
  
  
      function playMusic(songTime, button){
      player.play();
      intv = setInterval(function() { update(songTime, button); }, 100);
      $(player).on("loadeddata", function(){
              window.degreePerSecond = 360/window.duration;
              $(window.timer).addClass('timer');
              $('#timer.timer').css({
              'display':'block'
  
              });
      });
  
  
      }
  
      function pauseMusic(){
      player.pause();
      clearInterval(intv);
      }
  
      function stopMusic(){
      player.pause();
      player.currentTime = 0;
      clearInterval(intv);
      }
  
      function reposition(){
      var reposition_value = $(slider).val();
      player.currentTime = reposition_value;
  
      }
  
      function update(songTime, button){
      $(songTime).html(millisToMins(player.currentTime));
      $(slider).val(player.currentTime);
      var current = player.currentTime;
  
      var degreeCurrent = (window.degreePerSecond*current);
      $(window.timer).css({
      '-webkit-transform':'rotate(' + degreeCurrent + 'deg)',
      '-moz-transform': 'rotate(' + degreeCurrent + 'deg)',
      '-ms-transform': 'rotate(' + degreeCurrent + 'deg)',
      '-o-transform' : 'rotate(' + degreeCurrent + 'deg)',
      'transform' : 'rotate(' + degreeCurrent + 'deg)'
      });
  
      if ((player.duration &gt; 0) &amp;&amp; (player.currentTime== player.duration)){
          $(button).addClass("play").removeClass("isPlaying");
          $(button).children("i").addClass("fa-play").removeClass("fa-stop");
          $(window.timer).removeClass('timer');
          $(window.timer).removeAttr('style');
  
          //alert("player duration");
          stopMusic();
  
      }
  
      }
  
      function millisToMins(seconds){
      var numminutes = Math.floor((((seconds % 31536000) % 86400) % 3600) / 60);
      var numseconds = (((seconds % 31536000) % 86400) % 3600) % 60;
      if (numseconds &gt;= 10){
      return numminutes + ":" + Math.round(numseconds);
      }else{
      return numminutes + ":0" + Math.round(numseconds);
      }
      }
  
      $(document).ready(function(){
      $('li .button_style').click(function(){
              $(window.timer).removeClass('timer');
              $(window.timer).removeAttr('style');
              //console.log($(window.timer).closest('li').html());
              clearInterval(intv);
  
          if($(this).hasClass("isPlaying")){
              pauseMusic();
              $(this).addClass("play").removeClass("isPlaying");
              $(this).children("i").addClass("fa-play").removeClass("fa-stop");
  
          }else if($(this).hasClass("play")){
              var mp3 = $('&gt; #file_mp3', this).html();
              var ogg = $('&gt; #file_ogg', this).html();
              $('#src_mp3').attr('src', mp3);
              $('#src_ogg').attr('src', ogg);
              $('#audio_object').attr('data', mp3);
              $('#param_src').attr('value', mp3);
              player.load();
  
              songTime = $('.songTime', $(this).closest('li'));
              window.timer = $('#timer', $(this).closest('li'));
              slider = $('.slider', $(this).closest('li'));
              $(slider).on('change', reposition);
              $(player).on("loadeddata", function(){
                  window.duration = player.duration;
                  $(slider).attr('max', window.duration);
              });
  
              var button = $(this);
              playMusic(songTime, button);
              $(".button_style").addClass("play").removeClass("isPlaying");
              $("div").children("i").addClass("fa-play").removeClass("fa-stop");
              $(this).children("i").removeClass("fa-play").addClass("fa-stop");
              $(this).removeClass("play").addClass("isPlaying");
          console.log($('#audio_list').html());
          }
      });
  
  
  
  });
  </code></pre>
  
  <p>A jsfiddle of the code
  <a href="http://jsfiddle.net/LAZay/2/" rel="nofollow">http://jsfiddle.net/LAZay/2/</a></p>