uniapp tidak boleh memainkan audio

Dalam beberapa tahun kebelakangan ini, dengan perkembangan teknologi Internet mudah alih, kehidupan dan kerja kita tidak dapat dipisahkan daripada pelbagai APP. Sebagai rangka kerja pembangunan merentas platform, Uniapp juga telah menjadi pilihan popular untuk pembangunan mudah alih. Uniapp bukan sahaja memudahkan pembangunan aplikasi untuk berbilang platform seperti Android, iOS, Web dan applet, tetapi juga menyediakan pelbagai antara muka dan komponen untuk memudahkan pembangun melaksanakan pelbagai fungsi. Walau bagaimanapun, sesetengah pembangun Uniapp menghadapi masalah tidak dapat memainkan audio semasa pembangunan aplikasi mereka. Jadi, apa sebenarnya yang menyebabkan masalah sedemikian? Mari kita bincangkan bersama di bawah.

1. Cara melaksanakan main balik audio dalam Uniapp

Dalam Uniapp, biasanya terdapat dua cara untuk memainkan audio: menggunakan uni.createInnerAudioContext() dan menggunakan uni.createAudioContext(). Antaranya, uni.createInnerAudioContext() ialah API yang disediakan secara rasmi oleh Uniapp dan uni.createAudioContext() ialah API yang disediakan oleh applet WeChat. Dalam Uniapp, kedua-dua API boleh digunakan secara normal, tetapi pelaksanaannya berbeza.

uni.createInnerAudioContext() mencipta konteks audio dalaman melalui uni.createInnerAudioContext({}), kemudian menetapkan laluan audio, sama ada untuk memainkan secara automatik dan parameter lain, dan akhirnya memanggil kaedah play() konteks untuk memainkan audio. Kod sampel adalah seperti berikut:

const music = uni.createInnerAudioContext();
music.src = 'http://xxx.mp3';     // 设置音频路径
music.autoplay = true;            // 是否自动播放
music.onPlay(() => {              // 播放开始事件
  console.log('play start');
});

Dengan cara yang sama, uni.createAudioContext() juga mencipta konteks audio melalui uni.createAudioContext({}), kemudian menetapkan parameter seperti laluan audio dan akhirnya memanggil kaedah main() konteks untuk memainkan audio. Perbezaannya ialah pada platform lain, anda perlu memperkenalkan komponen audio dan menentukan tag audio dalam templat untuk memaparkan audio. Kod sampel adalah seperti berikut:

<template>
  <audio id="myAudio" :src="audioSrc" controls="controls"></audio>
  <button @click="playAudio">播放音频</button>
</template>
<script>
  export default {
    data() {
      return {
        audioSrc: 'http://xxx.mp3'
      }
    },
    methods: {
      playAudio() {
        const audioContext = uni.createAudioContext('myAudio');
        audioContext.play();
      }
    }
  }
</script>

2 Soalan Lazim tentang Main Balik Audio Uniapp

1 Ralat laluan audio

Laluan audio dalam Uniapp boleh menjadi fail setempat laluan atau Laluan fail pada pelayan jauh. Tetapi apabila menggunakannya, anda perlu memberi perhatian kepada sama ada laluan itu betul. Jika laluan salah, akan berlaku kegagalan semasa memainkan audio. Secara umumnya, kita boleh menyemak sama ada ia memperoleh laluan audio dengan betul dengan mencetak objek konteks audio.

const music = uni.createInnerAudioContext();
console.log(music);            // 打印出音频上下文对象

2. Sumber audio tidak boleh dimuatkan

Jika laluan audio betul, tetapi audio masih tidak dapat dimainkan, maka sumber audio mungkin tidak dapat dimuatkan. Terdapat banyak sebab untuk keadaan ini, seperti ketidakstabilan rangkaian, kegagalan pelayan, dll. Pada ketika ini, kita boleh melihat maklumat ralat khusus dengan mencetak peristiwa ralat objek konteks audio.

const music = uni.createInnerAudioContext();
music.src = 'http://xxx.mp3';
music.onError((err) => {      // 错误事件
  console.log(err);
});

3. Main balik audio tidak boleh diteruskan

Semasa proses main balik audio, kadangkala main balik audio tidak boleh diteruskan. Sebab utama masalah ini ialah cache main balik audio yang tidak mencukupi, mengakibatkan masalah main balik audio. Pada masa ini, anda boleh menyemak status audio dengan mencetak objek konteks audio dan mendapatkan maklumat seperti saiz cache dan kemajuan cache main balik audio.

const music = uni.createInnerAudioContext();
music.src = 'http://xxx.mp3';
music.onSeeked(() => {        // 缓存完成事件
  console.log('缓存完成');
});
music.onWaiting(() => {       // 等待缓存事件
  console.log('等待缓存');
});
music.onError((err) => {      // 错误事件
  console.log(err);
});

3. Teknik pengoptimuman main balik audio

1 Hidupkan penimbalan pra-main

Untuk meningkatkan kelancaran main balik audio, kami boleh melakukan pra-main semula sebelum. penimbal main balik audio. Proses ini boleh difahami sebagai menghantar aliran data audio ke memori pelanggan melalui rangkaian, dan kemudian membaca data audio terus dari memori apabila mula bermain, mengelakkan kesan kesesakan rangkaian, dengan itu meningkatkan kelancaran main balik audio . Dalam Uniapp, kami boleh menggunakan acara onCanplay() uni.createInnerAudioContext() untuk mengesan sama ada audio boleh mula dimainkan dan kami boleh menggunakan atribut pramuat teg audio untuk menimbal sebelum dimainkan.

2. Optimumkan kelajuan pemuatan audio

Untuk meningkatkan kelajuan pemuatan audio, kami boleh memampatkan audio dan mengurangkan saiz fail audio. Di samping itu, pecutan CDN dan kaedah lain boleh digunakan untuk mengoptimumkan kelajuan pemuatan audio, dengan itu meningkatkan kelancaran main balik audio.

3. Penggunaan memori yang munasabah

Dalam Uniapp, memainkan audio memerlukan memori. Untuk mengelakkan program membeku atau ranap yang disebabkan oleh penggunaan memori yang berlebihan, kita boleh memanggil kaedah destroy() objek konteks audio untuk melepaskan sumber memori selepas main balik audio selesai.

Ringkasnya, semasa proses pembangunan Uniapp, adalah perkara biasa untuk menghadapi masalah tidak dapat memainkan audio. Tetapi selagi kami memahami cara main balik audio dilaksanakan dan masalah biasa, serta menguasai beberapa teknik pengoptimuman, kami boleh menyelesaikan masalah ini dengan cekap.

Atas ialah kandungan terperinci uniapp tidak boleh memainkan audio. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!