Home> Web Front-end> uni-app> body text

How to use the audio tag in uniapp

PHPz
Release: 2023-04-27 10:45:41
Original
2750 people have browsed it

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

Copy after login

Among them, thesrcattribute specifies the path of the audio file, and theidattribute is used to define a unique identifier for the

  1. Play audio

To play an audio, you need to get the

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

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

  1. Pause audio

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

myAudio.pause();
Copy after login
  1. Stop Audio

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

myAudio.stop();
Copy after login

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

myAudio.destroy();
Copy after login
  1. 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); });
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!