Comment créer une affiche interactive ?

Porteur(s) du projet : Damien MUTI (Prof. de Numérique)

Date : 15/03/2018

Licence : libre !

Contexte : projets Mars en Baroque et Frac (2017/2018)

Fichiers :

comment_fabriquer_une_affiche_interactive.pdf

comment_fabriquer_une_affiche_interactive.pptx

Nouvelle version Processing (2020-...) : affiche_interactive_1.zip

Ancienne version (2017-2020, incluant la version Raspbery) : exemple_programme.zip

Lien :

AFFICHE TACTILE CUIVRE

raspberry

Description

Ce tutoriel vous permets de concevoir de A à Z une affiche interactive du câblage à la programmation des interactions sous Processing en utilisant un PC ou un Mac.

Une version des programmes pour Raspbery est aussi proposée.

Matériaux

Makey-Makey :https://makeymakey.com/

Scotch de cuivre adhésif : https://www.gotronic.fr/art-cuivre-adhesif-cu155ad-20730.htm

Ordinateur + Processing : https://www.processing.org/

ou

Raspbery : http://www.raspberrypi-france.fr/

Tutoriel

Le pdf du tutoriel est le suivant :

comment_fabriquer_une_affiche_interactive.pdf

comment_fabriquer_une_affiche_interactive.pptx

vous pouvez télécharger tous les programmes Processing sur les liens suivant :

version 2020 : affiche_interactive_1.zip

version 2018-2020 : exemple_programme.zip

Procédure d'installation

ATTENTION, pour faire fonctionner le programme, il convient de suivre la procédure suivante:

Décompresser le dossier que vous avez téléchargé sur le lien suivant : exemple_programme.zip.

Placer le dossier “Affiche_interactive” dans votre dossier de travail.

Afficher le programme “Affiche_interactive.pde” dans l'interface de développement de Processing:

Si elle ne sont pas déjà installée sur votre machine, télécharger et installer les librairies suivantes: Video et Sound. Pour cela aller dans Sketch > Importer une librairie > Ajouter une librairie. La fenêtre suivant s'ouvre :

