uniapp에서 오디오 진행 표시줄을 만드는 방법

시작하기 전에 uniapp 개발에 사용되는 두 가지 구성 요소인 오디오 오디오 구성 요소와 슬라이더 슬라이딩 선택기 구성 요소를 이해해야 합니다. 다음으로, 오디오 진행률 표시줄의 디자인을 구현하기 위해 다음 단계를 참조할 수 있습니다.

1. 페이지에 오디오 구성 요소 추가

오디오 태그를 사용하여 페이지 템플릿에 오디오 구성 요소를 추가하고 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에서 오디오 진행 표시줄을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!