How to implement audio playback function in uniapp

How to implement the audio playback function in uniapp

In uniapp, we can easily implement the audio playback function. This article will introduce how to use the uni.audio component in uniapp to implement audio playback and control.

First, we need to introduce the uni.audio component into the uniapp project. Add the following code in the json file of the page:

{
  "usingComponents": {
    "uni-audio": "@dcloudio/uni-audio/uni-audio"
  }
}

Next, add the code of the uni.audio component in the wxml file of the page. The following is an example:

<template>
  <view>
    <uni-audio :src="audioUrl" :autoplay="playing" @canplay="onCanPlay" @ended="onEnded" @timeupdate="onTimeUpdate"></uni-audio>
    <button @tap="playAudio">播放</button>
    <button @tap="pauseAudio">暂停</button>
    <button @tap="stopAudio">停止</button>
  </view>
</template>

In the above code, we use the uni-audio component to play audio, and specify the path of the audio file through the src attribute. You can use a remote audio file or a local audio file. The autoplay attribute is used to set whether the audio plays automatically, and the playing attribute is used to control the playback status of the audio. The canplay event is triggered when the audio can be played, the ended event is triggered when the audio playback ends, and the timeupdate event is triggered in real time when the audio is played.

In the js file of the page, we can define related methods to control audio playback. The following is an example:

export default {
  data() {
    return {
      audioUrl: 'http://example.com/audio.mp3',
      playing: false
    }
  },
  methods: {
    playAudio() {
      this.playing = true;
    },
    pauseAudio() {
      this.playing = false;
    },
    stopAudio() {
      this.playing = false;
    },
    onCanPlay() {
      console.log('音频可以播放');
    },
    onEnded() {
      console.log('音频播放结束');
    },
    onTimeUpdate(e) {
      console.log('音频播放进度：', e.detail.currentTime);
    }
  }
}

In the above code, we define the playAudio method to play audio, the pauseAudio method to pause audio, and the stopAudio method to stop audio. The canplay event handler function onCanPlay will be triggered when the audio can be played. The ended event handler function onEnded will be triggered when the audio playback ends. The timeupdate event handler function onTimeUpdate will be triggered in real time when the audio is played. We can get the audio playback progress in this event. .

Through the above code example, we can implement the audio playback function in uniapp. According to specific business needs, we can also expand other functions, such as adjusting the volume, jumping to a specified location, etc. By using the uni.audio component, we can easily implement these functions.

Summary:

It is very simple to implement the audio playback function in uniapp. We only need to introduce the uni.audio component and add the corresponding code to the page. By controlling the properties and events of the uni.audio component, we can implement audio playback, pause, stop and other operations, and we can also obtain the audio playback progress. Through these methods, we can provide users with a better audio playback experience.

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