Avec le développement de l'Internet mobile, les applications liées à l'audio deviennent de plus en plus populaires auprès des utilisateurs, comme les lecteurs de musique, le chat vocal, la reconnaissance vocale, etc. Il est très pratique d'utiliser uniapp pour développer ces applications audio. L'un des composants importants est la balise
Cet article explique comment utiliser la balise
dans uniapp, y compris les événements de lecture audio, de pause, d'arrêt et d'écoute.
Utilisation de base
Dans uniapp, vous pouvez directement utiliser la balise
dans le fichier wxml de la page pour intégrer de l'audio. L'exemple de code est le suivant :
Copier après la connexion
Parmi eux, l'attributsrcspécifie le chemin du fichier audio, et l'attributidest utilisé pour définir un identifiant unique pour la balise
pour plus de commodité.
src属性指定音频文件的路径，
id属性用来给该
标签定义唯一的标识符，方便后续操作。
播放音频
要播放一个音频，需要先获取该
标签，并调用play()方法。示例代码如下：
const myAudio = uni.createInnerAudioContext(); myAudio.src = "../../static/audio.mp3"; myAudio.play();
Copier après la connexion
其中，createInnerAudioContext()方法用来创建
标签的实例，
src属性指定音频文件的路径，
play()方法用来播放音频。
暂停音频
为了暂停一个正在播放的音频，可以使用pause()方法，示例代码如下：
myAudio.pause();
Copier après la connexion
停止音频
停止一个正在播放的音频，可以使用stop()方法，示例代码如下：
myAudio.stop();
Copier après la connexion
需要注意的是，停止音频之后需要调用destroy()方法销毁当前
标签实例，才能释放资源。示例代码如下：
myAudio.destroy();
Copier après la connexion
监听事件
标签有很多事件，可以监听这些事件来获取音频播放的状态和进度。以下是一些常用的事件：
onPlay()：当音频开始播放时触发。onPause()：当音频暂停时触发。onStop()：当音频停止时触发。onEnded()：当音频播放结束时触发。onError()
Pour lire un audio, vous devez d'abord obtenir la balise
et appeler la méthode play(). L'exemple de code est le suivant :
myAudio.onPlay(() => { console.log('音频开始播放'); }); myAudio.onPause(() => { console.log('音频暂停'); }); myAudio.onStop(() => { console.log('音频停止'); }); myAudio.onEnded(() => { console.log('音频播放结束'); }); myAudio.onError((res) => { console.error('音频播放出错', res.errMsg); });
Copier après la connexion
Parmi eux, la méthode
createInnerAudioContext()est utilisée pour créer une instance de la balise
, précise l'attribut
src. le chemin d'accès au fichier audio, et la méthode
play ()est utilisée pour lire l'audio.
Pause audio
Pour mettre en pause la lecture d'un fichier audio, vous pouvez utiliser la méthode pause(). L'exemple de code est le suivant : rrreee
. Arrêter l'audio Pour arrêter la lecture d'un audio, vous pouvez utiliser la méthode stop(). L'exemple de code est le suivant : rrreeeIl convient de noter qu'après avoir arrêté la lecture audio, vous devez appeler le
destroy(. )pour détruire l'instance de balise
actuelle, afin de libérer des ressources. L'exemple de code est le suivant : rrreee
Événements d'écoute
comporte de nombreux événements qui peuvent être écoutés pour obtenir l'état et la progression de la lecture audio. Voici quelques événements couramment utilisés :
onPlay(): déclenché lorsque la lecture audio commence.
onPause(): déclenché lorsque l'audio est mis en pause.
onStop(): déclenché lorsque l'audio s'arrête.
onEnded(): déclenché à la fin de la lecture audio.
onError(): Déclenché lorsqu'il y a une erreur dans la lecture audio. L'exemple de code est le suivant : rrreeeCe qui précède sont les opérations de base de l'utilisation de la balise
Il convient de noter que certains navigateurs peuvent ne pas prendre en charge certains attributs et méthodes de balise
et il est recommandé d'effectuer des tests de compatibilité lors de l'utilisation. RésuméCet article présente les opérations de base d'utilisation de la balise
dans uniapp, y compris la lecture, la pause, l'arrêt et la surveillance des événements audio. Pour mettre en œuvre des applications audio de haute qualité, en plus de la balise
, vous devez également concevoir soigneusement le processus audio, le mécanisme de tolérance aux pannes, etc. J'espère que le contenu de cet article sera utile à tout le monde.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
