uniapp을 사용하여 오디오 재생 기능 구현-uni-app-php.cn

uniapp을 사용하여 오디오 재생 기능 구현

WBOY

풀어 주다： 2023-11-21 18:14:57

원래의

2064명이 탐색했습니다.

uniapp을 사용하여 오디오 재생 기능 구현

모바일 인터넷의 발달과 함께 오디오 재생 기능은 많은 애플리케이션에서 필수적인 기능 중 하나가 되었습니다. 오디오 재생 기능은 유니앱을 이용하여 쉽게 구현할 수 있으며, 크로스 플랫폼 특성을 갖고 있어 다양한 모바일 단말기에서 실행이 가능합니다.

유니앱을 개발하기 전에 먼저 오디오 리소스 파일을 준비해야 합니다. 이 기사에서는 "music.mp3"라는 오디오 파일을 예로 사용하겠습니다.

먼저 uniapp 프로젝트에서 오디오 재생 페이지를 생성해야 합니다. 페이지 폴더 아래에 "audio"라는 새 폴더를 만들고 폴더 아래에 "audio.vue"라는 파일을 만듭니다. "audio.vue" 파일에는 오디오 재생과 관련된 코드를 작성하겠습니다.

"audio.vue" 파일에서는 먼저 uni-audio 구성 요소를 포함하여 uniapp의 관련 구성 요소를 소개해야 합니다. 코드는 다음과 같습니다.

<template>
  <view>
    <uni-audio :src="audioUrl" :autoplay="autoplay" :loop="loop" @ended="audioEnded"></uni-audio>
    <view>
      <button @tap="playAudio">播放</button>
      <button @tap="pauseAudio">暂停</button>
      <button @tap="stopAudio">停止</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioUrl: '/static/music.mp3',
      autoplay: false,
      loop: false,
    }
  },
  methods: {
    playAudio() {
      uni.createAudioContext('uni-audio').play()
    },
    pauseAudio() {
      uni.createAudioContext('uni-audio').pause()
    },
    stopAudio() {
      uni.createAudioContext('uni-audio').stop()
    },
    audioEnded() {
      console.log('音频播放结束')
    },
  },
}
</script>

<style>
</style>

로그인 후 복사

위 코드에서는 uni-audio 컴포넌트를 사용하고, props를 통해 오디오 관련 속성을 설정했습니다. 그 중 audioUrl은 오디오 파일의 경로를 나타내고, autoplay는 자동 재생 여부를 나타내며, loop는 반복 여부를 나타냅니다.

페이지에는 오디오의 재생, 일시정지, 중지를 제어하는 세 개의 버튼을 만들었습니다. uni.createAudioContext 메서드를 호출하면 uni-audio 구성 요소의 컨텍스트 개체를 얻을 수 있고 해당 메서드를 호출하여 오디오 재생을 제어할 수 있습니다.

오디오 재생이 끝나면 uni-audio 컴포넌트의 @ended 이벤트를 사용하여 오디오 재생 종료 이벤트를 수신합니다. 이벤트 콜백 함수에서는 로그 출력 등 해당 작업을 수행할 수 있습니다.

위 코드 작성을 완료한 후 uniapp 구성 파일 app.json에 "오디오" 페이지를 등록해야 합니다. 구체적인 단계는 다음과 같습니다.