Utilisation pour le web du contrôle activex du Mediaplayer avec javascript

Utilisation de l'activex Microsoft Media Player pour diffuser des fichiers audio sur le web

Le contrôle Activex Windows Media Player peut être importer dans des IDE comme Delphi ou C++ Builder par exemple. Une fois installé, il donne accès direct (moyennant quelques lignes de code quand même) à un certain de fonctionnalités de base qui vont vous permettre la lecture de fichier audio ou vidéo.
L'objectif de cette page n'est pas de vous expliquer comment importer un activex dans votre IDE préféré mais d'avantage de lister les différentes proprietés qui vont vous permettre d'interagir avec le contrôle et javascript pour lire des fichiers audio.

Je suis plutôt attiré par les solutions issues de la" communauté du logiciel libre" mais, en même temps, il y a des solutions provenant des societés commerciales comme Microsoft qui sont vraiment intéressantes et le contrôle activex du MédiaPlayer en fait partie (je pense également au contrôle activex d'internet explorer). Ca serait dommage de ne pas en profiter !
Pourtant, concernant la lecture de fichiers audio ou vidéo pour le web. Je n'utilise pas Windows Media player. J'utilise plutôt des lecteurs flash avec un format FLV et du MP3 pour des raisons de confort dans la compatibilité avec tous les navigateurs et toutes les platte formes.
En revanche concernant une application pour laquelle je maîtrise complétement l'environnement de l'utilisateur final, une large gamme de solution est disponible. Je peux effectuer des choix très différents.
Or il se trouve que je travaille sur un projet personnel qui consiste grosso modo à fabriquer un automate capable de diffuser des fichiers audio FLAC selon des enchainements et une grille très précise. Il s'agit de diffuser des programmes radio FM. Comme je connais par avance le système d'exploitation et l'environnement utilisateur donc je peux me laisser aller à des choix dans lesquels la compatibilité navigateur, la disponibilité des codecs n'a aucune importance.
J'ai pris le temps de bien réflêchir aux technologies que j'allais utiliser et j'ai fait de nombreux tests avant de choisir. Je n'ai pas trouvé d'activex de Winamp et je n'ai pas réussi à trouver des élements probants pour utiliser l'activex de VLC. Au même moment, le Windows Media Player offre toutes propriétés dont j'ai besoin moyennant l'ajout des codecs FLAC. Moyennant quelques recherches, la page msdn traitant des propriété du contrôle activex du MediaPlayer m'a donné tous les éléments pour concevoir l'architecture de mon logiciel.
De plus, l'utilisation de javascript couplé à des requêtes en Ajax, un serveur web apache tournant en loopback avec php5 et un serveur Mysql me permettent de constuire une application souple avec le contrôle Activex.
Deux contrôles activex du Media Player seront utilisées afin de gérer des enchainements propres qui vont se fonder sur des critères très précis s'appuyant sur des informations issues d'une base de données.
Voici ci-dessous les informations utiles pour utiliser le contrôle activex du Media Player dans une page web avec Internet Explorer (sachant que la compatibilité entre navigateurs et codecs n'est pas recherchée et qu'il n'y a que la gestion des fichiers audio qui m'intéresse).

sources: msdn

Insertion du contrôle activex Media player dans une page web

Commencez par insérer le contrôle activex comme suit:

	<OBJECT id="player1" width="300" height="200" 
	CLASSID="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" 
	type="application/x-oleobject">	
	<PARAM NAME="SendPlayStateChangeEvents" VALUE="True">
	<PARAM NAME="AutoStart" VALUE="false">
	<PARAM name="PlayCount" value="1">
	</OBJECT>
	<script for="player1" event="PlayStateChange(NewState)">
  	document.getElementById('output').innerHTML = "Play state: " + NewState;
	</script>
	<div id="output">ici figure le statut</div>

Il est possible de transmettre de nombreux paramètres dans la balise object mais dans notre cas, seuls quelques paramètres nous intéressent.

SendPlayStateChangeEvents va permettre de récupérer les événements envoyés par le contrôle.
Ces événements peuvent être récupérés par le script qui se trouve au-dessous de l'appel au contrôle.
Dans l'exemple, on va afficher le code des événements sur la page html mais l'idée est de gérer ici les événements grâce à un
appel à une fonction.
La liste des événements et leur code est donné plus bas dans cette page.

PlayCount indique le nombre de fois que le fichier audio sera lu. En l'occurence une fois sera suffisant.

AutoStart indique si le fichier doit être lu automatiquement au chargement du contrôle. En l'occurence, on ne veut pas.

Remarques

La balise OBJECT fonctionne très bien mais elle est considérée comme deprecated au profit de EMBED

Versions du MediaPlayer

Les informations sont données pour la version 9 et supérieur du Windows Media Player.

Utilisation des fichiers FLAC

Pour utiliser des fichiers FLAC plutôt que du MP3 ou WMA, il vous faudra installer des codecs spécifiques sur votre ordinateur.

Voici le lien de la page officiel qui vous permettra de télécharger les codecs.

Accès aux propriétés et aux méthodes du contrôle

L'accès au propriétés du contrôle pour lire ou envoyer des informations se fait grâce à l'identifiant attribué à la balise object comme suit

<script type="text/javascript">
document.getElementById('[object_id]').[objet].[methode ou propriété]
</script>
exemple:
document.getElementById('player').controls.play();

Liste des codes des événements envoyés par le contrôle

SendPlayStateChangeEvents nous permet de récupérer les événements suivants afin d'opérer ensuite un traitement

0 : Indéterminé
1 : Arrêté (Stop)
2 : En pause (Pause)
3 : En lecture (Play)
4 : En avance rapide (FastForward)
5 : En retour rapide (FastRewind)
6 : Remplissage du tampon (Buffering)
7 : En attente de connection (Waiting)
8 : Lecture terminée (MediaEnded)
9 : En transition (Transitionning) (Charge le média suivant dans la playlist)
10 : Prêt à jouer le média (Ready)
11 : Reconnection (Reconnecting)

Les événements peuvent être récupérés selon la méthode suivante:

<script for="player1" event="PlayStateChange(NewState)">
function report_state(NewState); //appel à votre fonction de traitement
</script>

Liste des principales propriétés et méthodes du contrôle

La liste des objets, propriétés et méthodes n'est pas exhaustive. Sont uniquement indiquées les informations de base.

je n'ai listé que les propriétés et les méthodes utiles pour réaliser un programme permettant de piloter la lecture et les enchainements entre deux médiaplayers chargés sur une même page.
L'idéal est de se reporter à msdn en particulier pour ceux d'entre vous qui recherchent des informations plus approfondies.

Ouverture d'un fichier

<script type="text/javascript">
document.getElementById('player').URL=chemin_vers_le_fichier;
</script>

Mode d'affichage

<script type="text/javascript">
//invisible
//none
//mini
//full
document.getElementById('player').uiMode = ma_valeur;
</script>

invisible	L'interface du Media player n'est pas visible
none	Seule la fenêtre de visualisation apparaît sans les contrôles
mini	La fenêtre de visualisation et seuls les contrôles principaux apparaissent. La barre de progression et les boutons d'avance et recul n'apparaissent pas.
full	La fenêtre de visualisation et tous les contrôles apparaissent

Objet controls

PROPRIETES	exemple : document.getElementById('player').Controls.audioLanguageCount;
currentItem	Récupère les informations du fichier en cours de lecture
currentMarker	permet de spécifier ou de récupérer un marqueur. Cette propriété est donc en lecture ou en écriture.
currentPosition	Permet d'indiquer ou de récupérer la position de lecture du fichier en seconde en partant du début. Cette propriété est donc en lecture ou en écriture.
currentPositionString	Permet de récupérer la position de lecture du fichier au format HH:MM:SS Cette propriété est en lecture seule.
currentPositionTimecode	Permet de récupérer ou de spécifier une position de lecture dans un fichier sous la forme [range]hh:mm:ss.ff ff représente le nombre de frames (vidéo). exemple : [00000]02:30:30.02 => 2 heure 30 minutes 2 secondes, frame n°2 Cette propriété est en lecture ou en écriture.
METHODES	document.getElementById('player').Controls.play();
play	Lecture du fichier audio
playItem	Lecture du fichier audio ou reprend la lecture après une pause
stop	Arrête la lecture

Objet Settings

PROPRIETES	exemple : document.getElementById('player').Settings.volume=0;
autoStart	Auto chargement du fichier. Si la valeur vaut true, la lecture sera automatique. Si la valeur vaut false, la méthode play devra être appelée. Cette propriété est en lecture ou écriture.
balance	Permet de régler la balance entre la sortie gauche et droite. Par défaut la valeur vaut 0. -100 permet une lecture uniquement sur le canal gauche. 100 permet une lecture uniquement sur le canal droit. Cette propriété est en lecture ou écriture.
mute	Met la sortie audio en sourdine si la valeur vaut true. Pour activer la sortie audio, cette propriété doit être à false. Cette propriété est en lecture ou écriture.
playCount	Indique le nombre de fois qu'un fichier doit être lu. Cette propriété est en lecture ou en écriture.
rate	Vitesse de lecture. Cette propriété est en lecture ou en écriture. une valeur raisonnable doit être comprise entre 0.5 et 1.5 La valeur par défaut est 1.0
volume	Permet de spécifier un réglage du volume en attribuant une valeur comprise entre 0 (mute) et 100. Cette propriété est en lecture ou écriture.
METHODES	exemple : document.getElementById('player').Settings.getMode();
getMode	Permet de récupérer le comportement du contrôle lorsque les pistes à jouer se terminent. getMode('paramètre') permet de modifier le comportement Voici les choix possible concernant le paramètre : autoRewind : lorsque la lecture des pistes se termine, elle recommence au début. loop: boucle sur les pistes shuffle: permet une lecture aléatoire si une playlist a été chargée.
setMode	Permet d'indiquer le le comportement du contrôle lorsque les pistes à jouer se terminent. Voir le valeur ci-dessus Utilisation : Settings.setMode( 'paramètre', true ou false)

Objet currentMedia

PROPRIETES	exemple : document.getElementById('player').currentMedia.duration;
duration	Indique la durée en seconde du fichier. Très utile pour effectuer des calculs sur la durée.
durationString	Indique la durée du fichier au format HH:MM:SS
name	Indique le nom du fichier en cours de lecture

Fabrice de Caluwe - Reproductions interdites - Mis à jour le 16-12-2010