UNIVERSITÉ MOHAMMED V de Rabat

Faculté des Sciences

Département d’Informatique
Filière Licence fondamentale
en Sciences Mathématiques et Informatique

PROJET DE FIN D’ÉTUDES

intitulé :

Réalisation d’un lecteur audio et vidéo

Présenté par :
Manal EL Hakkaoui
Halima Benarafa
soutenu le 30 Juin 2017 devant le Jury

M. Slaoui Said Professeur à la Faculté des Sciences - Rabat Président

M. Moulay Driss RAHMANI Professeur à la Faculté des Sciences - Rabat Encadrant

Année universitaire 2016-2017

Remerciements

C’est une tâche très agréable mais combien délicate de présenter nos remerciements
les plus sincères à toutes les personnes qui ont contribué de près ou de loin à l’élaboration
de ce mémoire ainsi qu’à la réussite de cette formidable année universitaire.

Nous remercions piètrement Allah le tout puissant de nous avoir donné le courage et
la bonne volonté de mener à terme ce présent travail.

Notre gratitude va à notre encadrant M. RAHMANI Moulay Driss qui a proposé le

sujet, a accepté de nous encadrer et qui nous a fait proter de son savoir et de sa grande
expérience pour mener à bien ce travail , pour tout le temps qu’il nous a consacré , ses
conseils précieux ,et pour la qualité de son suivi durant toute la période de notre projet.
Qu’il trouve ici le témoignage de notre sincère reconnaissance et nos vifs remerciements.

Nous tenons également à remercier et exprimer notre profond respect au membre de

jury M. SLAOUI Said d’avoir accepté de juger ce travail. Nous dédions ce mémoire à nos
parents pour leur amour inestimable , leur conance , leur soutien , leurs sacrices et toutes
les valeurs qu’ils ont su nous inculquer.

i
Résumé

Dans le cadre de notre projet de fin d’étude, nous avons été amenées à concevoir et
réaliser un lecteur audio et vidéo hébergé dans un site web.

La conception des sites web passe par la maîtrise des langages fondateurs qui sont
le HTML (HyperText Markup Language) pour la structuration et le CSS (Cascading
Style Sheets) pour le design. Les dernières versions de ces deux langages ( HTML5 et le
CSS3), ont fait évoluer, d’une manière significative, la manière de concevoir un site web
en offrant de nouvelles possibilités de structure, de mise en page et de mise en forme.

En outre, grâce au HTML5 et au CSS3, il est beaucoup plus simple de concevoir des
lecteurs audio et/ou des lecteurs vidéos. Plus besoin donc de coder en langage flash ou
d’intégrer d’autres outils, l’utilisation d’une seule balise HTML5 avec différents options
est suffisante.

Pour rappel, de grandes entreprises du domaine de Technologies de l’Information et

de la Communication ont adopté la nouvelle version HTML5 pour la conception de leur
site Web. Nous pouvons citer à titre d’exemple le géant YouTube qui gère une quantité
colossale de fichiers audio et vidéo.

Mots clés : HTML5, CSS, jQuery,audio, vidéo, lecteur.

ii
Abstract

As part of our project graduation, we were led to design and realize an audio and
video player hosted in a website.

The design of websites requires the mastery of the founding languages, which are
HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). The latest
versions of these two languages (HTML5 and CSS3) will change the way we design a
website by offering new possibilities for structure, layout and formatting.

In addition, HTML5 and CSS3 make it much easier to design audio players and / or
video players. No need to code in flash language or to integrate other tools, the use of a
single HTML5 tag with different options is sufficient.

As a reminder, large companies in the field of Information and Communication

Technologies have adopted the new version HTML5 for the design of their website. We
can cite as an example the giant YouTube that manages a colossal amount of audio and
video files.

Keywords : HTML5, CSS, jQuery,audio, vidéo, lecteur.

iii
Table des matières

Remerciements i

Résumé ii

Abstract iii

Introduction général vi

1 Présentation générale du projet : 1

1.1 Historique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1.1 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1.2 Les versions d’HTML . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1.3 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1.4 Les versions de CSS : . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.1.5 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.2 Son stéréophonique et monophonique : . . . . . . . . . . . . . . . . . . . 6
1.2.1 Son stéréophonique . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.2.2 Son monophonique . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2 Environnement Technique du projet 8

2.1 Structure du code HTML . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2 Structure Code jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3 L’ajout d’une feuille de style css à un document HTML : . . . . . . . . . 10
2.4 L’environnement de développement BlueGriffon . . . . . . . . . . . . . . 10

3 Conception du projet 12
3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.2 Présentation des lecteurs multimédias . . . . . . . . . . . . . . . . . . . . 12
3.3 Présentation du lecteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.4 Caractéristiques du lecteur . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4 La réalisation du projet 14
4.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.2 Création de l’interface de l’application . . . . . . . . . . . . . . . . . . . 14
4.3 Mise en place du lecteur . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4.4 Fonctions jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.5 Formats audios et vidéos . . . . . . . . . . . . . . . . . . . . . . . . . . 28

iv
 4.6 Quelques exemples de notre lecteur : . . . . . . . . . . . . . . . . . . . . 31
4.7 Adaptation du lecteur au format mobile : . . . . . . . . . . . . . . . . . . 38
4.7.1 Les avantages de l’optimisation : . . . . . . . . . . . . . . . . . . . 39
4.7.2 Exemple de la version mobile du lecteur : . . . . . . . . . . . . . 40
4.7.3 Les différents types d’appareils : . . . . . . . . . . . . . . . . . . . 45

Conclusion 49

v
Introduction générale

La version 5 a apporté plusieurs nouveautés pour la création d’un site web dynamique.
Notre projet est articulé sur son apport dans le domaine du multimédia (audio et
vidéo), HTML5 propose des balises qui permettent d’inclure des fichiers audio et
vidéo dans des pages HTML sans avoir recours à des plugins externes comme Adobe
Flash.
Grâce aux balises audio et vidéo, les éléments multimédia sont totalement intégrés
dans la page, ce qui permet notamment d’utiliser des attributs HTML5 pour définir
des contrôles (play, pause, etc.) et définir des propriétés de style CSS pour modifier
l’apparence des éléments multimédia puis utiliser jQuery pour contrôler les éléments et
même y ajouter des interactions complexes.

Ceci étant donné, nous avons été amenées à étendre la réalisation d’un lecteur
audio et vidéo dans un site web pour permettre la lecture de n’importe quel type de
fichier audio ou vidéo ; un fichier audio ou vidéo est en réalité un « conteneur »
qui contient différents types de fichiers avec des données.

Nous allons essayer de réaliser un lecteur multimédia qui permet la lecture de tout
format audio et vidéo en utilisant HTML5 pour la structure, CSS3 pour la mise en
forme et jQuery pour les requêtes.

