bouton qui lance une fonction javascript [Résolu]

[tanny33]

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.

[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'.

[tanny33]

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">

[NoSmoking]

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>

[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?

[NoSmoking]

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

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

visiblement il suffit de cliquer dessus!

[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/

[nadox]

Bonjour,
je crois que la variabla 'audio' n'existe pas. Il s'agit surement de 'a' qu'il faut utiliser ?

[tanny33]

J'ai essayé

Code :

a.playPause()

et même

Code :

a.audio.playPause()

(au cas ou) mais cela ne fonctionne toujours pas...

[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.

[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

[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 #...

[NoSmoking]

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...

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
});

[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.

[NoSmoking]

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

[tanny33]

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?

[NoSmoking]

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();
          }
        })
      });

[tanny33]

Merci beaucoup !! Ca marche désormais !

Vraiment bravo !