Taper “Video” dans le champ “Filter” (voir image ci-dessus), puis sélectionner la librairie “Video” à installer (normalement l'avant dernière de la liste), et enfin cliquer sur “Install”:

Faire de même pour l'installation de la librairie “Sound” :

Le programme “Affiche_interactive.pde” est désormais prêt à fonctionner correctement.

Exécution du programme

Lorsque le programme “Affiche_interactive.pde” est affiché dans l'interface de développement de Processing, appuyer sur la flèche (bouton “play”): une fenêtre noire apparaît.

Avec la sourie, cliquer sur cette fenêtre pour la rendre active.

Le programme est conçu pour lancer une vidéo ou un son lorsqu'on appuie sur les touches “UP”, “DOWN”, “LEFT”, “RIGHT” du clavier.

Modification du programme pour votre projet

Le programme est le suivant :

/** Affiche tactile interactive -
* Quand on appuie sur une touche, cela lance une image, une vidéo, une annim, un son, etc...
*/
/// librairies
import processing.sound.*;
import processing.video.*;
// variables globales
PImage im; // une image
SoundFile son; // un son
Movie vid; // une vidéo
// bouton son image active ?
boolean image_active = false;
// bouton son actif ?
boolean son_actif = false;
float tempsDebutSon = 0; // temps du début de la musique a été joué
// bouton video active ?
boolean video_active = false;
void setup() {
size(500, 500);
noStroke();
background(0);
// initialisation des variables globales
im = loadImage("images/chien.jpg");
// chargement du son
son = new SoundFile(this, "sons/beat.aiff");
//println(son.duration());
// chargement de la video
vid = new Movie(this, "videos/affiche.mp4");
}
void draw() {
// gestion du son ////////////////////////////////////////
// test du temps pendant lequel le son est joué
//debug
println("son_actif = "+ son_actif);
// fin debug
if (son_actif){
float tempsEcoute = millis() - tempsDebutSon ;
// debug
println("tempsDebutSon = " + tempsDebutSon);
println("tempsEcoute = " + tempsEcoute);
println("durée du son " + son.duration());
// fin debug
if ( tempsEcoute >= son.duration()*1000){ // si le son est fini
son_actif = false; // bouton son_actif off
}
}
// gestion de la vidéo ////////////////////////////////////////
if (video_active){
image(vid, 0, 0, width, height);
}
else{
background(0); // fond noir
}
// gestion de l'image
if (image_active){
float x = 30 + random(-20,20); // random sur la position
float y = 30 + random(-20,20);
image(im,x,y,200,200);
}
}
void keyPressed() {
if (key == CODED) {
if (keyCode == RIGHT) { // son
if (son_actif==false){ // le son ne joue pas
// arrêter l'autre son qui tourne éventuellement
son.stop();
// chargement du son 1
son = new SoundFile(this, "sons/beat.aiff");
son.play();
tempsDebutSon = millis();
son_actif = true; // bouton son_actif on
}
else { // le son joue
son.stop();
son_actif = false;
}
}
if (keyCode == LEFT) { // son 2
if (son_actif==false){ // le son ne joue pas
// arrêter l'autre son qui tourne éventuellement
son.stop();
// chargement du son 1
son = new SoundFile(this, "sons/Armstrong.wav");
son.play();
tempsDebutSon = millis();
son_actif = true; // bouton son_actif on
}
else { // le son joue
son.stop();
son_actif = false;
}
}
if (keyCode == UP) { // video 1
if (video_active == false){ // la vidéo 1 ne tourne pas
// chargement de la video 1
vid = new Movie(this, "videos/affiche.mp4");
vid.loop();
video_active = true;
}
else{
vid.stop();
clear();
video_active = false;
}
}
if (keyCode == DOWN) { // video 2
if (video_active == false){ // la vidéo 2 ne tourne pas
// chargement de la video 2
//vid = new Movie(this, "videos/transit.mov");
vid = new Movie(this, "videos/ArmstrongAlunissage.mp4");
vid.loop();
video_active = true;
}
else{
vid.stop();
clear();
video_active = false;
}
}
}
if (key == ' ') { // image
image_active = !image_active;
}
}
void movieEvent(Movie movie) {
vid.read();
}

Il est possible de rajouter des touches qui lancent des vidéos ou des sons dans la fonction keyPressed(). pour cela voir la documentation sur:

La méthode keyPressed() : https://www.processing.org/reference/keyPressed_.html.

L'argument key : https://www.processing.org/reference/key.html.

Ainsi que l'argument keyCode : https://www.processing.org/reference/keyCode.html

Il est aussi possible d'introduire une animation dans le code du programme qui serait lancée lorsqu'on appuie sur une touche.

Un exemple est proposé par des étudiants de BTS DG2 en 2017-2018, Mai Quynh Nguyen, Emma BAYLION et Anaïs Aubert pour le projet FRAC 2018:

emma_mai_ana_s_frac_glmovie_2.rar.

Un autre exemple est proposé par des étudiants de BTS DG2 en 2017-2018, Mai Quynh Nguyen, Emma BAYLION et Anaïs Aubert pour le projet Mars en Baroque 2018:

affiche_interactive_mb18_mai.zip

}

Photos

Précaution d'installation de l'affiche et médiation

Lors du câblage de l'affiche, il est important de bien choisir le coin dans lequel vont sortir les connexion des boutons.