Le présent rapport abordera en premier lieu la présentation du sujet, puis l’analyse

et la conception du lecteur multimédia puis les détails de la réalisation, et enfin, on
examinera la valeur ajoutée du lecteur audio et vidéo et les éventuelles améliorations
futures.

vi
Chapitre 1

Présentation générale du projet :

1.1 Historique
1.1.1 HTML
Les langages HTML et CSS sont incontournables car :
— ils n’ont pas de concurrents.
— ils sont la base de tout projet de développement Web.
— ils sont indispensables pour optimiser le référencement du site internet.

HTML (HyperText Markup Language) a été créé en 1991.

Son objectif premier est de structurer et de mettre en forme un contenu. Les balises
permettent de mettre en forme le texte et de placer des éléments interactif, tel des liens,
des images ou bien encore des animations. Ces éléments ne sont pas dans le code source
d’une page codée en HTML mais "à côté" et la page en HTML ne fait que reprendre ces
éléments. Pour visualiser une page programmée en HTML, il est nécessaire d’utiliser un
navigateur Web. C’est donc un langage de balisage qui permet d’écrire de l’hypertexte,
d’où son nom.

HTML permet également d’inclure des ressources multimédias dont des images et des
formulaires de saisie. La plupart du temps d’autres langages informatiques sont associés
à une page codée en HTML. Par exemple le CSS, qui permet de mettre en forme le
contenu d’une page codée en HTML. Il y a également des langages informatiques que
nous pouvons lier à HTML tel le jQuery.

Ces dernières années, la vidéo et l’audio sur le Web sont devenus de plus en plus
viables et des sites comme Youtube, dailymotion et ont rendu simple la publication de
vidéos et d’audio. Cependant, comme le HTML n’offre pas par lui-même les moyens
nécessaires pour intégrer et contrôler avec succès le multimédia, de nombreux sites
dépendent de Flash pour fournir cette fonctionnalité.

Bien qu’il soit possible d’intégrer du multimédia en utilisant divers plugins (comme
QuickTime, Windows Media, etc.), Flash était le seul plugin largement déployé qui
fournit une solution compatible multi-navigateur avec des APIs appréciées par les

1
développeurs.

Comme cela a été mis en évidence par les divers lecteurs de médias basés sur Flash,
les auteurs sont intéressés à fournir leurs propres interfaces utilisateurs qui, généralement,
permettent aux utilisateurs de lire, mettre en pause, arrêter, chercher, et ajuster le
volume. L’objectif est de fournir cette fonctionnalité dans les navigateurs en ajoutant
un support natif de vidéo et audio embarqués et fournir des APIs DOM pour que les
scripts contrôlent la lecture.

Les nouveaux éléments vidéo et audio le rendent vraiment facile. La plupart des
APIs sont communes aux deux éléments, les seules différences étant liées aux différences
inhérentes entre des médias visuels et non visuels.

La manière la plus simple d’intégrer une vidéo est d’utiliser un élément vidéo et
de permettre au navigateur de fournir une interface utilisateur par défaut. L’attribut
controls est un attribut booléen qui indique si l’auteur souhaite que cette interface
utilisateur soit présente ou non par défaut.

La balise <audio> permet d’afficher un lecteur audio. L’avantage par rapport aux
balises <object> et <embed> est que le fichier est lu directement par le navigateur, il
n’y a plus besoin de plugin.
Elle s’utilise comme ceci :

<audio src ="monfichier.mp3" autoplay controls loop />

Les attributs autoplay, controls et loop sont facultatifs. Ils permettent respectivement
de lancer automatiquement la lecture, d’afficher les boutons lecture/arrêt et de lire la
piste en boucle.

La balise <video> s’utilise comme la balise <audio>, sauf qu’il faut préciser les
dimensions de la vidéo ainsi que le type MIME du fichier :

<video width="360" height ="240"> </video>

1.1.2 Les versions d’HTML

- HTML 1 : c’est la toute première version créée par Tim Berners-Lee en 1991.

- HTML 2 : la deuxième version du HTML apparaît en 1994 et prend fin en 1996 avec
l’apparition du HTML 3.0. C’est cette version qui posera en fait les bases des versions
suivantes du HTML.
Les règles et le fonctionnement de cette version sont donnés par le W3C (tandis que la
première version a été créée par un seul homme).

- HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses

possibilités au langage comme les tableaux, les applets, les scripts, le positionnement du

2
texte autour des images, etc.

- HTML 4 : il s’agit de la version la plus répandue du HTML (plus précisément, il

s’agit de HTML 4.01). Elle apparaît pour la première fois en 1998 et propose l’utilisation
de frames (qui découpent une page Web en plusieurs parties), des tableaux plus
complexes, des améliorations sur les formulaires, etc. Mais surtout, cette version permet
pour la première fois d’exploiter des feuilles de style, le fameux CSS !

- HTML 5 : c’est la dernière version, elle apporte de nombreuses améliorations

comme la possibilité d’inclure facilement des vidéos, un meilleur agencement du contenu,
de nouvelles fonctionnalités pour les formulaires, etc. Ci-dessous le logo de la dernière
version de HTML :

Figure 1.1.1 – Logo de html 5

1.1.3 CSS
CSS (Cascading Style Sheets) était crée en 1996 pour permettre de mettre en forme
le contenu en lui ajoutant des styles.

L’exigence d’avoir une bonne application Web se qualifie essentiellement par sa

facilité de navigation, mais aussi par son style de design attrayant.

CSS permet de définir une mise en forme des interfaces Web et d’élaborer leurs allures.

L’objectif principal de ce langage est de permettre la séparation entre la mise en

forme et la structure d’un document Web. De plus, en définissant toute la mise en forme
dans un fichier séparé, nous éviteons d’avoir à la purpleéfinir à chaque nouvelle page, ce
qui permet donc une uniformisation du site Web.

Contrairement aux logiciels, les spécifications CSS ne sont pas développées par
versions successives, qui permettraient à un navigateur de se référer à une version en
particulier. CSS est développé par niveaux ce qui contraint chaque nouveau niveau à

3
intégrer le précédent, et chaque implémentation à être compatible avec la précédente.
CSS1 est donc développé pour être un sous-ensemble de CSS2, qui est lui-même
développé pour être un sous-ensemble de CSS3. Ceci explique en partie la lenteur de
l’avancement normatif de CSS.

La spécification CSS1 finale est publiée le 17 décembre 1996. Elle se définit comme un
mécanisme de feuille de style simple, et définit une cinquantaine de propriétés. Il s’agit
alors essentiellement des propriétés de rendu typographique du texte :fontes (polices),
couleur, taille des caractères, espacements, bordures et gestion des marqueurs de liste.

