Top Banner
Moodle 2 et le multimédia (partie 1) Ressource audio
35

(partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Sep 16, 2018

Download

Documents

lamhanh
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Moodle 2et le multimédia(partie 1)Ressource audio

Page 2: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Sommaire de la première partie

PrérequisPrincipeI. Fichier audio

A) Méthode simpleB) Intégrer un lecteur audio à un cours

Préparation des fichiers audio avec AudacityRéduire la taillePréparation du lecteur SLACréation de la ressource dans Moodle

Références

Page 3: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Prérequis

On suppose que vous maîtrisez les techniques de base de Moodle : notamment, savoir déposer un fichier dans une zone de contenu, le définir comme fichier principal, comprendre les options d'affichage, etc.

Sinon, la lecture du Guide de prise en main de Moodle nous semble une lecture nécessaire.

Page 4: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Principe

● Comment Moodle présente-t-il un fichier audio ou un fichier vidéo ?

Un lecteur multimédia est incorporé à la page de cours dès qu'on clique sur un lien audio ou vidéo…Autrement dit, il suffit, théoriquement, de déposer un fichier multimédia : mon_fichier.mp3 ou ma_video.mp4, par exemple, dans une zone de contenu, pour associer ce fichier au lecteur multimédia ad hoc.Par défaut, Moodle se fonde sur le lecteur HTML5 Flowplayer [1] : nous verrons que, malheureusement, celui-ci n'est pas toujours bien configuré.

Page 5: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

I. Fichier audioIntégration dans un cours

Page 6: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

A) Méthode simple

Entrez dans le mode Édition, ajoutez une ressource de type fichier, et déposez votre fichier audio dans la zone de contenu. Indiquez-le comme fichier principal, choisissez l'option d'affichage automatique.

Page 7: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Avec plugin Flash Player : votre navigateur ne dispose pas de lecteur multimédia intégré.

Sans plugin Flash Player : votre navigateur dispose d'un lecteur intégré et sait lire ce format multimédia.

Dans tous les cas, il est possible d'écouter un fichier audio déposé dans un cours Moodle sur la plupart des plates-formes. Voyez néanmoins les réserves exprimées dans les diapos suivantes;

Le fichier audio publié dans le cours a été reconnu par Moodle, qui lui a affecté une icône spécifique.

La lecture du fichier audio est déclenchée en cliquant sur ce lien.

Page 8: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Interprétation des principaux formats de fichiers audio dans Moodle (1)

Plate-forme Navigateur Format audio Lecteur utilisé par défaut

Mac OS X

Chrome

MP3 [11] Lecteur FlashFlowplayer [1]

AAC (mpa) [12] Lecteur intégréà ChromeOGG Vorbis [13]

Firefox

MP3 [11]Plugin QuickTime

AAC (mpa) [12]

OGG Vorbis [13] Lecteur intégréà Firefox

Plate-forme Mac OS X : le rendu n'est pas uniforme. Seul le format OGG [13] se lit nativement dans les deux navigateurs.

Page 9: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Interprétation des principaux formats de fichiers audio dans Moodle (2)

Plate-forme Navigateur Format audio Lecteur utilisé par défaut

Windows Firefox

MP3 [11] Lecteur FlashFlowplayer [1]

AAC (mpa) [12] Plugin VLC [17] (échec)

OGG Vorbis [13] Lecteur intégré à Firefox

Plate-forme Windows : le rendu n'est pas uniforme.Dans les cas des formats AAC [12] ou OGG [13], le plugin est affiché au bas de la fenêtre. Seul le format OGG se lit nativement dans le navigateur.

Page 10: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Interprétation des principaux formats de fichiers audio dans Moodle (3)

Plate-forme Navigateur Format audio Lecteur utilisé par défaut

GNU / Linux

Chromium

MP3 [11] Lecteur Flash Flowplayer [1]

AAC (mpa) [12] Lecteur intégré à Chromium (échec)