Sur l'image précédente, les connexions sont sur le coin inférieur gauche de l'affiche (ici, sur le coin inférieur droit lorsque l'affiche est retournée).

En effet, il convient de prévoir la position de l'affiche par rapport à l'ordinateur sur lequel est connecté le Makey-Makey, afin que les câbles de connexion entre le Makey-Makey et l'affiche ainsi que le câble de connexion USB entre le Makey-Makey et l'ordinateur ne soient pas trop courts, ne passe pas au milieu de l'affiche, ou ne soient pas esthétiquement dérangeants.

Dans le cadre d'un projet conduit avec la bibliothèque de l'Alcazar en décembre 2018, avec Mme Cleyet-Merle et M Muti Desgrouas, une borne en bois contenant un ordinateur et des haut-parleurs a été placé à gauche de l'affiche. La connexion a donc été effectuée dans le coin inférieur gauche de l'affiche.

Quelques photos du projet : Câblage de l'affiche:

Positionnement de l'affiche par rapport au meuble contenant l'ordinateur et par rapport à l'image projetée par le vidéo-projecteur:

Connexion de l'affiche avec le Makey-Makey:

Positionnement final de l'affiche:

Le programme associé à cette affiche est donnée dans la partie “Exemples de programmes” ci-dessous. Il prend en compte la taille de la vidéo par rapport à la taille de la fenêtre d'affichage.

Exemples de programmes:

Voici un exemple de programme réalisé par Mai Quynh Nguyen, Emma BAYLION et Anaïs Aubert pour le projet FRAC 2018, en BTS DG2:

emma_mai_ana_s_frac_glmovie_2.rar

Un autre exemple est proposé par des étudiants de BTS DG2 en 2017-2018, Mai Quynh Nguyen, Emma BAYLION et Anaïs Aubert pour le projet Mars en Baroque 2018:

affiche_interactive_mb18_mai.zip

Voici l'ensemble des programmes développés par Sevan Papazian, alors étudiant de BTS DG2 en 2017-2018, sur les projets Frac 2018 et Mars en Baroque 2018:

mars_en_baroqe_.zip

affiche_interactive_sevan_1.zip

Dans le cadre d'un projet conduit avec la bibliothèque de l'Alcazar en décembre 2018, avec Mme Cleyet-Merle et M Muti Desgrouas, une affiche interactive a été développée sur la thématique de mai 68. Le programme proposé permet de gérer la différence de taille entre la fenêtre d'affichage et la vidéo. Il permet entre autre d'ajuster la taille de la vidéo à la taille maximale de la fenêtre d'affichage, si la taille de la vidéo est plus grande que celle de la fenêtre d'affichage. Il permet aussi de centrer la vidéo si celle-ci a une taille plus petite que celle de la fenêtre d'affichage. Le programme est le suivant :

affiche_interactive_3.zip

Programme Processing sur du Raspbery

La transposition du programme sous Raspbery n'est pas immédiate. En effet, la librairie classique “Video” de Processing, ne fonctionne pas sur le système d'exploitation Raspbian (2018) du Raspbery. Les versions suivante de Processing sur Raspbian le permettront sans doute, mais actuellement, ce n'est pas le cas. Il est donc nécessaire d'utiliser une librairie spécifiquement développée pour le raspbery : GLVideo, qui est encore à la version béta. Voir : https://github.com/gohai/processing-glvideo .

Précaution d'utilisation:

Pour afficher une vidéo en utilisant la librairie GLVideo le raspbery, il convient d'utiliser une vidéo très légère (moins d'1MO) avec une taille d'image réduite, sans certitude de succès.

Une alternative consiste à transformer la vidéo/gif qui doit être affichée en sa séquence d'images correspondante, puis à charger et afficher de façon récursive chaque image les une après les autres dans la boucle draw() de Processing qui tourne généralement à 30 images/seconde.

Plusieurs logiciels permettent de réaliser cette opération:

After Effect (propriétaire).

Avidemux (libre) : http://www.commentcamarche.com/download/telecharger-34055660-avidemux. Sous LInux, il est possible d'installer ce logiciel via le Gestionnaire de logiciel.

VirtualDub (libre) : http://www.virtualdub-fr.org/telechargement

VirtualdubMod (libre) : http://www.clubic.com/telecharger-fiche45486-virtualdubmod.html

ffmpeg (Libre) : https://www.lemondedustopmotion.fr/news/voir/7/Transformer_une_squence_dimages_en_une_vido_avec_ffmpeg

Enfin, une dernière possibilité est d'utiliser le programme processing suivant “fait sur mesure” :