Il n’est donc pas encore question de «mise en page». CSS1, ne propose qu’un moyen
de placer localement, côte à côte, une portion réduite du contenu, tel qu’une image, et
le reste du texte. La propriété float (agencer par déplacement de contenus), qui sera par
la suite massivement utilisée, n’est pas encore accessible.

Compte tenu des implémentations problématiques de CSS1, le détournement de

l’élément HTML table pour gérer la mise en page globale reste dans l’immédiat la
solution la plus couramment retenue par les auteurs de contenu Web.

Publié en mai 1998, le second niveau de CSS étend considérablement les possibilités
théoriques des feuilles de styles en cascade, avec en particulier environ 70 propriétés
supplémentaires. S’ajoutent comme la déclinaison en styles propres aux différents
médias dans lesquels une page Web peut être restituée, de nouvelles propriétés de
positionnement à l’écran pour permettre la réalisation de mise en pages avancée, issues
d’un document élaboré conjointement par Microsoft et Netscape ainsi que de nouvelles
propriétés permettant de faire intervenir les préférences de l’utilisateur dans la mise en
forme d’un site.

Cependant, cette richesse fonctionnelle ne rencontre qu’un écho limité dans ses
implémentations, notamment suite aux problèmes de compatibilité avec les navigateurs.
En juillet 2007, CSS2.1 est lancé et corrige CSS2 sur de nombreux points de détail. On
supprime certaines sections en tout ou partie et on l’explicite à partir des constats mis à
jour lors des implémentations.

Le développement du troisième niveau des feuilles de styles en cascade commence

dès 1999, parallèlement à celui de CSS2.1. CSS3 devient « modulaire », afin de faciliter
ses mises à jour, mais aussi son implémentation par des utilisateurs aux capacités et aux
besoins de plus en plus variés (navigateurs graphiques, navigateurs pour mobiles, navi-
gateurs vocaux). Les navigateurs peuvent ainsi implémenter des sous-ensembles de CSS3.

En 2007, les modules les plus avancés concernent la mise en forme des annotations
ruby, la négociation de style entre serveurs et agents utilisateurs (« Media Queries »), le
rendu Web TV, la gestion des couleurs ou encore la prise en compte de la configuration
de l’interface utilisateur.

Les versions actuelles utilisées sont HTML5 et CSS3 ; elles sont toutes les deux

4
non finalisées et toujours en développement mais totalement stables et déjà largement
utilisées, et c’est sur celles-ci que nous allons travailler.

De plus ces deux dernières introduisent de nouvelles fonctionnalités très attendues

par les développeurs comme l’insertion des audio et vidéos, les bordures arrondies, etc.

Au cours de la réalisation de notre projet, nous avons utilisé le CSS3, version la plus
récente, et qui a apporté plus de modularité aux feuilles de styles.

1.1.4 Les versions de CSS :

-CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases de ce
langage qui permet de présenter sa page web, comme les couleurs, les marges, les polices
de caractères, etc.
-CSS 2 : apparue en 1999 puis complétée par CSS2.1, cette nouvelle version de CSS
rajoute de nombreuses options. On peut désormais utiliser des techniques de positionne-
ment très précises, qui nous permettent d’afficher des éléments où on le souhaite sur la
page.
-CSS 3 : c’est la dernière version, qui apporte des fonctionnalités particulièrement
attendues comme les bordures arrondies, les dégradés, les ombres, etc. la dernière version
a pour logo le suivant :

Figure 1.1.2 – Logo de CSS 3

5
1.1.5 jQuery
jQuery est une bibliothèque JavaScript open-source crée par John Resig en 2006.
Depuis sa création et notamment à cause de la complexité croissante des interfaces Web,
jQuery a connu un large succès auprès des développeurs Web et son apprentissage est
aujourd’hui un des fondamentaux de la formation aux technologies du Web.
Il est à l’heure actuelle le framework front-end le plus utilisé au monde (plus de la moitié
des sites Internet en ligne intègrent jQuery).

Avec jQuery, vous pouvez par exemple :

— Ajouter, supprimer ou modifier des éléments HTML au sein de votre page.

— Changer les styles des éléments de la page en modifiant le fichier CSS qui leur est
associé.

— Envoyer et recevoir des données depuis un serveur grâce à AJAX (asynchronous

JavaScript and XML, c’est-à-dire JavaScript et XML asynchrones) pour ne plus
avoir besoin de recharger vos pages après validation d’un formulaire.
Le logo de jQuery est le suivant :

Figure 1.1.3 – Logo de jQuery

1.2 Son stéréophonique et monophonique :

1.2.1 Son stéréophonique
Un son stéréophonique est un son produit lors d’une captation stéréophonique et
destiné à une écoute stéréophonique.

La prise de son stéréophonique met en œuvre deux microphones, qui captent une
image sonore du lieu avec soit une différence de temps (c’est la stéréophonie de temps
les microphones sont en deux point de l’espace), soit avec une différence de phase (c’est
la stéréophonie d’intensité deux micros directifs formant un angle et qui capteront une
intensité sonore plus forte dans leur axe).

6
 Il est possible de mélanger les deux types de stéréophonie, en utilisant un obstacle
entre les deux micros, ce qui aura pour effet de simuler l’action du crâne avec un rendu
plus réaliste (disque ou tête artificielle).
La stéréophonie permet de restituer un espace sonore avec une grande fidélité.

Lors de la restitution, deux haut-parleurs sont chargés de transmettre le signal de

chacun des deux microphones, utilisant le principe qu’un son provenant plus fort d’une
des deux enceintes sera perçu comme provenant de cette enceinte (différence d’intensité)
ou qu’un son provenant plutôt d’une des deux enceintes sera perçu comme provenant de
cette enceinte (différence de temps).

1.2.2 Son monophonique

Le terme monophonique peut recouvrir deux aspects :

Un son monophonique (mono, ou encore monaural) n’est diffusé que sur un seul
canal. Il est en général enregistré par un seul microphone et reproduit par un ou plusieurs
haut-parleurs diffusant le même signal.

Dans la deuxième moitié du vingtième siècle, le son stéréophonique a progressivement

remplacé le son monophonique, en particulier pour la reproduction musicale. Néanmoins,
le son mono domine toujours les réseaux téléphoniques filaires et cellulaires.
Un instrument monophonique désigne un instrument qui ne peut jouer qu’un seule note
simultanément (saxophone, trompette, certains synthétiseurs...), au contraire d’un ins-
trument polyphonique.

7
Chapitre 2

Environnement Technique du projet

Introduction Dans cette partie, nous nous intéressons aux langages utilisés pour la
réalisation de notre lecteur et la stratégie suivie.

2.1 Structure du code HTML