OGG Vorbis [13] Lecteur intégré à Chromium.

Firefox

MP3 [11] Lecteur Flash Flowplayer [1]

AAC (mpa) [12] Lecteur vidéo Totem (hors du navigateur)

OGG Vorbis [13] Lecteur intégré à Firefox

Plate-forme GNU/Linux : le rendu n'est pas uniforme.Dans le cas de OGG [13], le lecteur apparaît au bas de la fenêtredans Firefox. La lecture du format AAC [12] est partiellement supportée.Seul le format OGG [13] est nativement supporté dans les deux navigateurs.

Page 11: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Différentes façons de présenter le lecteur multimédia dans Moodle, selon le format de fichier : pour le format MP3 [11], ce lecteur ne fonctionne pas correctement. Il est placé trop en bas pour le format OGG. [13].

Page 12: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Que penser du format MP3 ?

Notez que ce format, quoique très répandu, est néanmoins soumis à une licence, et qu'il ne tombera dans le domaine public qu'en 2017. Par ailleurs, son algorithme est vieillissant et il existe aujourd'hui des alternatives plus efficaces :● Alternative libre de droits : Ogg Vorbis [13] (extension

.ogg) pour lequel les navigateurs récents disposent d'un lecteur intégré.

● AAC [12] (extension .aac, .mp4 ou .mpa) : ce format est moins bien supporté que le précédent.

Dans la section suivante, nous allons voir comment intégrer un petit lecteur audio permettant de combiner deux formats complémentaires : MP3 [11] et OGG Vorbis [13].

Page 13: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

B) Intégrer un lecteur audioAlternative au lecteur de Moodle

Page 14: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Ce que permet le lecteur SLA

Nous avons dans ce qui précède montré quelques défauts du lecteur HTML5 intégré à Moodle.Afin de couvrir l'ensemble des plates-formes et contourner, dans certains cas, les restrictions liées au format MP3 [11], ou les problèmes d'affichage évoqués, nous allons utiliser deux formats audio complémentaires dans un même lecteur :● MP3 [11]● Ogg Vorbis [13]Ce petit lecteur, baptisé Simple Lecteur Audio ou SLA [2], se fonde lui aussi sur l'API HTML5Media [5] utilisée par FlowPlayer [1], mais en privilégiant les lecteurs internes des navigateurs.

Page 15: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

B-1) Préparation des fichiers audio

Dans Audacity [6] nous créons une copie du fichier audio original au moyen du menu : Fichier / Exporter comme MP3ou Fichier / Exporter comme Ogg VorbisQuand nos deux fichiers sont disponibles, nous les renommons respectivement en :- audio.mp3- audio.ogg

Page 16: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Exemple d'exportation du fichier original au format MP3 [11] : menu Fichier > Exporter comme MP3.

Page 17: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

B-2) Un problème de taille

Une erreur très répandue consiste à publier des fichiers volumineux sans égard pour l'utilisateur final qui ne dispose pas nécessairement de votre connexion haut débit.

Nous allons, dans cette section, apprendre à réduire significativement la taille d'un fichier audio.

Page 18: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Principe de la réduction

Afin de diminuer significativement la taille d'un fichier audio à publier dans un cours en ligne, nous allons en dégrader la qualité en modifiant ses propriétés.Remarque : si cette qualité est techniquement dégradée, l'oreille humaine ne percevra pas de différence, surtout dans le cas de la parole. Cette démarche ne serait pas pertinente, en revanche, dans le cas de la musique.

Propriétés Fichier original Fichier dégradé

Canaux Stéréo Mono

Format échantillon 32 bits 16 bits

Page 19: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

1. Importez votre fichier original dans Audacity [6] : menu Fichier > Ouvrir…N.B.: Repérez le menu en forme de flèche qui sera utilisé à plusieurs reprises dans ce qui suit.

Page 20: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

