Beispielcode von Vue + Element UI zur Realisierung der Player-Funktion

<div Klasse="right di main-wrap" v-loading="audio.waiting">
   <!-- Das Ref-Attribut hier kann einfach verwendet werden, um das DOM-Element in der Vue-Komponente über this.$refs.audio--> abzurufen.
   <audio ref="audio" Klasse="dn"
   :src="url" :preload="audio.preload"
   @play="beiWiedergabe"
   @error="beiFehler"
   @waiting="beimWarten"
   @pause="beiPause"
   @timeupdate="beiZeitupdate"
   @loadedmetadata="aufgeladene Metadata"
   ></audio>

   <div Klasse="w-voll">
     <div Klasse = "flex items-center w-10/12 mx-auto">
       <!-- Aktuelle Uhrzeit -->
       <el-tag type="info">{{ audio.currentTime | formatSecond}}</el-tag>

       <!-- Bildlaufleiste -->
       <el-slider v-show="!controlList.noProcess" v-model="sliderTime" :format-tooltip="formatProcessToolTip" @change="changeCurrentTime" class="slider_time"></el-slider>
       <!-- Gesamtdauer-->
       <el-tag type="info">{{ audio.maxTime | formatSecond }}</el-tag>
     </div>
     <div Klasse = "mt-3 Flex-Elemente-Center mit 1/2 mx-auto justify-around">
       <!-- Wiedergabe/Pause -->
       <el-button type="text" @click="startPlayOrPause">{{audio.playing | transPlayPause}}</el-button>
       <!-- Schneller Vorlauf -->
       <el-button v-show="!controlList.noSpeed" type="text" @click="changeSpeed">{{audio.speed | transSpeed}}</el-button>
       <!-- Stumm -->
       <el-button v-show="!controlList.noMuted" type="text" @click="startMutedOrNot">{{audio.muted | transMutedOrNot}}</el-button>
       <!-- Lautstärke -->
       <div Klasse="flex Elemente-Center">
         <span class="mr-2 text-sm">Lautstärke</span>
         <el-slider v-show="!controlList.noVolume" v-model="volume" :format-tooltip="formatVolumeToolTip" @change="changeVolume" class="slider_voice"></el-slider>
       </div>

       <!-- Herunterladen -->
       <a :href="url" rel="external nofollow" v-show="!controlList.noDownload" target="_blank" class="download text-sm" download>Herunterladen</a>
     </div>
   </div>
 </div>