Pour créer une application Web, l’utilisation du langage HTML est nécessaire pour
en définir la structure.
HTML signifie «Hyper Text Markup langage» qu’on peut traduire par «Langage de
balises pour l’hypertexte». Il est utilisé afin de créer et de représenter le contenu d’une
page Web.
HTML est structuré sous forme de «balises». Pour notre application nous avons utilisé la
dernière version d’HTML : HTML5.

La structure est la suivante :

< !DOCTYPE HTML> < !-la grammaire d’un document HTML ->
<html>< !- début du document ->
<head>< !- entête du document ->
<title> < !- titre du document -> titre de la page
</title>
<meta charset ="utf-8"> < !- précise les caractères
d’encodage du document ->
</head> < !- fin de l’entête du document ->
<body> < !- début du corps document ->
<h1> HTML </h1>
<p> Je suis une page HTML </p>
</body> < !- fin du corps du document ->
</html> < !- fin du document ->

8
 Figure 2.1.1 – Affichage HTML

2.2 Structure Code jQuery

jQuery(document).ready (function(){
/** préparation de jQuery */
console.log("jQuery est prêt !") ;
/**affichage du message dans la console */
}) ;

/** Avec alert()*/

jQuery( document).ready (function(){

alert("jQuery est prêt !") ;
/** affichage d’une alerte javascript */
}) ;

L’utilisation de cette bibliothèque permet de gagner du temps de développement lors

de l’action sur le code HTML d’une page Web, l’AJAX ou la gestion des événements.

9
2.3 L’ajout d’une feuille de style css à un document
HTML :
< !DOCTYPE HTML>
<html>
<head>
<title> titre de la page </title>
<meta charset ="utf-8">
<link rel="stylsheet" type="text/css"
href="stylsheet.css">
</head>
<body>
<h1> Bonjour </h1>
</body>
</html>

h1{ color :red ; }

Figure 2.3.1 – Affichage CSS

2.4 L’environnement de développement BlueGriffon

Il est basé sur la plateforme et le moteur de Mozilla Firefox, réputé pour sa conformité
aux standards, et codé par Daniel Glazman (co-chairman du groupe de travail CSS au
W3C).

10
 BlueGriffon propose de nombreuses interfaces visuelles permettant d’utiliser les
propriétés CSS3 sans en connaitre la syntaxe précise, surtout lorsque la syntaxe des
propriétés expérimentales varie selon les navigateurs.

BlueGriffon se démarque notamment par son support exceptionnel de CSS3 et

HTML5 et propose des boîtes de dialogues évoluées permettant par exemple d’afficher
des polices de caractères exotiques ou une disposition en multi-colonnes.

11
Chapitre 3

Conception du projet

3.1 Introduction
La conception d’un lecteur multimédia est l’étape initiale de sa création. En fait,
c’est une phase importante lors du développement de notre application après la phase de
l’analyse et la spécification des besoins traités dans le chapitre précédent.

Ce troisième chapitre présente en détail d’abord les différents lecteurs multimé-

dias populaires puis les étapes par lesquelles on est passé pour réaliser notre lecteur
multimédia
.

3.2 Présentation des lecteurs multimédias

Parmi les lecteurs multimédias les plus populaires, on retrouve :

— VLC qui est un lecteur multimédia extrêmement performant, léger et surtout

compatible avec quasiment tous les formats actuels. Il intègre tous les codecs
et tous les formatsaudio. Il supporte également le streaming et les diffusions
broadcast en ligne. Simple d’aspect au premier abord, c’est aussi sans nul doute
l’un des plus complets.

— itunes, ce logiciel vedette d’Apple ne s’adresse heureusement pas aux seuls

possesseurs d’un iPod ou d’un iPhone. iTunes permet la gestion, l’organisation
et la personnalisation de la discothèque de manière très précise. iTunes permet
également la gestion des podcasts et des vidéos.

— le lecteur Windows Media permet d’extraire de la musique depuis un CD

audio, de le lire avec le lecteur et même de l’enregistrer dans la bibliothèque
du lecteur. Il permet aussi de créer ses propres CD audio à partir de fichiers
audio sur son ordinateur ; on peut créer ses propres CD.

12
3.3 Présentation du lecteur
HTML5 introduit la possibilité de synchroniser des médias continus ( audio, vidéo)
avec des éléments de pages Web. Grâce à l’API Media Element, une grande partie des
applications multimédia qui nécessitaient un greffon Flash est donc désormais réalisable
en HTML5, avec du code jQuery spécifique pour la gestion des interactions utilisateur.
Néanmoins, la mise en œuvre de telles applications multimédia en HTML5 reste délicate,
requiert l’écriture de code jQuery spécifique, et n’est pas supportée par les anciens
navigateurs.

3.4 Caractéristiques du lecteur

Parmi les caractéristiques du lecteur que nous avons créé :

 une playlist détaillée contenant plusieurs morceaux audio et vidéos.

 Une animation lors de la lecture d’un fichier audio.
 La lecture de plusieurs formats audio.
 La variété des langues dans le lecteur.
 L’affichage du titre suivant dans l’interface.
La recherche d’un morceau audio ou vidéo.

13
Chapitre 4

La réalisation du projet

4.1 Introduction
Dans ce chapitre, nous allons présenter dans un premier temps la création de
l’interface de notre application et par la suite nous aborderons toutes les étapes de
conception de notre application.

4.2 Création de l’interface de l’application

Afin de réaliser cette interface, nous avons imaginé un design simple, facile à gérer
par un utilisateur.

14
 Figure 4.2.1 – interface du lecteur

4.3 Mise en place du lecteur

On commence par déclarer le framework jQuery et celui de l’équaliseur, equalizer,
comme l’indique l’exemple ci-dessous :
<script src="https ://ajax.googleapis.com/ajax
/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="jquery.js"></script>
<script src="equalizer.js"></script>

On définit la structure HTML du lecteur avec la balise HTML5 audio.

L’attribut id permet l’association du code jQuery avec le lecteur afin de définir les
fonctions de lecture de pause et volume, on peut également utiliser autoplay et loop pour
gérer la lecture automatique et la boucle de lecture. Le code HTML de la balise audio

15
est le suivant :
<audio id="audioPlayer" src="" ontimeupdate="showDuration() ;
updateSongSlider() ;" >
</audio>

Vu qu’il s’agit d’un lecteur audio et vidéo, l’insertion d’une balise vidéo est
nécessaire.
On utilise la fonction ontimeupdate qui permet l’affichage de la durée du clip.
Exemple de la balise vidéo :
<div id="vid">
<video id="audioPlayer" src="" ontimeupdate="showDuration() ;
updateSongSlider() ;" >
</video>
</div>

On définit maintenant toutes les fonctions jQuery que nous avons utilisé pour
la réalisation du lecteur, ces fonctions permettent au lecteur de fonctionner
correctement tout en personnalisant le design et l’affichage.

