Cordova et l’audio

Cordova permet d’utiliser des technologies web pour développer des applications pour smartphone ou tablette. Toutefois, toutes les balises html5 ne sont pas supportées nativement. Ainsi, si vous utilisez la balise html5 audio, vous aurez la surprise de constater que ça ne fonctionne pas.

Dans cet article, je vous montre comment jouer des fichiers audio avec Cordova sans la balise html5 audio.

Prérequis

– Savoir ce qu’est Cordova;
– avoir lu l’article Initialiser un projet Cordova;
– avoir lu l’article Cordova et les plugins.

**Installer le plugin Cordova pour supporter l’audio**

Rien de complexe, mais cela se fait en ligne de commande :
– placer dans le dossier de votre projet via la commande cd
– exécuter la commande cordova plugin add

cd path
cordova plugin add org.apache.cordova.media

Vous devriez obtenir à l’écran.

Fetching plugin "org.apache.cordova.media" via plugin registry
npm http GET http://registry.cordova.io/org.apache.cordova.media
npm http 304 http://registry.cordova.io/org.apache.cordova.media
Installing "org.apache.cordova.media" for android
Fetching plugin "org.apache.cordova.file" via plugin registry
npm http GET http://registry.cordova.io/org.apache.cordova.file
npm http 304 http://registry.cordova.io/org.apache.cordova.file
Installing "org.apache.cordova.file" for android

Le plugin media est installé.

**Qu’ajoute le plugin Cordova ?**

Il met à disposition un nouvel objet javascript : Media.
Cet objet permet d’enregistrer et de lire des fichiers audio sur un périphérique.

**Comment utiliser l’objet Cordova Media ?**

Avant d’utiliser cet objet, il faut tout d’abord attendre que le périphérique audio soit initialisé via l’événement deviceready.

Lorsque les périphériques du smartphone ou de la tablette sont prêt à être utilisés, l’événement déclenche un appel vers une fonction.
Ceci nécessite que l’on soit à l’écoute de cet événement deviceready, comme ceci :

document.addEventListener("deviceready", onDeviceReady, false);

Dans l’exemple ci-dessus, lorsque les périphériques seront initialisés, l’événement sera levé et engendrera un appel vers la fonction onDeviceReady. Le nom de la fonction est purement arbitraire, il est un libre choix du développeur.

Dans la fonction onDeviceReady, vous allez pouvoir utiliser l’objet Cordova Media : par exemple charger un fichier audio et le jouer.

function onDeviceReady() {
  let backgroundMenuMusic = new Media("/android_asset/www/music/background.mp3");
  backgroundMenuMusic.play();
}

Bien entendu, le code pourrait être écrit plus finement en évitant de d’initialiser et d’utiliser les objets Cordova Media directement dans cette fonction, par le biais d’un indicateur d’état du périphérique audio. Ceci est une autre histoire.

**Le constructeur Media en détail**

Le constructeur de l’objet Cordova Media prend au minimum 1 paramètre et au maximum 4.

const media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]);

– Le 1er paramètre obligatoire spécifie nom du fichier audio avec le chemin d’accès complet;
– le 2ème paramètre est une fonction callback appelée lorsque la lecture du fichier audio est terminée, lorsque la méthode stop est appelée ou lorsque l’enregistrement audio se termine;
– le 3ème paramètre est une fonction callback appelée en cas d’erreur;
– le 4ème paramètre est une fonction callback appelée lorsque le statut du média change.

L’objet Cordova Media comporte des constantes indicatrices de son statut.

Media.MEDIA_NONE = 0;
Media.MEDIA_STARTING = 1;
Media.MEDIA_RUNNING = 2;
Media.MEDIA_PAUSED = 3;
Media.MEDIA_STOPPED = 4;

Donc s’il y a passage d’un statut à l’autre, la fonction spécifiée en 4ème paramètre du constructeur est appelée.

Les méthodes de Media en détail

– getCurrentPosition : retourne la position courante de la tête de lecture (en secondes);
– getDuration : retourne la durée du fichier audio (en secondes);
– play : démarre ou continue la lecture du fichier audio;
– pause : met en pause la lecture du fichier audio;
– stop : stoppe la lecture du fichier audio;
– seekTo : déplace la tête de lecture sur le fichier audio (en millisecondes);
– setVolume : spécifie le volume fichier audio;
– startRecord : démarre l’enregistrement d’un fichier audio;
– stopRecord : stoppe l’enregistrement d’un fichier audio.

La gestion des erreurs

Lorsque la fonction callback d’erreur est appelée (3ème paramètre du constructeur), elle renvoie un objet Media Error comportant des constantes indicatrices de l’erreur :

MEDIA_ERR_ABORTED = 1;
MEDIA_ERR_NETWORK = 2;
MEDIA_ERR_DECODE = 3;
MEDIA_ERR_NONE_SUPPORTED = 4;

Les formats audio supportés

Par expérience, je dirais que les format mp3 et wav sont supportés. Enrichissez l’article par le biais des commentaires si vous utilisez d’autres formats compatibles.

Les plateformes supportées

– Android;
– iOS;
– Windows Phone 7 and 8;
– Windows 8;
– BlackBerry 10;
– Tizen.

Cordova et l’audio