bouton qui lance une fonction javascript

Version imprimable

Bonjour à tous,

Je fais actuellement dans le cadre d'un stage un site qui change de page par reconnaissance vocale. Le problème pour lequel je requiert votre aide est sûrement un problème très simple pour la plupart d'entre vous mais je bloque... Je souhaite créer un bouton (ou une fonction) qui cible vers un player (en l’occurrence avec le player dont le code est décrit ici : http://kolber.github.com/audiojs/docs/).

Je penssais faire une structure dans ce genre sur ma page HTML qui est liée au fichier javascript audio.js :
Code:

1 2 3 4 <form name="form1" method="post" action=""> <input type="submit" name="button" id="button" onClick="audio.play()" value="Submit"> </form>
Pour ceux qui ne voient pas le lien avec la reconnaissance vocale, ce bouton est une simplification de mon fichier en javascript qui interprète le texte reconnu (via google webkit) sur un autre frame (je ne vous ai mis qu'un extrait du code.. dite moi si vous le voulez en entier).
Code:

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 controleplayer: function(value){ if(value !== true){value = false;} //Check for autosubmit speech if(autochecked && value){ return; } var val = $speech.val(); if(val=="play"){ parent.parent.monframe.play(); } if(val=="pause"){ parent.parent.monframe.pause(); } if(val=="suivant"){ parent.parent.monframe.suivant(); } if(val=="précédant"){ parent.parent.monframe.precedant(); } return false;
Le player se recharge mais il ne se met jamais en lecture.

Merci de votre aide.

04/04/2011, 11h21
nadox

Bonjour,

Le bouton submit envoie le formulaire, ce qui recharge la page(ou frame).
Lorsqu'elle est rechargée... son contexte javascript est recréé, et la fonction n'est jamais exécutée.

Si le formulaire est important pour le rechargement du player, il faut alors que la fonction "play" soit appelé sur le chargement de la page(ou frame).
Si le rechargement n'est pas indispensable, il faut changer le bouton 'submit' par un bouton 'button'.

Merci de votre réponse rapide.

J'ai essayé de modifier mon code mais cette fois-ci, rien ne se passe (ma fonction doit être fausse...).

Voici le code qui permet d'utiliser les touches du clavier pour effectuer ce que j'essai de faire:

Code:

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
 
<script src="./MP3/jquery.js"></script> 
    <script src="./MP3/audiojs/audio.js"></script> 
    <script> 
      $(function() { 
 
        // Keyboard shortcuts
        $(document).keydown(function(e) {
          var unicode = e.charCode ? e.charCode : e.keyCode;
             // right arrow
          if (unicode == 39) {
            var next = $('li.playing').next();
            if (!next.length) next = $('ol li').first();
            next.click();
            // back arrow
          } else if (unicode == 37) {
            var prev = $('li.playing').prev();
            if (!prev.length) prev = $('ol li').last();
            prev.click();
			// spacebar
          } else if (unicode == 32) {
            audio.playPause();
          }
        })
      });
    </script>

et j'ai donc rajouter dans ce même fichier HTML le bouton:

Code:

1
2
 
<input type="button" name="Pause" id="Pause" onClick="audio.playPause()" value="Play/Pause">

04/04/2011, 19h19
NoSmoking
Citation:

Envoyé par tanny33

Je souhaite créer un bouton (ou une fonction)

il existe la balise BUTTON, elle est faite pour cela
Code:

1 2 <button id="Pause" onclick="audio.playPause()">Play-Pause</button>
04/04/2011, 20h08
tanny33

Cela ne marche toujours pas...
D'après mon message ci dessus, est-ce que ma fonction:

Code:

audio.playPause();

est correcte?

Est ce que

Code:

$(document).keydown(function(e)

joue un rôle dans le fait que les flèches et la barre d'espace marchent? Dois-je mettre quelque chose devant "audio" dans mon bouton?
04/04/2011, 22h30
NoSmoking

Citation:

Envoyé par tanny33

Est ce que

Code:

$(document).keydown(function(e)

joue un rôle dans le fait que les flèches et la barre d'espace marchent?

c'est indéniable, il est la pour cela

Citation:

Dois-je mettre quelque chose devant "audio" dans mon bouton?

visiblement il suffit de cliquer dessus!
05/04/2011, 08h43
tanny33

Bonjour,

Je suis désolé si j'ai l'air un peu bête mais cela ne marche toujours pas...

Je me suis donc inscrit sur un hébergeur gratuit afin que vous puissiez voir pas vous même si vous le desirez.. J'ai utiliser le script

Code:

<button id="Pause" onclick="audio.playPause()">Play-Pause</button>

mais cela ne fonctionne toujours pas.

voici l'adresse du site: http://tanny33.olympe-network.com/
05/04/2011, 08h56
nadox

Bonjour,
je crois que la variabla 'audio' n'existe pas. Il s'agit surement de 'a' qu'il faut utiliser ?
05/04/2011, 10h18
tanny33

J'ai essayé

Code:

a.playPause()

et même

Code:

a.audio.playPause()

(au cas ou) mais cela ne fonctionne toujours pas...
05/04/2011, 10h33
nadox

Tout le code est dans une fonction anonyme, donc toute les variables sont inconnues dans le reste de la page. Il faudrait faire comme les événements clavier pour gérer le bouton.
05/04/2011, 10h33
NoSmoking
on y voit un peu plus clair!!!!
l'appel direct sur le onclick de ton BUTTON n'est pas jouable, car audio est hors du scope à cette endroit.
Je pense qu'il est préférable d'ajouter l'événement dans la fonction d'initialisation
par exemple
Code:

1 2 3 4 $('#Pause').click(function(e) { // affichage en cours alert($('li.playing a').attr('data-src')); });
à toi de mettre ce qui va bien
05/04/2011, 11h41
tanny33

Merci beaucoup de vos réponses !

Serait t'il possible de nommer cette fonction anonyme afin que je puisse l’appeller (depuis un autre frame par exemple)?

Aussi, je débute en Javascript et je ne sais pas ce qui signifient $ et #...
05/04/2011, 12h25
NoSmoking
Citation:

Aussi, je débute en Javascript et je ne sais pas ce qui signifient $ et #...

je crois qu'il serait temps, INDISPENSABLE même, de lire la doc jQuery...

Citation:

Serait t'il possible de nommer cette fonction anonyme afin que je puisse l’appeller (depuis un autre frame par exemple)?

oui
par exemple
Code:

1 2 3 function btnAction( param){ param.playPause(); // par exemple ! }
avec une initialisation du type
Code:

1 2 3 $('#Pause').click(function(e) { btnAction( audio); // passage de l'objet audio en parametre });
05/04/2011, 14h51
tanny33

Alors, j'ai essayé les codes mais je les ai surement mal placé..

voici mon petit site mis à jour afin que vous puissiez voir la reconnaissance vocale. Il vous faut chrome beta 11 pour le voir.

http://tanny33.olympe-network.com/miniSITE.html

Ensuite, il suffit de dire "mp3" (ou de l'écrire et de cliquer sur le bouton) pour changer le frame du haut et ainsi afficher le lecteur mp3.
05/04/2011, 15h31
NoSmoking
Citation:

Alors, j'ai essayé les codes mais je les ai surement mal placé..
Code:

1 2 3 $('#Pause').click(function(e) { btnAction( audio); // passage de l'objet audio en parametre });
doit être dans la fonction d'initialisation

Plus notre conversation avance et plus j'ai l'impression d'être incapable...

Est-ce comme ceci?

Code:

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
 
<script src="./MP3/jquery.js"></script> 
    <script src="./MP3/audiojs/audio.js"></script> 
    <script>
function Init()
{
	$('#Pause').click(function(e) {
	btnAction( audio);  // passage de l'objet audio en parametre
});
}
function btnAction( param)
{
  param.playPause();
}
 
      $(function() { 
        // Setup the player to autoplay the next track
        var a = audiojs.createAll({
          trackEnded: function() {
            var next = $('ol li.playing').next();
            if (!next.length) next = $('ol li').first();
            next.addClass('playing').siblings().removeClass('playing');
            audio.load($('a', next).attr('data-src'));
            audio.play();
etc...

La fonction d'initialisation, c'est bien celle que je viens de créer, n'est ce pas?

Citation:

Envoyé par tanny33

La fonction d'initialisation, c'est bien celle que je viens de créer, n'est ce pas?

non que nenni mon brave, c'est celle ci

Code:

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
      $(function() { 
        // Setup the player to autoplay the next track
        var a = audiojs.createAll({
          trackEnded: function() {
            var next = $('ol li.playing').next();
            if (!next.length) next = $('ol li').first();
            next.addClass('playing').siblings().removeClass('playing');
            audio.load($('a', next).attr('data-src'));
            audio.play();
          }
        });
        // Load in the first track
        var audio = a[0];
            first = $('ol a').attr('data-src');
        $('ol li').first().addClass('playing');
        audio.load(first);
        // Load in a track on click
        $('ol li').click(function(e) {
          e.preventDefault();
          $(this).addClass('playing').siblings().removeClass('playing');
          audio.load($('a', this).attr('data-src'));
          audio.play();
        });
        // ACTION BOUTON ici audio est visible
        $('#Pause').click(function(e) {
          btnAction( audio);
        });
        // Keyboard shortcuts
        $(document).keydown(function(e) {
          var unicode = e.charCode ? e.charCode : e.keyCode;
             // right arrow
          if (unicode == 39) {
            var next = $('li.playing').next();
            if (!next.length) next = $('ol li').first();
            next.click();
            // back arrow
          } else if (unicode == 37) {
            var prev = $('li.playing').prev();
            if (!prev.length) prev = $('ol li').last();
            prev.click();
			// spacebar
          } else if (unicode == 32) {
            audio.playPause();
          }
        })
      });

05/04/2011, 16h14
tanny33

Merci beaucoup !! Ca marche désormais !

Vraiment bravo !