Beispielcode zur Implementierung eines Musikplayers mit nativem JS

const control = { //Player-Steuerung play speichern: document.querySelector('#myplay'),
 ...
  Index: 2, //Die Nummer des aktuell abgespielten Songs ...
}

const audioFile = { //Songdateien und zugehörige Informationsdatei speichern: document.getElementsByTagName('audio')[0],
  aktuelleZeit: 0,
  Dauer: 0,
}

const lyric = { // Konfiguration der Liedtext-Anzeigeleiste ele: null,
  totalLyricRows: 0,
  aktuelle Zeilen: 0,
  Zeilenhöhe: 0,
}

const modeControl = { //Wiedergabemodus mode: ['sequentiell', 'random', 'single'],
  Index: 0
}

const songInfo = { // DOM-Container zum Speichern von Songinformationen Name: document.querySelector('.song-name'),
 ...
}

// Musik abspielen und pausieren, vorheriges und nächstes Lied steuern control.play.addEventListener('click',()=>{
  Steuerung.istPlay = !Steuerung.istPlay;
  SpielerHandle();
} );
control.prev.addEventListener('click', vorherigerHandle);
control.next.addEventListener('klicken', nächsterHandle);
audioFile.file.addEventListener('beendet', nächsterHandle);

Funktion SpielerHandle() {
  const spielen = Steuerung.spielen;
  Steuerung.istWiedergeben ? audioFile.file.play() : audioFile.file.pause();
  if (Steuerung.istPlay) {
 //Musik abspielen, Symbol ändern und Animation abspielen play.classList.remove('songStop');
    spielen.classList.add('songStart');
    control.albumCover.classList.add('albumRotate');
    control.albumCover.style.animationPlayState = "läuft";
  } anders {
    //Musik anhalten, Symbol ändern und Animation anhalten …
  }
}


