Lecture mp3 événementielle

**buffalo974** · 24/02/2015, 11h32

Bonjour,

je suis pythoniste et je fait un petit serveur avec Flask, et j'utilise Brython pour remplacer javascript.

Après un click sur un bouton, j' arrive à afficher un message équivalent à alert() chez javascript. Voici le template d' accueil :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
<head>
<meta charset="iso-8859-1">
 
<title> Mon titre</title>
 
    <!-- Bootstrap core CSS -->
    <link href="./static/bootstrap.min.css" rel="stylesheet">
 
    <script src="/static/js/brython.js"></script>
 
 
 
</head>
<body onLoad="brython()">
<script type="text/python">
from browser import document as doc
from browser import alert
 
 
 
def echo(ev):
    alert("Salut %s !" %doc["zone"].value)
 
doc["echo"].bind('click', echo)
 
 
</script>
 
<p>Vous vous appelez : <input id="zone"><button id="echo">click !</button><p>
</body>
</html>
 
<!-- jQuery (necessary for Bootstraps JavaScript plugins) -->
    <script src="./static/jquery-2.1.0.min.js"></script>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./static/bootstrap.min.js"></script>
    <!-- Brython scripts
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="./static/brython_dist.js"></script>
 
<br />
<h3>La date d'aujourd'hui est : {{ la_date }}</h3>
<br />
 
 
</body>
</html>

Je voudrai déclencher la lecture d'un mp3 en même temps que l'affichage de l' alerte.

Pour produire la musique , il existe des librairies comme pygame ou autres mais il y a des contraintes de version de python , des histoires de 32/64 bits, du portage linux / windows etc etc.

Je voudrai savoir si il existe une astuce passant par HTML5 seul : j' avais pensé à torturer une balise <audio>

dans le template, et la mettre de taille 0 pixel. Pourriez vous m' aider pour la syntaxe de sorte que la lecture ne

se fasse qu'en cas de clique sur un bouton banal, qui adopterait donc le comportement du bouton play.

Si je suis obligé de faire un import de javascript, quel bout de code minimaliste et facile à intégrer dans mon code ?

Je suis réfractaire à la syntaxe JS mais j'ai découvert une vidéo grafikart sur coffeescript qui pourrait aider à me réconcilier, ma demande est elle également faisable avec coffeescript ? Si oui à quoi cela ressemblerait il ici ?

**SylvainPV** · 24/02/2015, 11h39

Python est un bon langage mais dans ton cas, ça reste du JavaScript sous le capot. Tu peux utiliser CoffeeScript, Dart, TypeScript ou n'importe quel autre langage transpilant en JS, c'est toujours du JS à la fin parce que c'est la seule chose que le navigateur comprenne. Donc la question de la faisabilité ne se pose pas en dehors du périmètre de JavaScript.

Un élément <audio> caché et un appel à document.querySelector('audio').play(); en JavaScript devraient faire l'affaire. A transposer dans le langage de ton choix.

Pense aussi à corriger ton document HTML, à en juger par tout le rouge de la coloration syntaxique il y a de gros soucis.

**buffalo974** · 24/02/2015, 20h39

Merci sylvain c'est parfait et indolore !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
<head>
<meta charset="iso-8859-1">
<title> Mettre un titre ici</title>
    <!-- Bootstrap core CSS -->
    <link href="./static/bootstrap.min.css" rel="stylesheet">
	<script src="/static/js/brython.js"></script>
</head>
<body onLoad="brython()">
<script type="text/python">
from browser import document as doc
from browser import alert
def echo(ev):
    alert("Salut %s !" %doc["zone"].value)
doc["echo"].bind('click', echo)
</script>
<h3>
<p>
    Afficher une alerte et un son mp3 apres un click<br /><br />
    <img src="static/images/mon_image.jpg" alt="Photo de depart" />
</p>
</h3>
<!-- jQuery (necessary for Bootstraps JavaScript plugins) -->
    <script src="./static/jquery-2.1.0.min.js"></script>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./static/bootstrap.min.js"></script>
    <!-- Brython scripts
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="./static/brython_dist.js"></script>
<div>	
	<audio id="demo" src="ma_musique.mp3" width="320" height="240"></audio>
	<p>Vous vous appelez : <input id="zone"><button id="echo" onclick="document.getElementById('demo').play()">click !</button><p>
</div>
</body>
</html>

Lecture mp3 événementielle

JavaScript

Discussions similaires

Partager

Partager