2. Cliquez sur la flèche noire pour afficher le menu d'édition…Menu Flèche > Séparer la piste stéréo...

Page 21: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

3. Une fois les deux pistes séparées, supprimez la piste du bas en cliquant sur la croix.

Page 22: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

4. Menu flèche > Mono.

Page 23: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

5. Menu flèche > Choisir un format d'échantillon > 16-bit.

Page 24: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

6. Éditez les informations sur votre fichier (ID3 tags) : menu Projet > Éditer les Tags ID3…

Page 25: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Saisissez les informations qui apparaîtront dans les lecteurs multimédias.

Page 26: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

7. Terminez en exportant le fichier transformé au format MP3 [11] ou Ogg Vorbis [13], sous un nouveau nom : menu Fichier > Exporter comme mp3.

Page 27: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Cette opération peut apporter une réduction de taille significative, puisque le fichier obtenu peut occuper environ 12 à 13% de la taille initiale.

Exemple :

Bilan de la réduction

Taille avant Taille après Durée

3 008 512 octets

375 968 octets 3:07

Page 28: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

1°) On récupère une copie du modèle de lecteur :http://code.google.com/p/simple-lecteur-audio/downloads/detail?name=lecteur-audio-modele.zip

On la décompacte et on obtient le dossier lecteur_audio_modele :

B-3) Préparation du lecteur SLA

2°) On copie dans le sous-dossier medias : audio.mp3 et audio.ogg.

Page 29: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Préparation du lecteur (fin)

3°) On renomme le dossier lecteur_audio_modele complété. Et l'on crée une

nouvelle archive avec ce dossier : lecteur_audio.zip

Pour créer des archives, vous pouvez utiliser Peazip [8] (Windows, GNU/Linux) ou Keka [9] (Mac OS X)

Page 30: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

B-4) Création de la ressource dans Moodle

Dans un cours de Moodle, passez en mode édition, ajoutez une nouvelle ressource de type fichier.

Page 31: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Nommez-la, décrivez-la. Dans la zone de contenu, ajoutez (1) et décompactez (2) votre archive.Choisissez l'option d'affichage automatique (3), etc.

Page 32: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Faites le ménage en supprimant l'archive devenue inutile.Entrez dans le dossier fraîchement décompacté, et indiquez le fichier prinicpal : index.html. Validez la création de cette ressource...

Page 33: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

Le lecteur SLA affiché dans Chrome ou Firefox : ce sont les lecteurs intégrés des navigateurs qui sont ainsi privilégiés.

Page 34: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

● Logiciels :[1] Flowplayer[2] Simple lecteur audio ou SLA[3] Simple lecteur vidéo ou SLVAPI : [4] Video-js et [5] HTML5Media[6] Audacity [7] Miro Video ConverterCréer des archives ZIP : [8] Peazip, [9] Keka.[10] Module Java ; [17] VLC.

● Formats multimédias : [11] MP3 ; [12] AAC ; [13] OGG Vorbis ; [14] MP4 ; [15] WebM

● Vidéo de l'exemple : [16] Big Blue Bunny

Références

Page 35: (partie 1) et le multimédia Moodle 2cache.media.education.gouv.fr/file/Aide_et_doc./43/2/moodle-et-le... · du lecteur HTML5 intégré à Moodle. Afin de couvrir l'ensemble des plates-formes

À propos de ce guideAuteur : Patrick CARDONA, collaborateur du Bureau des Missions Pédagogiques, BdMP-TICE, Académie de Montpellier

Si vous avez constaté une erreur ou une imprécision dans ce guide, n'hésitez pas à me contacter pour me proposer vos commentaires.

Contact : patrick.cardona @ ac-montpellier.fr

Les tests ont été effectués sur les environnements suivants :

Matériel Système d'exploitation Version

Mac Book Pro Mac OS X (Intel) 10.8.2

LoRDi 2012 Windows 7

Toshiba Satellite Ubuntu 10.3 LTS