uniappでオーディオプログレスバーを作成する方法

始める前に、uniapp 開発で使用される 2 つのコンポーネント (オーディオ オーディオ コンポーネントとスライダー スライディング セレクター コンポーネント) を理解する必要があります。次に、次の手順を参照して、オーディオ プログレス バーのデザインを実装します。

1. 音声コンポーネントをページに追加します

ページのテンプレートの audio タグを使用して音声コンポーネントを追加し、src を音声のパスに設定します。ファイル。

2. プログレス バー スライダー コンポーネントを追加します。

スライダー コンポーネントを追加し、バインドされた v-model 値を現在の再生時間に設定して、プログレス バーの位置を制御します。

3. オーディオ進行状況バーのスタイルを設定する

CSS スタイルを使用して、進行状況バーの色、進行状況バーのスライダー スタイル、進行状況バーの最大値と最小値などのスライダー スタイルを設定します。 。

4. オーディオ プログレス バーの更新を実現する

uniapp の setInterval 関数を使用してプログレス バーの位置を更新し、現在のプログレス バーを計算します。現在の再生時間と合計再生時間 場所。

5. プログレス バーのドラッグ機能を実装する

ユーザーがプログレス バーをドラッグすると、スライダーの @change イベントを使用して現在のドラッグ値を取得できます。を使用して、オーディオ コンポーネントのシーク メソッドを使用すると、対応する再生位置にジャンプします。

最終的なコードは次のとおりです:

<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>

このようにして、uniapp にオーディオ進行状況バーのデザインを実装し、ユーザーがオーディオ再生の進行状況をより簡単に制御できるようにします。

以上がuniappでオーディオプログレスバーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。