function prevHandle() { // Songs entsprechend dem Wiedergabemodus neu laden const modeIndex = modeControl.index;
  const songListLens = songList.Länge;
  if (modeIndex == 0) {//der Reihe nach abspielen let index = --control.index;
    Index == -1? (Index = SongListLens – 1): Index;
    control.index = index % songListLens;
  } sonst wenn (modeIndex == 1) {//Zufällige Wiedergabe const randomNum = Math.random() * (songListLens - 1);
    Steuerung.index = Math.round(Zufallszahl);
  } sonst wenn (modeIndex == 2) {//einzelnes Lied}
  neu laden(Songliste);
}

Funktion nächsterHandle() {
  const modeIndex = modeControl.index;
  const songListLens = songList.Länge;
  if (modeIndex == 0) {//Der Reihe nach abspielen control.index = ++control.index % songListLens;
  } sonst wenn (modeIndex == 1) {//Zufällige Wiedergabe const randomNum = Math.random() * (songListLens - 1);
    Steuerung.index = Math.round(Zufallszahl);
  } sonst wenn (modeIndex == 2) {//einzelnes Lied}
  neu laden(Songliste);
}

// Der Wiedergabefortschritt wird in Echtzeit aktualisiert audioFile.file.addEventListener('timeupdate', lyricAndProgressMove);
// Fortschritt durch Ziehen anpassen control.progressDot.addEventListener('click', adjustProgressByDrag);
// Fortschritt durch Klicken anpassen control.progressWrap.addEventListener('click', adjustProgressByClick);

Funktion lyricAndProgressMove() {
  const audio = Audiodatei.Datei;
  const controlIndex = steuerung.index;
 // Songinformationen initialisieren const songLyricItem = document.getElementsByClassName('song-lyric-item');
  wenn (songLyricItem.length == 0) returnieren;
  Lassen Sie aktuelle Zeit = audioFile.aktuelle Zeit = Math.round(audio.aktuelle Zeit);
  let Dauer = audioFile.duration = Math.round(audio.duration);

  //Bewegung des Fortschrittsbalkens const progressWrapWidth = control.progressWrap.offsetWidth;
  const currentBarPOS = aktuelleZeit / Dauer * 100;
  control.progressBar.style.width = `${currentBarPOS.toFixed(2)}%`;
  const currentDotPOS = Math.round(currentTime / Dauer * progressWrapWidth);
  Steuerung.progressDot.style.left = `${currentDotPOS}px`;

  songInfo.currentTimeSpan.innerText = formatTime(aktuelleZeit);

}

Funktion adjustProgressByDrag() {
  const fragBox = control.progressDot;
  const progressWrap = Steuerung.progressWrap
  ziehen(fragBox, progressWrap)
}

Funktion ziehen(fragBox, umbrechen) {
  const wrapWidth = wrap.offsetWidth;
  const wrapLeft = getOffsetLeft(wrap);

  Funktion dragMove(e) {
    lass disX = e.pageX - wrapLeft;
    changeProgressBarPos(disX, WrapWidth)
  }
  fragBox.addEventListener('mousedown', () => { //Ziehvorgang//Klicken, um zur einfachen Bedienung zu vergrößern fragBox.style.width = `14px`; fragBox.style.height = `14px`; fragBox.style.top = `-7px`;
    document.addEventListener('mousemove', dragMove);
    document.addEventListener('mouseup', () => {
      document.removeEventListener('mousemove', dragMove);
      fragBox.style.width = `10px`;fragBox.style.height = `10px`;fragBox.style.top = `-4px`;
    })
  });
}

function changeProgressBarPos(disX, wrapWidth) { //Statusaktualisierung des Fortschrittsbalkens const audio = audioFile.file
  const Dauer = Audiodatei.Dauer
  let dotPos
  let barPos

  wenn (disX < 0) {
    PunktPos = -4
    barPos = 0
    audio.aktuelleZeit = 0
  } sonst wenn (disX > 0 und disX < WrapWidth) {
    dotPos = disX
    Balkenpositionen = 100 * (disX / WrapWidth)
    audio.currentTime = Dauer * (disX / WrapWidth)
  } anders {
    Punktpositionen = WrapWidth - 4
    barPos = 100
    audio.currentTime = Dauer
  }
  Steuerung.progressDot.style.left = `${dotPos}px`
  control.progressBar.style.width = `${barPos}%`
}

Funktion adjustProgressByClick(e) {

  const wrap = control.progressWrap;
  const wrapWidth = wrap.offsetWidth;
  const wrapLeft = getOffsetLeft(wrap);
  const disX = e.pageX - wrapLeft;
  changeProgressBarPos(disX, WrapWidth)
}

// Echtzeitaktualisierung der Liedtextanzeige audioFile.file.addEventListener('timeupdate', lyricAndProgressMove);

Funktion lyricAndProgressMove() {
  const audio = Audiodatei.Datei;
  const controlIndex = steuerung.index;

  const songLyricItem = document.getElementsByClassName('song-lyric-Item');
  wenn (songLyricItem.length == 0) returnieren;
  Lassen Sie aktuelle Zeit = audioFile.aktuelle Zeit = Math.round(audio.aktuelle Zeit);
  let Dauer = audioFile.duration = Math.round(audio.duration);
  let totalLyricRows = lyric.totalLyricRows = songLyricItem.length;
  let LyricEle = lyric.ele = songLyricItem[0];
  let rowsHeight = lyric.rowsHeight = LyricEle und LyricEle.offsetHeight;
  //Songtext-Bewegung lrcs[controlIndex].lyric.forEach((item, index) => {
    wenn (aktuelleZeit === Artikel.Zeit) {
      lyric.currentRows = Index;
      songLyricItem[index].classList.add('song-lyric-item-active');
      index > 0 && songLyricItem[index - 1].classList.remove('song-lyric-item-active');
      wenn (Index > 5 und Index < totalLyricRows - 5) {
        songInfo.lyricWrap.scrollTo(0, `${rowsHeight * (index - 5)}`)
      }

    }
  })
}

// Wiedergabemodus einstellen control.mode.addEventListener('click', changePlayMode);

Funktion changePlayMode() {
  modeControl.index = ++modeControl.index % 3;
  const mode = Steuerungsmodus;
  modeControl.index === 0 ?
    mode.setAttribute("Klasse", "playerIcon songCycleOrder") :
    modeControl.index === 1 ?
      mode.setAttribute("Klasse", "PlayerIcon SongCycleRandom") :
      mode.setAttribute("Klasse", "playerIcon songCycleOnly")
}