Cara menggunakan tag audio dalam uniapp

Dengan pembangunan Internet mudah alih, aplikasi berkaitan audio menjadi semakin popular di kalangan pengguna, seperti pemain muzik, sembang suara, pengecaman pertuturan, dsb. Sangat mudah untuk menggunakan uniapp untuk membangunkan aplikasi audio ini Salah satu komponen penting ialah tag

1. Penggunaan asas

Dalam uniapp, anda boleh terus menggunakan teg

<audio src="../../static/audio.mp3" id="myAudio"></audio>

Antaranya, atribut src menentukan laluan fail audio dan atribut id digunakan untuk mentakrifkan pengecam unik untuk teg

2. Mainkan audio

Untuk memainkan audio, anda perlu mendapatkan teg

const myAudio = uni.createInnerAudioContext();
myAudio.src = "../../static/audio.mp3";
myAudio.play();

Antaranya, kaedah createInnerAudioContext() digunakan untuk mencipta contoh teg

3. Jeda audio

Untuk menjeda audio yang sedang dimainkan, anda boleh menggunakan kaedah jeda() Kod sampel adalah seperti berikut:

myAudio.pause();

4. Hentikan Audio

Untuk menghentikan audio yang dimainkan, anda boleh menggunakan kaedah stop() Kod sampel adalah seperti berikut:

myAudio.stop();

Perlu diambil perhatian bahawa selepas. menghentikan audio, anda perlu memanggil kaedah destroy() untuk memusnahkannya Sumber hanya boleh dikeluarkan oleh contoh teg

myAudio.destroy();

5. Acara mendengar

• onPlay(): dicetuskan apabila audio mula dimainkan.
• onPause(): Dicetuskan apabila audio dijeda.
• onStop(): Dicetuskan apabila audio berhenti.
• onEnded(): Dicetuskan apabila main balik audio tamat.
• onError(): Dicetuskan apabila ralat main balik audio berlaku.

Kod sampel adalah seperti berikut:

myAudio.onPlay(() => {
  console.log('音频开始播放');
});

myAudio.onPause(() => {
  console.log('音频暂停');
});

myAudio.onStop(() => {
  console.log('音频停止');
});

myAudio.onEnded(() => {
  console.log('音频播放结束');
});

myAudio.onError((res) => {
  console.error('音频播放出错', res.errMsg);
});

Di atas ialah operasi asas menggunakan teg

Ringkasan

Artikel ini memperkenalkan operasi asas menggunakan tag

Atas ialah kandungan terperinci Cara menggunakan tag audio dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!