시작하기 전에 uniapp 개발에 사용되는 두 가지 구성 요소인 오디오 오디오 구성 요소와 슬라이더 슬라이딩 선택기 구성 요소를 이해해야 합니다. 다음으로, 오디오 진행률 표시줄의 디자인을 구현하기 위해 다음 단계를 참조할 수 있습니다.
오디오 태그를 사용하여 페이지 템플릿에 오디오 구성 요소를 추가하고 src를 오디오 파일 경로로 설정하세요.
슬라이더 구성요소를 추가하고 바인딩된 v-model 값을 현재 재생 시간으로 설정하여 진행률 표시줄의 위치를 제어합니다.
CSS 스타일을 사용하여 진행률 표시줄 색상, 진행률 표시줄 슬라이더 스타일, 진행률 표시줄 최대값 및 최소값 등을 포함한 슬라이더 스타일을 설정하세요.
uniapp의 setInterval 함수를 사용하여 진행률 표시줄의 위치를 업데이트하고, 현재 재생 시간과 총 재생 시간을 기준으로 현재 진행률 표시줄 위치를 계산합니다.
사용자가 진행률 표시줄을 드래그할 때 슬라이더의 @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 중국어 웹사이트의 기타 관련 기사를 참조하세요!