16
4.4 Fonctions jQuery
Parmi ces fonctions on retrouve :

— audioPlayer : cette fonction a pour rôle d’afficher le titre du morceau, le titre

du morceau suivant, l’animation lors de la lecture d’un fichier audio et la lecture
du morceau qui suit.

— playOrPauseSong : Dans la partie jQuery, l’objet audio est renvoyé à

l’aide de la méthode document.getelementbyid.
Les méthodes play et pause sont utilisées pour contrôler la lecture. L’objet img est
extrait pour permettre au libellé du bouton d’afficher Play et Pause en fonction
de l’état de la propriété paused de l’objet audio. L’état est vérifié à chaque appel
de la fonction "playOrPauseSong".
Si le fichier audio est lu, la propriété paused renvoie la valeur false et la méthode
pause est appelée pour suspendre la lecture. Le nom du bouton est alors aussi
défini sur Play.
Si le fichier est suspendu, la propriété paused renvoie la valeur true, la méthode
play est appelée et le nom du bouton est mis à jour avec l’état Pause. Lors du
premier chargement d’un fichier, la propriété paused renvoie la valeur true (la
lecture est suspendue) la méthode pause est appelé alors explicitement.

— adjustVolume : cette fonction permet d’ajuster le volume lors de la lecture d’un

morceau audio ou vidéo. Le composant est constitué d’un div rectangulaire
dans lequel on clique pour régler le son.
Si on clique au début du div le son est baissé et si on clique à la fin, le son est à
son maximum.
A l’intérieur du div se trouve un autre div qui permet de visualiser le niveau du
son en modifiant sa largeur.

— increasePlaybackRate/decreasePlaybackRate : Ces fonctions diminuent et

augmentent la valeur de la propriété currentTime de 30 secondes.
On peut modifier cette valeur pour augmenter ou réduire les sauts.
Grâce à la propriété playbackRate qui est un multiplicateur de la vitesse de
lecture elle permet de modifier la vitesse de lecture audio tout en l’ajustant.
La valeur de playbackRate doit être positive, étant donné qu’une valeur négative
va provoquer une erreur. Cette valeur permet d’accélérer ou de ralentir la lecture.
Le bouton d’accélération ajoute 1 à la vitesse de lecture ; par conséquent, il
démarre à un niveau normal et augmente le multiplicateur à chaque clic sur le
bouton.
Le bouton de ralentissement divise la vitesse de lecture par 2 à chaque clic de
bouton.
Ces incrémentations sont délibérément importantes pour montrer l’effet produit,
toutefois on peut utiliser des incréments plus petits.

— convertTime :sert à suivre la progression d’un fichier.

17
 — showDuration :permet d’obtenir et afficher la durée au fil de l’évolution de la
barre de progression.
La propriété currentTime peut également servir à mettre à jour la barre de
progression.
L’événement timeupdate se déclenche à chaque fois que la valeur de currenttime
change pendant la lecture du fichier audio.

— updateSongSlider :L’événement convertTime appelle la fonction updatesong-

slider quand il se déclenche, ce qui entraîne alors la mise à jour de la barre de
progression. On obtient tout d’abord une valeur en récupérant et en arrondissant
la valeur de currentTime à l’entier le plus proche via la méthode Math.round.
L’arrondissement de cette valeur n’est pas indispensable pour la barre de progres-
sion, mais il est conseillé pour éviter tout problème à l’impression.
La barre de progression peut également être utilisée pour se déplacer dans le
fichier audio.
Un événement click de la souris est inscrit dans une fonction qui met à jour la
valeur currentTime en lui attribuant une position par rapport à l’endroit de votre
clic de souris.
Quand on clique sur la barre de progression, la valeur currentTime est calculée et
définie en fonction de la position X relative du curseur dans le songSlider.

Cette étape consiste à appeler le plugin avec quelques paramètres optionnels,

