title: How to make multiple html elements use the same Javascript without copying code and changing variables?
body: <p>I apologize if the title isn't clear, I created a simple audio player with html and java, is there a way to put multiple of these on my website without the need to rewrite all the variables, IDs and stuff?</p>
  <p>I think I'd need to use classes, but I don't really have much knowledge about OOP, so any help is appreciated.</p>
  <p>Here's my html:</p>
  <pre><code>&lt;body&gt;
      &lt;div id=&quot;wrapper&quot;&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Song&lt;/legend&gt;
              &lt;div id='player'&gt;
                  &lt;audio id=&quot;music_player&quot; preload=&quot;metadata&quot; loop&gt;
                      &lt;source src=&quot;music\song.mp3&quot;&gt;
                  &lt;/audio&gt;
                  &lt;input type=&quot;image&quot; src=&quot;images/playButton.png&quot; onclick=&quot;play_aud()&quot; id=&quot;play_button&quot;&gt;
                  &lt;input type=&quot;image&quot; src=&quot;images/pauseButton.png&quot; onclick=&quot;pause_aud()&quot; id=&quot;play_button&quot;&gt;
                  &lt;input type=&quot;image&quot; src=&quot;images/stopButton.png&quot; onclick=&quot;stop_aud()&quot; id=&quot;play_button&quot;&gt;
                  &lt;span id=&quot;current-time&quot; class=&quot;time&quot;&gt;0:00&lt;/span&gt;
                  &lt;input type=&quot;range&quot; id=&quot;seek-slider&quot; max=&quot;100&quot; value=&quot;0&quot;&gt;
                  &lt;span id=&quot;duration&quot; class=&quot;time&quot;&gt;0:00&lt;/span&gt;
                  &lt;input type=&quot;image&quot; src=&quot;images/volumeButton.png&quot; id=&quot;vol_img&quot; onclick=&quot;mute()&quot;&gt;
                  &lt;input type=&quot;range&quot; id=&quot;change_vol&quot; onchange=&quot;change_vol()&quot; step=&quot;0.05&quot; min=&quot;0&quot; max=&quot;1&quot; value=&quot;1&quot;&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>And Javascript:</p>
  <pre><code>
  let muteState = 'unmute';
  
  var player;
  
  const audioButton = document.getElementById('vol-img');
  const currentTimeContainer = document.getElementById('current-time');
  const audio = document.querySelector('audio');
  const durationContainer = document.getElementById('duration');
  const seekSlider = document.getElementById('seek-slider')
  const calculateTime = (secs) =&gt; {
      const minutes = Math.floor(secs / 60);
      const seconds = Math.floor(secs % 60);
      const returnedSeconds = seconds &lt; 10 ? `0${seconds}` : `${seconds}`;
      return `${minutes}:${returnedSeconds}`;
  }
  const displayDuration = () =&gt; {
      durationContainer.textContent = calculateTime(audio.duration);
  }
  const setSliderMax = () =&gt; {
      seekSlider.max = Math.floor(audio.duration);
  }
  const displayBufferedAmount = () =&gt; {
      const bufferedAmount = Math.floor(audio.buffered.end(audio.buffered.length - 1));
      audioPlayerContainer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);
  }
  
  function startplayer() 
  {
   player = document.getElementById('music_player');
   player.controls = false;
  }
  function play_aud() 
  {
   player.play();
  } 
  function pause_aud() 
  {
   player.pause();
  }
  function stop_aud() 
  {
   player.pause();
   player.currentTime = 0;
  }
  function change_vol()
  {
   player.volume=document.getElementById(&quot;change_vol&quot;).value;
  }
  function mute()
  {
      if(muteState == 'mute')
      {
          document.getElementById('vol_img').src = 'images/volumeButton.png';
          muteState = 'unmute';
          audio.muted = false;
      }
      else
      {
          document.getElementById('vol_img').src = 'images/volumeButtonmute.png';
          muteState = 'mute'
          audio.muted = true;
      }
  };
  
  if (audio.readyState &gt; 0) {
      displayDuration();
      setSliderMax();
      displayBufferedAmount();
  } else {
      audio.addEventListener('loadedmetadata', () =&gt; {
          displayDuration();
          setSliderMax();
          displayBufferedAmount();
      });
  }
  
  audio.addEventListener('progress', displayBufferedAmount);
  
  seekSlider.addEventListener('input', () =&gt; {
    currentTimeContainer.textContent = calculateTime(seekSlider.value);
  });
  
  seekSlider.addEventListener('change', () =&gt; {
      audio.currentTime = seekSlider.value;
  });
  audio.addEventListener('timeupdate', () =&gt; {
      seekSlider.value = Math.floor(audio.currentTime);
      currentTimeContainer.textContent = calculateTime(audio.currentTime);
  });
  </code></pre>