/* Programme permettant de convertir une vidéo en une séquence d'image au format .jpg.
D'autre formats sont disponibles (TIFF, TARGA, et PNG). Voir l'aide en ligne de la méthode save() de la classe PImage (https://www.processing.org/reference/PImage_save_.html).
Précaution d'emploi: il faut placer la vidéo à déployer dans le dossier "data" du sketch et remplacer le fichier d'exemple "transit.mov" par votre fichier vidéo à la ligne 19.
*/
import processing.video.*;
int indiceImage = 0; // numéro de l'image à enregistrer issue de la vidéo
Movie movie;
void setup() {
size(640, 360);
background(0);
// Load and play the video in a loop
movie = new Movie(this, "transit.mov");
movie.play();
}
void draw() {
image(movie, 0, 0, width, height); // affichage de l'image en cours issue de la vidéo
String nomImage = "data/Sequence/image_"+indiceImage+".jpg"; // nom de l'image à enregistrer
movie.save(nomImage); // sauvegarde de l'image
indiceImage ++; // incrémentation de l'indice de l'image issue de la vidéo
}
void movieEvent(Movie m) {
m.read();
}

le programme et les fichiers vidéo de cet exemple sont téléchargeable ici :

video2sequenceimages.zip

Affiche interactive en Python sur Raspbery Pi

Présentation - Pourquoi python ?

L'utilisation d'un Raspbery Pi est très cohérent dans la médiation de l'affiche interactive dans un lieu d'exposition (musée, bibliothèque, etc.). En effet, le Raspbery tient peu de place et peut être facilement disposé de façon discrète comparé à une tour d'ordinateur fixe ou un ordinateur portable...

Comme nous l'avons vu dans la partie précédente, le programme de gestion des interactions utilisant un programme Processing sur un Raspbery Pi 3B prend énormément de ressources et est lent à l'exécution. D'autre part, la vidéo est très difficilement gérable. Une des solutions est de programmer l'algorithme d'interactivité sous Python qui est un langage particulièrement adapté pour le Raspbery...

Algorithme

Convention : On appelle “média”, une image, un son, une vidéo, ou une animation à jouer/afficher.

L'enjeu de l'algorithme est de détecter les interactions “clavier” (c'est-à-dire lorsqu'on appuie sur une touche du clavier). Ainsi, lorsqu'on appuie sur une touche, il faut :

stopper toutes les médias (son, vidéo, image affichée) qui sont en train de jouer.

identifier le média correspondant à la touche:

Si le média est déjà en train de jouer, alors stopper le média,

sinon, jouer le média.

Un programme fonctionnel utilisant la librairie Kivy

qu'est-ce que la librairie Kivy ?

Kivy est une bibliothèque libre et open source pour Python, utile pour créer des applications tactiles pourvues d'une interface utilisateur naturelle. Cette bibliothèque fonctionne sur Android, iOS, GNU/Linux, OS X et Windows. Elle est distribuée gratuitement et sous licence MIT. Pour plus d'information, voir l'article sur la librairie Kivy de Wikipaedia.

un tutoriel succinct est disponible sur les liens suivants :

Site officiel

Uko

Étapes préalables : Installer Python3 et la librairie Kivy

Python3 et Mu-editor

L'installation de kivy n'est possible que si “python3” est installé sur le Raspbery. Normalement, sur le système d’exploitation Raspbian, Python3 est installé par défaut. Sinon, taper dans un Terminal la ligne de commande suivante :

sudo apt-get install python3

Il existe énormément d'éditeur pour coder. Mu-editor est un des environnement les plus pratiques. La procédure d'installation de Mu-editor sur Raspbian est disponible sur le lien suivant :

How to install Mu on a Raspberry Pi

Sinon, taper directement dans un Terminal la ligne de commande suivante:

sudo apt-get install mu-editor

Installer Kivy

De manière générale, vous pouvez installer la librairie Kivy sur le site officiel en sélectionnant votre système d'exploitation :

Kivy/Download

Dans le cas du Raspbery Pi, il faut choisir le système d'exploitation “Raspbery Pi” :

