uniapp cannot play audio

In recent years, with the development of mobile Internet technology, our life and work are inseparable from various APPs. As a cross-platform development framework, Uniapp has also become a popular choice for mobile development. Uniapp not only facilitates application development for multiple platforms such as Android, iOS, Web, and applets, but also provides a variety of interfaces and components to facilitate developers to implement various functions. However, some Uniapp developers encountered the problem of being unable to play audio during the development of their applications. So, what exactly causes such a problem? Let’s discuss it together below.

1. How to implement audio playback in Uniapp

In Uniapp, there are usually two ways to play audio: using uni.createInnerAudioContext() and using uni.createAudioContext(). Among them, uni.createInnerAudioContext() is the API officially provided by Uniapp, and uni.createAudioContext() is the API provided by WeChat applet. In Uniapp, both APIs can be used normally, but their implementation is different.

uni.createInnerAudioContext() creates an internal audio context through uni.createInnerAudioContext({}), then sets the audio path, whether to automatically play and other parameters, and finally calls the play() method of the context to play the audio. . The sample code is as follows:

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

In the same way, uni.createAudioContext() also creates an audio context through uni.createAudioContext({}), then sets parameters such as the audio path, and finally calls the play() method of the context. to play audio. The difference is that on other platforms, you need to introduce the audio component and define the audio tag in the template to display the audio. The sample code is as follows:

<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. Frequently Asked Questions about Uniapp Audio Playback

1. Audio path error

The audio path in Uniapp can be a local file path or The file path on the remote server. But when using it, you need to pay attention to whether the path is correct. If the path is wrong, there will be a failure when playing audio. Generally speaking, we can check whether it obtains the audio path correctly by printing out the audio context object.

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

2. The audio resource cannot be loaded

If the audio path is correct, but the audio still cannot be played, then it is possible that the audio resource cannot be loaded. There are many reasons for this situation, such as network instability, server failure, etc. At this point, we can view the specific error information by printing out the error event of the audio context object.

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

3. Audio playback cannot continue

During the process of audio playback, sometimes audio playback cannot continue. The main reason for this problem is insufficient audio playback cache, resulting in audio playback problems. At this time, you can check the status of the audio by printing out the audio context object, and obtain information such as the cache size and cache progress of audio playback.

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

3. Audio playback optimization skills

1. Turn on pre-play buffering

In order to improve the smoothness of audio playback, we can perform pre-playback before audio playback buffer. This process can be understood as transmitting the audio data stream to the client memory through the network, and then reading the audio data directly from the memory when starting to play, avoiding the impact of network bottlenecks, thereby improving the smoothness of audio playback. . In Uniapp, we can use the onCanplay() event of uni.createInnerAudioContext() to detect whether the audio can start playing, and we can use the preload attribute of the audio tag to buffer before playing.

2. Optimize the audio loading speed

In order to improve the audio loading speed, we can compress the audio and reduce the size of the audio file. In addition, you can also optimize the audio loading speed through CDN acceleration and other methods, thereby improving the smoothness of audio playback.

3. Reasonable use of memory

In Uniapp, playing audio requires memory. In order to avoid program freezes or crashes caused by excessive memory usage, we can call the destroy() method of the audio context object to release memory resources after the audio playback is completed.

In short, during the Uniapp development process, it is very common to encounter the problem of being unable to play audio. But as long as we understand how audio playback is implemented and common problems, and master some optimization techniques, we can solve this problem efficiently.

The above is the detailed content of uniapp cannot play audio. For more information, please follow other related articles on the PHP Chinese website!