<Skript>
  // Integer in das Format Stunde:Minute:Sekunde umwandeln Funktion realFormatSecond(Sekunde) {
    var zweiterTyp = Typ der Sekunde

    wenn (zweiterTyp === 'Zahl' || zweiterTyp === 'Zeichenfolge') {
      Sekunde = parseInt(Sekunde)

      var Stunden = Math.floor(Sekunde / 3600)
      Sekunde = Sekunde - Stunden * 3600
      var mimute = Math.floor(Sekunde / 60)
      Sekunde = Sekunde - Minute * 60

      returniere Stunden + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + Sekunde).slice(-2)
    } anders {
      Rückgabewert '0:00:00'
    }
  }

  Standard exportieren {
    Name: "Voice-to-Text",
    Requisiten: {
      dieGeschwindigkeiten:
        Typ: Array,
        Standard () {
          Rückgabe [1, 1,5, 2]
        }
      },
      dieKontrollliste: {
        Typ: Zeichenfolge,
        Standard: ''
      }
    },
    Daten(){
      zurückkehren {
        URL: „https://wdd.js.org/element-audio/static/falling-star.mp3“,
        Audio:
          aktuelleZeit: 0,
          maxZeit: 0,
          spielen: falsch,
          stummgeschaltet: falsch,
          Geschwindigkeit: 1,
          warten: wahr,
          Vorladen: „auto“
        },

        Schiebereglerzeit: 0,
        Volumen: 100,
        Geschwindigkeiten: this.theSpeeds,

        Kontrollliste: {
          // Download nicht anzeigen noDownload: false,
          // Stummschaltung nicht anzeigen noMuted: false,
          // Lautstärkebalken nicht anzeigen noVolume: false,
          // Fortschrittsbalken nicht anzeigen noProcess: false,
          // Es kann nur eines gespielt werden onlyOnePlaying: false,
          // Schaltfläche "Kein Schnellvorlauf" noSpeed: false
        }
      }
    },
    Methoden:{
      setzeKontrollliste () {
        let controlList = this.theControlList.split(' ')
        controlList.fürJeden((item) => {
          wenn(diese.controlList[item] !== undefiniert){
            this.controlList[item] = true
          }
        })
      },
      Geschwindigkeit ändern() {
        let index = this.speeds.indexOf(this.audio.speed) + 1
        diese.Audiogeschwindigkeit = diese.Geschwindigkeiten[Index % diese.Geschwindigkeiten.Länge]
        dies.$refs.audio.playbackRate = dies.audio.speed
      },
      startMutedOrNot() {
        dies.$refs.audio.muted = !dies.$refs.audio.muted
        dies.audio.muted = dies.$refs.audio.muted
      },
      // ToolTip der Lautstärkeleiste
      formatVolumeToolTip(index) {
        return 'Lautstärkebalken: ' + Index
      },
      //Fortschrittsbalken-ToolTip
      formatProcessToolTip(index = 0) {
        index = parseInt(dieses.audio.maxTime / 100 * index)
        return 'Fortschrittsbalken: ' + realFormatSecond(index)
      },
      // Lautstärke ändernchangeVolume(index = 0) {
        dies.$refs.audio.volume = index / 100
        dieses.Volumen = Index
      },
      // Sprung abspielen changeCurrentTime(index) {
        dies.pausePlay()
        dies.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime)
      },
      startPlayOrPause() {
        dieses.Audio.abspielen zurückgeben? dieses.PauseWiedergabe() : dieses.StartWiedergabe()
      },
      // Wiedergabe starten startPlay() {
        dies.$refs.audio.play()
      },
      // Pause pausePlay() {
        dies.$refs.audio.pause()
      },
      // Wenn die Audiowiedergabe pausiert ist onPause () {
        dieses.audio.playing = falsch
      },
      // Wenn ein Fehler auftritt, wird der Ladestatus angezeigt onError () {
        dies.audio.waiting = wahr
      },
      // Wenn das Audio startet, warten onWaiting (res) {
        Konsole.log(res)
      },
      // Wenn die Audiowiedergabe beginnt onPlay (res) {
        Konsole.log(res)
        dieses.audio.playing = true
        this.audio.loading = falsch

        wenn(!this.controlList.onlyOnePlaying){
          zurückkehren
        }

        lass Ziel = res.target

        let audios = document.getElementsByTagName('audio');

        [...audios].forEach((item) => {
          wenn(Element !== Ziel){
            item.pause()
          }
        })
      },
      // Das Timeupdate-Ereignis wird etwa einmal pro Sekunde aufgerufen, um die aktuelle Wiedergabezeit des Audiostreams zu aktualisieren onTimeupdate(res) {
        // console.log('Zeitupdate')
        // konsole.log(res)
        dies.audio.aktuelleZeit = res.target.aktuelleZeit
        this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
      },
      //Wenn die Metadaten des Sprachstreams geladen werden, wird die Rückruffunktion dieses Ereignisses ausgelöst. //Die Sprachmetadaten enthalten hauptsächlich Daten wie die Länge der Stimme onLoadedmetadata(res) {
        this.audio.waiting = falsch
        this.audio.maxTime = parseInt(res.target.duration)
      }
    },
    Filter:
      formatSekunde(Sekunde = 0) {
        returniere realFormatSecond(Sekunde)
      },
      transPlayPause(Wert) {
        Rückgabewert ? 'Pause' : 'Wiedergabe'
      },
      transMutedOrNot(Wert) {
        Rückgabewert ? 'Abspielen' : 'Stumm'
      },
      transSpeed(Wert) {
        return 'Schneller Vorlauf: x' + Wert
      }
    },
    erstellt() {
      dies.setControlList()
    }
  }
</Skript>

<style scoped lang="scss">
  .Rechts{
     Breite: 100 %;
     Polsterung: 10px 15px;
     Anzeige: Inline-Block;
     .Schieberegler {
       Anzeige: Inline-Block;
       Position: relativ;
       oben: 14px;
       Rand links: 15px;
     }
     .slider_time{
       Breite: 550px;
       Rand: 0 10px;
     }
     .slider_voice{
       Breite: 80px;
     }
     .herunterladen {
       Farbe: #409EFF;
       Rand links: 15px;
     }

     .dn{
       Anzeige: keine;
     }
   }

</Stil>