notamment l’option classPrefix qui permet de préfixer la classe CSS de l’élément parent
générée autour de la balise audio, il s’agit dans notre exemple de #audioPlayer, ainsi
que les éléments enfants ( comme #playpause ou #equalizer).

Cette partie consiste à définir les différents éléments que l’on peut définir pour que
le lecteur soit personnalisé tel que pause, play. On peut également utiliser des classes
CSS sur certains événements : playpause quand le player est en lecture, next pour passer
d’une chanson à une autre . . .
L’exemple du lecteur proposé :

<head>
<title>PlayMusic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"/>
< !-ecriture plus petite->
<meta name="viewport" content="width=device-width,
initialscale=1"/>
< !- préciser au navigateur le zoom initial->
<meta name="viewport" content="width=device-width,
minimumscale=0.25"/>
< !- définir le zoom minimal->
<meta name="viewport" content="width=device-width,
maximumscale=5.0"/>

18
 < !- définir le zoom maximal ->

<meta name="viewport" content="width=device-width,

userscalable=no"/>
< !-no zoom->
<meta name="viewport" content="width=device-width,
targetdensitydpi=device-dpi"/>
< !-ecriture plus petite->
<link name="stylesheet" media="screen and
(max-width : 1031px)" href="mobile.css" />
< !-insertion du code pour les versions mobiles->
<link name="stylesheet" type="text/css"
href="stylesheet.css">
<link name="icon" type="image/jpg"
href="images/logo1.png"/>
< !-logo du lecteur->
</head>

<div id="equalizer"> </div>

<div class="player">
<div id="songTitle" class="song-title">My Song title
will goes here My Song title will goes here
</div>
<input id="songSlider" class="song-slider"
type="range" min="0" step="1"
onchange="seekSong()" />
<div>
<div id="currentTime" class="current-time"> 00 :00
</div>
<div id="duration" class="duration"> 00 :00
</div>
<div>
<div class="controllers">
<img src="images/previous.png" id="previous"
width="30px" />
<img src="images/backward.png" width="30px" onclick
="decreasePlaybackRate() ;" />
<img src="images/play.png" id="playpause"
width="40px" onclick="playOrPauseSong(this) ;"
/>
<img src="images/forward.png" width="30px"
onclick="increasePlaybackRate() ;" />
<img src="images/next.png" id="next" width="30px"
/>
<img src="images/volume-down.png" class="imgMute"
/>

19
 <input id="volumeSlider" class="volumeSlider"
type="range" min="0" max="1" step="0.01"
onchange="adjustVolume () ;" />
<img src="images/volume-up.png" class="imgVolume"
/>
</div>
<div id="nextSongTitle" class="song- title">
<b>Next Song :</b>Next song title goes here..
</div>
</div>

20
 Une partie importante dans notre code est la partie de la playlist, qui regroupe tous
les morceaux audio ou vidéos qu’on peut lancer dans le lecteur, l’utilisation d’une
playlist facilite la recherche du titre demandé.

La fonction next song title permet de définir le titre du morceau qui suit.
Exemple de la playlist que nous avons créé :
<ul id="Playlist">
<input type="text" id="search" value="rechercher"/>
<li class="current-song">
<a href="songs/Umbrella.mp3">Umbrella</a>
</li>
<li>
<a href="songs/The Chainsmokers - Closer ft.
Halsey.mp3">The Chainsmokers - Closer ft.
Halsey</a>
</li>
<li>
<a href="songs/WILLY WILLIAM - Ego.mp3">WILLY
WILLIAM - Ego</a>
</li>
<li>
<a href="songs/Shakira - Chantaje ft.
Maluma.mp3">Shakira - Chantaje ft. Maluma</a>
</li>
<li>
<a href="songs/Mahmut Orhan - Feel feat. Sena
Sener.mp3">Mahmut Orhan - Feel feat. Sena
Sener</a>
</li>
<li>
<a href="songs/Desiigner - Panda.mp3">Desiigner -
Panda</a>
</li>
<li>
<a href="songs/Burak Yeter - Tuesday ft. Danelle
Sandoval.mp3">Burak Yeter</a>
</li>
<li>
<a href="songs/Alan Walker - Faded(flac).flac">Alan
Walker - Faded</a>
</li>
<li>
<a href="videos/movie.mp4">movie</a>
</li>
</ul>

21
 Cette partie de la réalisation consiste à créer une animation lors de la lecture d’un
fichier audio.

Lors du clic sur le bouton play l’animation s’affiche grâce à la fonction show() et
disparaît lorsqu’on clique sur pause avec la fonction hide() ce qui permet d’afficher le
logo de l’application grâce a la fonction apprend() et par conséquent l’arrêt de l’animation.

Voici un exemple de code de la fonction playorpausesong() :

function playOrPauseSong (img) {

if($("#audioPlayer")[0].paused){
//donc on doit lire l audio ou la video

$("#audioPlayer")[0].play() ;
img.src = "images/pause.png" ;
//l image pause doit s’afficher dans ce cas là pour
donner la possiblité a l’utilisateur de faire pause
lors de la lecture

$("#equalizer").children("img").remove() ;
//enlever la balise img qui contient le logo
//ne pas se retrouver par la suite avec plusieur
images superposées

$("#equalizer").show() ;
//et afficher l’equalizer

$("#equalizer div").show() ;
//ainsi que ses div qui sont les barres de
l’equalizer

$("#logo").hide() ;
//cacher le logo
adjValues() ;
//c’est la fonction qui permet d animer l’equalizer

}else{
//dans le cas contraire

$("#audioPlayer")[0].pause() ;
//on doit faire pause

$("#equalizer div").hide() ;
//cacher l equalizer

22
 img.src = "images/play.png" ;
//l image play doit s’afficher dans ce cas là pour
donner la possiblité a l’utilisateur
//de lire l audio ou la video en pause

$("#equalizer").append(’<img id="logo" src="images/logo2.png"

></img>’) ;
//integrer la balise img qui contient le logo afin
d’afficher le logo
//au lieu de l’equalizer quand le son est en pause

23
 Le code CSS joue un rôle important dans l’implémentation de l’interface, il nous
permet de fixer toutes les règles de mise en page de l’ensemble du site. Lorsqu’un
utilisateur appuie sur le bouton pour changer de thème, une fonction jQuery permet ce
changement à chaque clic, comme l’indique le code suivant :

var j=0 ;

$("#theme").click(function(){
/*changement du theme quand on clique sur le bouton */
j++ ;
if(j%2==1){

$(’body’).css({
/* changement de la couleur de l’arrière plan du corps de la
page*/
’background-color’ : ’#E6EEE8’ }) ;

$(’#equalizer’).css({
/* changement de la couleur de l’arrière plan de l’animation
*/
’position’ : ’relative’,
’background-color’ :’#DEECE1’, ’color’ :’#f3ebdc’,
’ width’ : ’338px’,
’height’ : ’146px’, ’padding’ :’20px’,’float’ :’left’ }) ;

$(’.audio-player-cont’).css({
/* changement de la couleur de l’arrière plan du cadre interne
*/
’background-color’ : ’#DEECE1’
’box-shadow’ : ’0 0 7px 4px #D2D8D4’ }) ;

$(’#Playlist li a’).css({
/*couleur de la playlist */
’color’ : ’blue’ }) ;

else{
/* si on clique une deuxième fois, la page reprends sont
ancien style */

$(’body’).css({
’background-color’ : ’#f1e7e7’
}) ;

$(’#equalizer’).css({

24
’position’ : ’relative’,
’background-color’ :’#f3ebdc’,
’color’ :’#f3ebdc’,
’ width’ : ’338px’,
’height’ : ’146px’, ’padding’ :’20px’,’float’ :’left’ }) ;

$(’.audio-player-cont’).css({
’background-color’ : ’#f3ebdc’
’box-shadow’ : ’0 0 6px 2px #c7a8a8’ }) ;

$(’#Playlist li a’).css({
’color’ : ’#C71585’ }) ;

}) ;

25
 L’utilisation de CSS nous a permis aussi d’organiser notre interface, de positionner
les éléments, d’afficher l’icône . . .

Voici le code correspondant :

body {
/* tout le corps de la page */
background : #f1e7e7 ;
}

.audio-player-cont {
/*style du cadre interne du lecteur */
position : absolute ;
width : 700px ;
height : 410px ;
background : #f3ebdc ;
box-shadow : 0 0 6px 2px #c7a8a8 ;
color : #003ba9 ;
font-family : verdana ;
font-size : 12px ;
top :50% ;
left :50% ;
transform : translateX(-50%) translateY(-50%) ;
position : absolute ;
}

.player {
/* propriétés des élements du lecteur */
float :right ;
margin-right : 322px ;
margin-left :0px ;
width :371px ;
height :208px ;
margin-top :1px ;

.song-title {
margin-top :16px ;
width : 369px ;
padding : 20px 0px 5px 0px ;
white-space : nowrap ;
text-overflow : ellipsis ;
overflow : hidden ;
}

26
 .song-slider {
/* barre de progression */
width : 363px ;
}

.current-time {
float :left ;
font-size : 10px ;
}

.duration {
float :right ;
font-size : 10px ;
margin-right :-336px ;
}
}

27
4.5 Formats audios et vidéos
Un format de fichier audio est un format de données utilisé pour stocker des sons,
de la musique ou des voix sous forme numérique. De nombreux standards existent ;
certains s’appliquent à la production, au stockage et à la diffusion, d’autres (ceux qui
utilisent des algorithmes de compression de données ou de débit), sont destinés, en
principe, uniquement à la diffusion.

Actuellement, le format le plus utilisé et de loin est le mp3, suivi du wma, et de l’aac.

Les éléments <audio> et <video> permettent la lecture de médias audio et

vidéo sans nécessiter de plug-ins. Les codecs vidéo et les codecs audio sont utilisés
pour traiter la vidéo et l’audio : des codecs différents offrent différents niveaux de
compression et de qualité.

Un format de conteneur est utilisé pour stocker et transmettre la vidéo et l’audio

codés ensemble. De nombreuses combinaisons de codecs et de formats conteneurs
existent, bien que seule une poignée d’entre eux soit pertinente pour une utilisation sur
le Web.

Différents navigateurs ne supportent pas les mêmes formats de médias dans leurs
implémentations de HTML5 audio et vidéo, principalement en raison de problèmes
de brevets.

On présente dans le chapitre suivant les différentes combinaisons de codecs et

conteneurs adaptées au Web, ainsi que leurs supports par les navigateurs.

— MP3 : Le format audio MP3 (dont le suffixe est.mp3, audio/mpeg, ). Ce

format propose une qualité sonore très correcte pour un débit de 128 kbits/s.
C’est ce format qui a été massivement utilisé pour transférer les musiques via
internet.
Il est pris en charge par Firefox pour Android lorsque le système d’exploitation
fournit un décodeur MP3, il est également pris en charge par Internet Explorer,
Chrome et Safari.

— OGG : Le format OGG est un format libre, le suffixe des fichiers créés est.ogg
ou parfois.oga. Il se différencie des MP3, WMA et autre AAC par son algorithme.
Il segmente les sources audio en paquets successifs, l’algorithme de compression
agissant dans un premier temps sur chaque paquet indépendamment des autres.
Cela lui permet d’avoir très peu de faiblesses sur certaines fréquences et de
conserver la même qualité quel que soit le type de musique. Le format OGG est
pris en charge dans Firefox, Chrome et Opera, et le support du format peut être
ajouté à Safari (mais pas iOS) en installant un add-on. Le format n’est pas pris
en charge par Internet Explorer.

— WMA : Le format WMA (Windows Media audio), créé par Microsoft, est

28
 utilisé par le logiciel Windows Media Player. Ce format est lié à une gestion
pointue des droits d’auteurs qui permet de définir par exemple une durée de vie
limitée pour les fichiers. Il existe plusieurs versions du codec (wma7.1, wma9,
wma pro). Le suffixe des fichiers créés est .wma.

— WebM : est basé sur une version restreinte du format conteneur Matroska.
Il utilise toujours le codec vidéo VP8 ou VP9 et le codec audio Vorbis ou
Opus.WebM est supporté nativement par FireFox, Chrome et Opera, et le
support du format peut être ajouté à Internet Explorer et Safari (mais pas iOS)
en installant un add-on. La prise en charge du codec VP9 WebM est en cours
pour le navigateur Edge de Microsoft 10.

— WAVE : Le format conteneur WAVE, avec le codec audio PCM, est pris en
charge par Firefox et Safari. Il s’agit d’un conteneur capable de recevoir des
formats variés mono ou stéréo, il a été mis au point par Microsoft et IBM. Les
fichiers au format WAVE ont généralement l’extension ".wav".

— FLAC : Le format FLAC est un format libre de compression audio sans perte.
Maintenu par la fondation Xiph.org, il est apprécié pour conserver la qualité des
fichiers sonores originaux en alternative aux formats de compression avec perte
type mp3.

— MP4 : est supporté par le Moving Picture Experts Group. C’est un format
non-libre (soumis à brevets) et non-gratuit. Toutefois, il est gratuit dans certaines
utilisations (la diffusion gratuite de vidéos par des sites Web par exemple). Il
est une bonne option pour le partage de la vidéo sur le Web. C’est aussi le
format recommandé par YouTube et Vimeo. Il offre une bonne qualité d’image
à un haut taux de compression. Il est aussi utilisé par iTunes. Les ordinateurs
MAC et PC supportent ce type de fichier. Un seul inconvénient, il faut avoir le
bon codec installé. Les fichiers MP4 utilisant H.264 sont lisibles nativement sur
les navigateurs Apple (Safari, Safari Mobile), Opera, Google Chrome et Firefox
depuis la version 34.

— CAF : a été développé par Apple pour s’affranchir des limitations de conteneur
audio plus ancien comme le AIFF ou le WAV. Il est compatible avec le système
Mac OS X d’Apple depuis la version 10.3 et il est lisible par Quicktime 7.

— MOV : Il est probablement le plus populaire. Il a été créé par Apple et est plus
facilement lisible par un MAC avec le logiciel Quicktime. Il est aussi le format le
plus facilement éditable. Il offre aussi l’avantage d’avoir une bonne réputation et
une bonne capacité de compression. Finalement, il est compatible avec la plupart
des sites de transfert de vidéos.
— AVI : Ce format de fichier est le meilleur ayant un haut taux de compression
puisqu’il offre un large choix de Codecs. Par contre, il faudra faire une panoplie
de tests pour réussir à trouver le meilleur codec selon les besoins (Poids du fichier
vs qualité d’image).Cependant, le format avi n’est compatible qu’avec Windows.

29
— FLV : Le format le plus différent de tous les formats. Il est, pour la plupart du
temps, associé au format Flash. Il peut donc être intégré facilement à toute page
Web sans avoir à passer par Youtube. C’est un format parfait pour l’interactivité
avec la vidéo. Cependant, son usage est limité et il ne peut être lu localement
sur l’ordinateur qu’avec Flash Player.

— WMV : C’est le format désigné par Windows. (Windows Media Video). Il peut
cependant être lu par les MAC si une composante gratuite supplémentaire est
installée Il peut être intégré à une page Web facilement.

30
4.6 Quelques exemples de notre lecteur :
-Etat initial du lecteur :

Lors du lancement de la page Web, l’interface du lecteur s’affiche comme illustrée

ci-dessous :

Figure 4.6.1 – Affichage du lecteur

31
 -Affichage de l’animation :

En cliquant sur play, le lecteur affiche une animation qui change selon l’audio en
lecture, l’interface suivante s’affiche :

Figure 4.6.2 – Lecture d’un audio

32
 -Audio en pause :
En cliquant sur pause, l’animation s’arrête et le lecteur se met en pause, comme
l’indique l’interface suivante :

Figure 4.6.3 – audio en pause

33
 -Lecture de la vidéo :

Quand on clique sur play, la vidéo s’affiche, la lecture commence directement, l’in-
terface s’affiche comme suit :

Figure 4.6.4 – vidéo en lecture

34
 -Changement de théme :

Le clic sur le bouton en haut de l’interface permet de changer le théme entier du

lecteur :

Figure 4.6.5 – changement de théme :

35
Le deuxième clic sur le bouton permet de remettre le théme rose :

Figure 4.6.6 – changement de théme en rose :

36
 -La recherche d’un fichier :

Le lecteur permet d’effectuer une recherche dans la playlist, une fois le nom du
titre entré dans la barre de recherche, on distingue deux cas :

-Le cas où le morceau existe dans la playlist, le titre s’affiche, et le lecteur lit le
fichier, comme l’indique la capture suivante :

Figure 4.6.7 – existance d’un morceau :

37
 -Le deuxième cas est celui de l’inexistance du morceau recherché, un message d’erreur
s’affiche indiquant que le fichier demandé n’existe pas.

Figure 4.6.8 – morceau introuvable :

4.7 Adaptation du lecteur au format mobile :

Vu que le pourcentage d’utilisateurs qui consultent des sites web sur leurs appareils
mobiles ne cesse d’augmenter, il est donc impératif pour nous d’adapter le lecteur à une
version mobile pour un accés plus facile.

L’intérêt d’avoir un site web optimisé pour mobile (tablette ou smartphone) est de
rendre l’expérience agréable pour l’utilisateur. Ainsi les informations sont faciles d’accès
et l’utilisateur trouve ce qu’il veut rapidement sans avoir à trop chercher.

38
4.7.1 Les avantages de l’optimisation :
Google a annoncé qu’un site web optimisé pour mobile aura plus de chance d’appa-
raître dans les résultats de recherche qu’un site web non optimisé. L’optimisation mobile
devient donc un élément important dans la création d’un site web(notre lecteur dans ce
cas ).

Voici les principaux avantages de cette adaptation :

— Le texte est facilement lisible sur un appareil mobile, sans avoir à zoomer.
— Les liens ne sont pas trop rapprochés et peuvent être cliqués.
— Le contenu n’est pas plus large que l’écran, c’est-à-dire qu’il n’est pas nécessaire
de défiler ou de zoomer pour voir le contenu.
— La fenêtre est adaptée à l’affichage mobile et la page se charge rapidement.

39
4.7.2 Exemple de la version mobile du lecteur :
Afin de garantir une bonne expérience pour l’utilisateur un site internet adapté aux
mobiles permettra une meilleure lecture des contenus, une bonne navigation et une
utilisation agréable.

Le code css qui nous permit cet affichage est le suivant :

@media screen and (max-width : 1031px){

/* code adapté à une taille maximal 1031px */
#conteneur{
height : auto !important ;
top :0 ; left : 0 ;
transform : translate(0%, 0%) ;
}

#bloc_gauche{
width : 100% !important ;
display : block ;
position : relative !important ;
}

#bloc_droite{
position : relative !important ;
width : 100% !important ;
}

.player{
width : 99.5% !important ;
float : left ;
}

.Playlist{
overflow : visible !important ;
}

#equalizer{
/*background : red !important ;
width : 630px !important ;
margin : 0 auto !important ;*/
}

#audioPlayer{
height : 370px !important ;
}
}

40
 On retrouve ci-dessous des exemples du lecteur dans des états différents (lecture,
pause. .) :

-> Le morceau audio en pause :

Figure 4.7.1 – audio en pause en version mobile

41
-> Lors de la lecture d’un morceau audio :

Figure 4.7.2 – audio en lecture sur version mobile

42
 -> L’affichage de la playlist :

Vu que la playlist contient plusieurs morceaux , la playlist s’affichera alors tout au

long de l’écran , et l’utilisateur devrai défiler l’écran pour découvrir tous les élements de
la playlist :
On trouve ci-dessous l’exemple de l’affichage de la playlist :

Figure 4.7.3 – Playlist du lecteur

43
-> La lecture d’un morceau vidéo :

Figure 4.7.4 – vidéo en lecture

44
4.7.3 Les différents types d’appareils :
La version mobile est recommandé au vu de l’augmentation de l’utilisation des
smartphones et tablettes et afin d’avoir un design simple et épuré. Dans cette partie
, nous allons vous présenter les versions mobiles de quelques appareils dans le but de
comparer l’affichage du lecteur d’un téléphone à un autre.

-> On retrouve dans les captures suivante l’affichage du lecteur dans un appareil
mobile avec une résolution de 360*640 et l’affichage d’une résolution de 667*1009 :

Figure 4.7.5 – 360*640

45
 Figure 4.7.6 – 667*1009

-> Ces deux captures représente l’affichage avec une résolution de 360*640 ainsi que
sa playlist :

46
47
Figure 4.7.7 – 360*640

48
Conclusion

Le but principal de ce projet de fin d’étude était de concevoir et développer un

lecteur audio et vidéo sur un navigateur web en utilisant HTML5 et CSS3.
En effet, la conception de cette application a débuté avec la création de l’interface du
lecteur qui nous a permis d’afficher explicitement la playlist contenant tous les morceaux
audio et vidéos.

Ce projet de fin d’études nous a permis, d’une part, d’approfondir nos connaissances
et notre savoir acquis durant les années de notre formation en Licence à la faculté des
sciences de Rabat, et d’autre part, de préparer notre intégration à la vie professionnelle
et avoir un début d’expérience significatif. Ce projet a été une belle occasion pour
travailler en groupe, pour développer nos connaissances et nos compétences et surtout
pour découvrir de nouvelles fonctionnalités de « HTML5 » et de nouveaux langages tels
que « jQuery ».

Nous avons rencontré différentes difficultés dont les plus essentielles selon notre avis
sont les suivantes :

a) limitation des formats audio et vidéos que nous pouvons insérer dans le lecteur,
vu que chaque navigateur prend en charge un nombre limité de formats.
b) difficultés de gérer les deux balises audio et vidéos à la fois.

Le travail que nous avons réalisé pourrait être complété et poursuivi sous différents
aspects, notamment :
— Ajouter des raccourcis clavier.
— Ajouter un bouton pour le téléchargement des fichiers audio et vidéos.
— Ajouter plus d’options.
— Création du lecteur dans une applet indépendamment du navigateur.

49
Webographie

[1] Wikibooks : https ://fr.wikibooks.org/

[2] Programmation facile :https ://www.programmation-facile.com

[3] stackoverflow : http ://stackoverflow.com/

[4] jQuery : https ://jquery.com/

[5] OpenClassroom : https ://openclassrooms.com/

[6] Comment ça marche : http ://www.commentcamarche.net/

[7] Créer un site : http ://creer-un-site.fr/

[8] 6ma : http ://www.6ma.fr/

[9] tutorialspoint : https ://www.tutorialspoint.com/

[10] epflOseOx : http ://oseox.fr/ajax/webographie-ajax-jquery-mootools.html

[11] w3schools : https ://www.w3schools.com

50