Le manuel d'installation se trouve sur le lien suivant :

https://kivy.org/doc/stable/installation/installation-rpi.html

Vous pouvez aussi lancer les lignes de commandes suivantes dans un Terminal :

sudo apt install python3-pip build-essential git python3 python3-dev ffmpeg libsdl2-dev libsdl2-image-dev libsdl2-mixer-dev libsdl2-ttf-dev libportmidi-dev libswscale-dev libavformat-dev libavcodec-dev zlib1g-dev
sudo apt install libgstreamer1.0 gstreamer1.0-plugins-base gstreamer1.0-plugins-good
sudo pip3 install ffpyplayer
sudo pip3 install cython
sudo pip3 install git+https://github.com/kivy/kivy.git@master

Plus simplement :

Télécharger et décompresser le fichier suivant : install_kivy_on_rpi.sh . Vous retrouvez ce fichier sur la plateforme GitHub d'Olivier Boesch.

Enregistrer install_kivy_on_rpi.sh dans votre dossier de travail sur le Raspbery Pi.

Ouvrir un terminal et changer le chemin d'accès pour vous placer dans votre dossier de travail dans lequel se trouve le fichier install_kivy_on_rpi.sh. Par exemple :

cd Documents/Damien/Python_Olivier_Boesch/affiche-interactive-master/

lancer la commande d'installation de toutes les dépendances détaillées dans le script ci-dessus en tapant dans la console :

sh install_kivy_on_rpi.sh

Programme Pyhton - Olivier Boesch

Télécharger le code sur GitHub

Le code Python permettant de gérer les interactions clavier et de lancer un media grace à la librairie kivy a été développé par Olivier Boesch, professeur de Physique et Informatique au lycée Saint-Exupéry à Marseille. Le code est disponible sur la plateforme GitHub sur le lien suivant :

https://github.com/olivier-boesch/affiche-interactive/

Télécharger l'ensemble du projet en cliquant sur “Clone or Download” :

Après avoir décompressé le dossier “affiche-interactive-master”, aller dans le sous dossier “src” (source): Ce dossier est composé de :

main.py : programme principal en Python à lancer

afficheinteractive.kv : script kivy permettant le prototypage de l'interface visuelle

key_inspector.py : programme en Python permettant de visualiser la touche qui est pressée. Ce programme est utile car la librairie Kivy est conçue pour les claviers QWERTY et permet d'être certain du code de la touche qui est véritablement détecté...

media : dossier contenant les images, les sons et un fichier config.json

Un fichier JSON (JavaScript Object Notation) est un format de données textuelles dérivé de la notation des objets du langage JavaScript. Il permet de représenter de l’information structurée. Pour plus d'information voir les liens suivants :

Wikipedia

json.org

Dans le cas présent, ce fichier JSON permet d'associer à une touche donnée (“a”, “down”, “up”, etc.), un type de média (vidéo, son, image), via la variable media_type, et un chemin d'accès dans la mémoire de l'ordinateur (“media/star_trails.mp4”) via la variable src :

{
"a": {"media_type": "video", "src": "media/text.mp4"},
"z": {"media_type": "image", "src": "media/len_full.jpg"},
"e": {"media_type": "sound", "src": "media/yeah.mp3"},
"up": {"media_type": "sound", "src": "media/ohno.mp3"},
"down": {"media_type": "image", "src": "media/ada.jpg"},
"left": {"media_type": "video", "src": "media/sample.mp4"},
"right": {"media_type": "video", "src": "media/star_trails.mp4"},
"r": {"media_type": "image", "src": "media/hud.png"}
}

Customiser le code pour y ajouter ses propres médias

Inclure les images, le son, la vidéo

Pour adapter le programme à l'interactivité prévue pour votre affiche, il faut inclure dans le dossier “media” vos images, vos vidéos et vos sons :

Modifier le fichier config.json

Supposons que j'inclue une vidéo intitulée “ma_video.mp4” et que je souhaite l'associer à la touche “up”. Il faudra que j'inclue ou que je modifie la ligne suivante dans le fichier config.json :

