How to use the audio tag in uniapp

With the development of mobile Internet, audio-related applications are becoming more and more popular among users, such as music players, voice chat, speech recognition, etc. It is very convenient to use uniapp to develop these audio applications. One of the important components is the

1. Basic usage

In uniapp, you can directly use the

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

Among them, the src attribute specifies the path of the audio file, and the id attribute is used to define a unique identifier for the

2. Play audio

To play an audio, you need to get the

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

Among them, the createInnerAudioContext() method is used to create an instance of the

3. Pause audio

In order to pause a playing audio, you can use the pause() method. The sample code is as follows:

myAudio.pause();

4. Stop Audio

To stop a playing audio, you can use the stop() method. The sample code is as follows:

myAudio.stop();

It should be noted that after stopping the audio, you need to call destroy( ) method destroys the current

myAudio.destroy();

5. Listening events

The

• onPlay(): Triggered when the audio starts playing.
• onPause(): Triggered when the audio is paused.
• onStop(): Triggered when the audio stops.
• onEnded(): Triggered when audio playback ends.
• onError(): Triggered when an audio playback error occurs.

The sample code is as follows:

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

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

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

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

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

The above are the basic operations of using the

Summary

This article introduces the basic operations of using the

The above is the detailed content of How to use the audio tag in uniapp. For more information, please follow other related articles on the PHP Chinese website!