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

我有一个创建音频播放器的类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()
}

class播放器1{
播放器=新音频（）
timeMouseDown=false
volumeMouseDown=false
Isratestative=错误
IsVolumeControlative=false
btnPlay=document.querySelector（“.play”）
btnVolume=document.querySelector（“.volume”）
btnDownload=document.querySelector（“.download”）
btnUpload=document.querySelector（“.upload”）
//其他要素
构造函数（）{
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））
//另一事件
}
静态创建（根）{
调试器
this.root=document.querySelector（root）；
this.root.innerHTML=`
Название дорожки
00:00
00:00
//一些标签
`
}
initPlayer（）{
this.initListeners（）
}

---

}

你能分享你的代码吗？我已经编辑了我的问题，但无法放置所有代码，因为从站点获取警告我会将类名从Player1更改为Player，并在for循环中调用Player.initPlayer（）。