{ ...
"up": {"media_type": "video", "src": "media/ma_video.mp4"},
...
}

On procède de la même manière avec les autres médias.

Code commenté

Le code est composé de 2 parties :

main.py : Programme en Python permettant de gérer l'interactivité via les touches. Son rôle est de lancer un média (vidéo, son, image) lorsqu'une touche donnée est pressée.

affiche interactive.kv : Programme en langage Kivy permettant d'organiser l'interface graphique dans lequel sont affichés les médias.

le programme main.py est composé des classes suivantes :

class MediaManager(Widget): Permet de capturer chaque événement clavier. Analyse le fichier config.json et associe la touche détectée au media (image, son, vidéo) correspondant. La classe transmet ensuite le chemin d'accès du média (image ou vidéo) à son “widget” correspondant. Il s'agit d'une “étiquette” le caractérisant de façon unique. Le son est, quant à lui, joué directement.

class VideoScreen(Screen): Permet d'afficher les vidéos.

class ImageScreen(Screen): Permet d'afficher les images

Builder.load_file('afficheinteractive.kv'): permet de charger le fichier Kivy (kv) permettant d'organiser l'interface graphique dans lequel sont affichés les médias. Remarque: il s'agit d'une instruction, mais pas d'une classe...

class AfficheApp(App): Classe principale du programme. Elle appelle dans le bon ordre les classes précédentes pour gérer de façon correcte le lancement des médias lors des événements clavier.

if name == 'main': AfficheApp().run(): Permet de lancer l'application.

Lancer l'application

Pour lancer le programme, il faut :

ouvrir un Terminal :

se placer dans le dossier contenant le fichier main.py :

cd Documents/Damien/Python_Olivier_Boesch/affiche-interactive-master/src/

lancer l'application en tapant l'instruction suivante :

python3 main.py

Un programme fonctionnel utilisant la librairie Pygame - Pas de vidéo

Présentation du problème

Le programme précédent, basé sur la librairie “Kivy” est très fonctionnel. Il nécessite, cependant, d'avoir une très bonne maîtrise du code pour être totalement compris.

Il existe des librairies plus simples d'utilisation pour développer sous python l'algorithme de gestion des événements liés à l'affiche interactive. La librairie “Pygame”, qui a été implémentée pour développer des jeux vidéos en 2D, est une librairie très simple d'utilisation. Elle est largement utilisée au lycée pour des applications multiples. Généralement, les programmes associés sont effectués sur une interface de développement (IDE) très pédagogique appelé “Edupyhthon”.

