如何在一页上创建多个用户控件？

Question

我有创建音频播放器的类 Player，在这个类的静态方法 create 中，我使用 innerHtml 将播放器的 ui 渲染到 dom 中，页面上有一个实例，它工作正常，但我想在一页上创建多个实例。 我该怎么做？ 也许我们有任何模式可以做到这一点？

class Player1{
player = new Audio()
timeMouseDown = false
volumeMouseDown = false
isRateListActive = false
isVolumeControlActive = false
btnPlay = document.querySelector('.play')
btnVolume = document.querySelector('.volume')
btnDownload = document.querySelector('.download')
btnUpload = document.querySelector('.upload')
// another elements

constructor(){
  this.player.src = "audio/1.mp3"
  this.player.loop = true
}

initListeners(){
  this.btnPlay.addEventListener('click', this.play.bind(this))
  this.btnVolume.addEventListener('click',this.showVolumeControl.bind(this))
  this.btnDownload.addEventListener('click',this.download.bind(this))
  this.btnUpload.addEventListener('click',this.upload.bind(this))
  //another events

}

static create(root){
  debugger
  this.root = document.querySelector(root);
  this.root.innerHTML = `<div class="player">
  <div class="title" oncopy="return false">Название дорожки</div>
  <div class="controls">
    <a href="#" class="play"><i class="fa fa-play"></i></a>
    <span class="time past_time">00:00</span>
    <div class="progress">
      <div class="progress_bar" data-progress="6rem">
        <div class="progress_line"></div>
        <div class="progress_control"></div>
      </div>
    </div>
    <span class="time rest_time">00:00</span>
    <div class="rate_picker">
      <div class="rate_list">
        //some tags
    </div>
  </div>
</div>`
}
initPlayer() {
  this.initListeners()
}

}