Use uniapp to implement audio playback function

Use uniapp to implement the audio playback function

With the development of the mobile Internet, the audio playback function has become one of the essential functions for many applications. The audio playback function can be easily implemented using uniapp, and it has cross-platform characteristics and can run on different mobile terminals.

Before developing uniapp, we need to prepare audio resource files. In this article, we will use an audio file named "music.mp3" as an example.

First, we need to create an audio playback page in the uniapp project. Under the pages folder, create a new folder named "audio" and create a file named "audio.vue" under the folder. In the "audio.vue" file, we will write the code related to audio playback.

In the "audio.vue" file, we first need to introduce the relevant components of uniapp, including the uni-audio component. The code is as follows:

<template>
  <view>
    <uni-audio :src="audioUrl" :autoplay="autoplay" :loop="loop" @ended="audioEnded"></uni-audio>
    <view>
      <button @tap="playAudio">播放</button>
      <button @tap="pauseAudio">暂停</button>
      <button @tap="stopAudio">停止</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioUrl: '/static/music.mp3',
      autoplay: false,
      loop: false,
    }
  },
  methods: {
    playAudio() {
      uni.createAudioContext('uni-audio').play()
    },
    pauseAudio() {
      uni.createAudioContext('uni-audio').pause()
    },
    stopAudio() {
      uni.createAudioContext('uni-audio').stop()
    },
    audioEnded() {
      console.log('音频播放结束')
    },
  },
}
</script>

<style>
</style>

In the above code, we use the uni-audio component and set the audio-related properties through props. Among them, audioUrl represents the path of the audio file, autoplay represents whether to play automatically, and loop represents whether to loop.

On the page, we created three buttons to control the play, pause and stop of the audio. By calling the uni.createAudioContext method, we can obtain the context object of the uni-audio component and call its corresponding method to control audio playback.

When the audio playback ends, we listen for the event that the audio playback ends by using the @ended event on the uni-audio component. In the event callback function, we can perform corresponding operations, such as outputting a log.

After completing the writing of the above code, we need to register the "audio" page in the uniapp configuration file app.json. The specific steps are as follows:

1. Open the app.json file;
2. Add "pages/audio/audio" in the pages field;
3. Save the file.

Now, we can view and test the audio playback function in the uniapp running environment. Click the run button in the uniapp development tool to view the audio playback page on the simulator and perform corresponding operations.

In summary, the audio playback function can be easily implemented using uniapp. By introducing the uni-audio component and setting the corresponding properties and events, in actual development, we can customize our own audio playback page as needed and implement richer functions.

(The above code is for reference only, the specific implementation may vary depending on the uniapp version and development environment used.)

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