Dans les premières versions de Pygame, la vidéo était prise en charge. Cependant, les dernières mises à jour de cette librairie ont évacué la gestion de la vidéo dans les années 2015 (voir le lien suivant sur le forum d'OpenClassroom).

Par conséquent, le programme proposée dans cette partie ne gère que :

l'affichage d'une image et

le lancement d'un son,

éventuellement le lancement d'une animation (en utilisant les fonctionnalités de Pygame, mais qui nécessite un niveau de programmation relativement élevé comparé à ce qui existe sous Processing). Il y a aussi la possibilité d'appeler sous Python une librairie Processing qui permet de réinvestir les programmes développés sous Processing.

La librairie Pygame

Présentation

La page de présentation officielle de la librairie Pygame est accessible sur le lien suivant :

Pygame.org

Vous y trouverez :

Les dernières mises à jour,

La documentation (voir après),

La procédure d'installation (voir partie ci-dessous),

Un certain nombre de tutoriels et d'exemple d'utilisation,

etc.

Installation

La procédure d'installation est disponible sur le lien suivant :

installation de Pygame

L'installation de Pygame sus un Rapsbery s'effectue en langage Shell dans une console de commande. Il vous suffit de suivre scrupuleusement les instructions données pour :

Installer Python 3. Normalement, cette procédure est inutile car la distribution du système d'exploitation Raspbian (dérivée de Debian) inclue déjà Python 3.

Installer “pip”, un utilitaire très pratique pour installer et inclure des librairies python. Vous pourrez installer pip en suivant le tutoriel suivant:

pip installation

Installer la librairie Pygame à l'aide de l'utilitaire “pip”.

Documentation

Une documentation très complète des différentes fonctionnalités de la librairie Pygame est donnée sur le site officiel sur le lien suivant :

Documentation Pygame

Vous y trouverez des explications sur :

l'installation de Pygame (déjà abordée dans la partie précédente),

des tutoriels et des exemples,

le détail de toutes les fonctionnalités de la librairie :

gestion de l'affichage de l'espace de dessin (idem que Processing)

gestion de l'affichage des images

gestion de la couleur

gestion des événements clavier, d'un joystick,

etc.

Un tutoriel sur l'utilisation de la librairie Pygame est proposé (par Johan Segura, Pr. de Maths et moi-même) sur le site “MathSoup” dans le lien suivant :

Documentation Pygame

Algorithme et programme adapté au Raspbery Pi

Algorithme

Convention : On appelle “média”, une image, un son (au format .wav), ou une animation à jouer/afficher. Attention :Nous excluons ici l'utilisation de la vidéo.

L'enjeu de l'algorithme est de détecter les interactions “clavier” (c'est-à-dire lorsqu'on appuie sur une touche du clavier). Ainsi, lorsqu'on appuie sur une touche, il faut :

identifier le média correspondant à la touche:

Si le média est déjà en train de jouer, alors stopper le média,

sinon, jouer le média.

Le code en Python est le suivant :

#importer les librairies
import pygame, sys
from pygame.locals import *
#from pygame import *
from pygame import mixer
#from pygame import music
#initialiser tous les modules de la librairie pygame
pygame.init()
#pygame.mixer.pre_init(44100, 16, 2, 4096) #frequency, size, channels, buffersize
#pygame.mixer.init(44100, -16, 2, 2048)
pygame.mixer.init()
## variables globales
image_active = False #gestion des images
son_actif=False #gestion du son
son_isPlaying = False # le son est en train de jouer
# charger le nom des sons
nomDuSon = []
nomDuSon.append("data/Sons/wav/ohno.wav")
nomDuSon.append("data/Sons/wav/tiouh.wav")
nomDuSon.append("data/Sons/wav/Kassav - Sye bwa.wav")
#charger le son i
son = pygame.mixer.Sound(nomDuSon[2])
#Ouverture de la fenêtre Pygame
fenetre = pygame.display.set_mode((640, 480))
#Chargement et collage du fond
fond = pygame.image.load("data/Images/background.jpg").convert()
fenetre.blit(fond, (0,0))
#Chargement et collage du personnage
perso = pygame.image.load("data/Images/perso.png").convert_alpha()
#Rafraîchissement de l'écran
pygame.display.flip()
#BOUCLE INFINIE
continuer = 1
while continuer:
#afficher l'image du fond
fenetre.blit(fond, (0,0))
#tester tous les événements clavier
for event in pygame.event.get():
if event.type == QUIT: # croix ou "Stop"
continuer = 0
pygame.display.quit()#ferme la fenêtre
sys.exit() #arrête le programme
if event.type == KEYDOWN:
if event.key == K_UP:#lancer/éteindre un son
print("K_UP")
print(son_isPlaying)
if son_isPlaying == False : # si le son ne joue pas : lancer le son et mettr ela variable son_isPlaying à "True"
son.play()
son_isPlaying = True
else :
son.stop()
son_isPlaying = False
if event.key == K_DOWN: #affichage des images
image_active = not image_active
print("image_active",image_active)
print("KEY_DOWN")
if image_active : #teste si on doit afficher l'image
fenetre.blit(perso, (10,10))
#Rafraîchissement de l'écran
pygame.display.flip()
#vérifier si un son joue
son_isPlaying = pygame.mixer.get_busy()

Vous pouvez le télécharger directement sur ce lien, comprenant aussi tous les médias nécessaires à son bon fonctionnement: affiche_interactive_python_tonerkebab.zip