Cara membuat bar kemajuan audio dalam uniapp

Sebelum anda bermula, anda perlu memahami dua komponen yang digunakan dalam pembangunan uniapp: komponen audio audio dan komponen pemilih gelongsor gelangsar. Seterusnya, kita boleh merujuk kepada langkah berikut untuk melaksanakan reka bentuk bar kemajuan audio.

1. Tambah komponen audio pada halaman

Tambah komponen audio menggunakan teg audio dalam templat halaman dan tetapkan src pada laluan fail audio .

2. Tambah komponen peluncur bar kemajuan

Tambah komponen peluncur dan tetapkan nilai model v terikat kepada masa main balik semasa untuk mengawal kedudukan bar kemajuan.

3. Tetapkan gaya bar kemajuan audio

Gunakan gaya CSS untuk menetapkan gaya peluncur, termasuk warna bar kemajuan, gaya peluncur bar kemajuan, nilai maksimum dan minimum bar kemajuan tunggu.

4. Melaksanakan kemas kini bar kemajuan audio

Gunakan fungsi setInterval dalam uniapp untuk mengemas kini kedudukan bar kemajuan dan mengira bar kemajuan semasa berdasarkan masa main balik semasa dan jumlah masa main balik Lokasi.

5. Laksanakan fungsi penyeretan bar kemajuan

Apabila pengguna menyeret bar kemajuan, anda boleh menggunakan acara @ubah peluncur untuk mendapatkan nilai yang diseret pada masa ini , dan gunakan Kaedah cari komponen audio melompat ke kedudukan main balik yang sepadan.

Kod akhir adalah seperti berikut:

<template>
  <view>
    <audio :src="audioSrc" @timeupdate="updateTime"></audio>
    <slider v-model="currentTime" :max="duration" @change="changeTime"></slider>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        audioSrc: 'your-audio-src',
        duration: 0,
        currentTime: 0,
        timeUpdate: null
      }
    },
    mounted() {
      this.initAudio()
    },
    methods: {
      initAudio() {
        let audio = uni.createInnerAudioContext()
        audio.src = this.audioSrc
        audio.onTimeUpdate(() => {
          this.duration = audio.duration
          this.currentTime = audio.currentTime
        })
        audio.play()
        this.timeUpdate = setInterval(() => {
          this.currentTime = audio.currentTime
        }, 500)
      },
      updateTime(e) {
        this.currentTime = e.detail.currentTime
        this.duration = e.detail.duration
      },
      changeTime(e) {
        let audio = uni.createInnerAudioContext()
        audio.src = this.audioSrc
        audio.seek(e.detail.value)
      }
    }
  }
</script>

<style scoped>
  .uni-slider-wrapper {
    height: 8px;
    border-radius: 4px;
    background-color: #ccc;
  }
 
  .uni-slider-track {
    height: 8px;
    border-radius: 4px;
    background-color: #1cbbb4;
  }
 
  .uni-slider-thumb {
    border-radius: 12px;
    background-color: #1cbbb4;
  }
</style>

Dengan cara ini, kami boleh melaksanakan reka bentuk bar kemajuan audio dalam uniapp, membolehkan pengguna mengawal kemajuan main balik audio dengan lebih mudah.

Atas ialah kandungan terperinci Cara membuat bar kemajuan audio dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!