Gunakan uniapp untuk melaksanakan fungsi main balik audio

Gunakan uniapp untuk melaksanakan fungsi main balik audio

Dengan pembangunan Internet mudah alih, fungsi main balik audio telah menjadi salah satu fungsi penting untuk banyak aplikasi. Fungsi main balik audio boleh dilaksanakan dengan mudah menggunakan uniapp, dan ia mempunyai ciri merentas platform dan boleh dijalankan pada terminal mudah alih yang berbeza.

Sebelum membangunkan uniapp, kami perlu menyediakan fail sumber audio terlebih dahulu. Dalam artikel ini, kami akan menggunakan fail audio bernama "music.mp3" sebagai contoh.

Pertama, kita perlu membuat halaman main balik audio dalam projek uniapp. Di bawah folder halaman, buat folder baharu bernama "audio" dan buat fail bernama "audio.vue" di bawah folder. Dalam fail "audio.vue", kami akan menulis kod yang berkaitan dengan main balik audio.

Dalam fail "audio.vue", kami perlu memperkenalkan komponen uniapp yang berkaitan, termasuk komponen uni-audio terlebih dahulu. Kodnya adalah seperti berikut:

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

Dalam kod di atas, kami menggunakan komponen uni-audio dan menetapkan sifat berkaitan audio melalui prop. Antaranya, audioUrl mewakili laluan fail audio, automain mewakili sama ada untuk dimainkan secara automatik dan gelung mewakili sama ada untuk menggelung.

Pada halaman, kami mencipta tiga butang untuk mengawal main, jeda dan berhenti audio. Dengan memanggil kaedah uni.createAudioContext, kita boleh mendapatkan objek konteks komponen uni-audio dan memanggil kaedah yang sepadan untuk mengawal main balik audio.

Apabila main balik audio tamat, kami mendengar acara tamat main balik audio dengan menggunakan acara @ended pada komponen uni-audio. Dalam fungsi panggil balik acara, kita boleh melakukan operasi yang sepadan, seperti mengeluarkan log.

Selepas melengkapkan penulisan kod di atas, kami perlu mendaftar halaman "audio" dalam fail konfigurasi uniapp app.json. Langkah-langkah khusus adalah seperti berikut:

1. Buka fail app.json
2. Tambah "halaman/audio/audio" dalam medan halaman
3. Simpan fail.

Kini, kami boleh melihat dan menguji fungsi main balik audio dalam persekitaran berjalan uniapp. Klik butang jalankan dalam alat pembangunan uniapp untuk melihat halaman main balik audio pada simulator dan melakukan operasi yang sepadan.

Ringkasnya, fungsi main balik audio boleh dilaksanakan dengan mudah menggunakan uniapp. Dengan memperkenalkan komponen uni-audio dan menetapkan sifat dan peristiwa yang sepadan, dalam pembangunan sebenar, kami boleh menyesuaikan halaman main balik audio kami sendiri mengikut keperluan dan melaksanakan fungsi yang lebih kaya.

(Kod di atas adalah untuk rujukan sahaja, pelaksanaan khusus mungkin berbeza-beza bergantung pada versi uniapp dan persekitaran pembangunan yang digunakan.)

Atas ialah kandungan terperinci Gunakan uniapp untuk melaksanakan fungsi main balik audio. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!