Comment utiliser la balise audio dans uniapp
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
- Utilisation de base
Dans uniapp, vous pouvez directement utiliser la balise
<audio src="../../static/audio.mp3" id="myAudio"></audio>
Parmi eux, l'attribut src
spécifie le chemin du fichier audio, et l'attribut id
est utilisé pour définir un identifiant unique pour la balise src
属性指定音频文件的路径,id
属性用来给该
- 播放音频
要播放一个音频,需要先获取该
const myAudio = uni.createInnerAudioContext(); myAudio.src = "../../static/audio.mp3"; myAudio.play();
其中,createInnerAudioContext()
方法用来创建src
属性指定音频文件的路径,play()
方法用来播放音频。
- 暂停音频
为了暂停一个正在播放的音频,可以使用pause()方法,示例代码如下:
myAudio.pause();
- 停止音频
停止一个正在播放的音频,可以使用stop()方法,示例代码如下:
myAudio.stop();
需要注意的是,停止音频之后需要调用destroy()
方法销毁当前
myAudio.destroy();
- 监听事件
-
onPlay()
:当音频开始播放时触发。 -
onPause()
:当音频暂停时触发。 -
onStop()
:当音频停止时触发。 -
onEnded()
:当音频播放结束时触发。 -
onError()
Jouer de l'audio
myAudio.onPlay(() => { console.log('音频开始播放'); }); myAudio.onPause(() => { console.log('音频暂停'); }); myAudio.onStop(() => { console.log('音频停止'); }); myAudio.onEnded(() => { console.log('音频播放结束'); }); myAudio.onError((res) => { console.error('音频播放出错', res.errMsg); });
createInnerAudioContext()
est utilisée pour créer une instance de la balise 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 : 🎜rrreee🎜Il convient de noter qu'après avoir arrêté la lecture audio, vous devez appeler le
destroy(. )
pour détruire l'instance de balise - 🎜Événements d'écoute🎜🎜🎜
- 🎜
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 : 🎜rrreee🎜Ce qui précède sont les opérations de base de l'utilisation de la balise 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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

L'article discute de l'utilisation de SASS et moins de préprocesseurs dans UNI-APP, de la configuration de détail, des avantages sociaux et de la double utilisation. L'accent principal est sur la configuration et les avantages. [159 caractères]

L'article explique comment utiliser l'API d'animation d'Uni-App, détaillant les étapes pour créer et appliquer des animations, des fonctions clés et des méthodes pour combiner et contrôler la synchronisation de l'animation. Count de chargement: 159

L'article traite de divers types de tests pour les applications UNIAPP, y compris l'unité, l'intégration, les tests fonctionnels, UI / UX, les performances, la plate-forme multiplateforme et la sécurité. Il couvre également une compatibilité multiplateforme et recommande des outils comme JES

L'article traite des stratégies pour réduire la taille du package UNIAPP, en se concentrant sur l'optimisation du code, la gestion des ressources et les techniques comme le fractionnement du code et le chargement paresseux.

L'article traite des outils de débogage et des meilleures pratiques pour le développement de l'UNIAPP, en se concentrant sur des outils comme HBuilderx, WeChat Developer Tools et Chrome Devtools.

L'article discute de l'utilisation des API de l'Uni-App pour accéder aux fonctionnalités des appareils comme la caméra et la géolocalisation, y compris les paramètres d'autorisation et la gestion des erreurs. Compte de chargement: 158

L'article explique comment utiliser les API de stockage Uni-App (Uni.SetStorage, Uni.getStorage) pour la gestion des données locales, discute des meilleures pratiques, dépannage et met en évidence les limitations et les considérations pour une utilisation efficace.

L'article traite de la gestion de la navigation des pages dans Uni-App à l'aide d'API intégrées, des meilleures pratiques pour une navigation efficace, des animations personnalisées pour les transitions de pages et des méthodes pour passer des données entre les pages.
