Audio HTML5, gestion du son crescendo et decrescendo

Version imprimable

Bonjour.

Sur mon projet actuel en Ajax, une ambiance sonore est générée comme ceci :
Code:

1 2 3 <audio src="music.mp3" id="music" autoplay="activate" loop="activate"> Your browser does not support the audio element. </audio>
dans le footer et
Code:

1 2 3 4 5 6 7 8 9 10 11 //gestion de la musique $('#musicOff').click(function() { $('#music').get(0).pause(); $(this).toggleClass('active'); $('#musicOn').toggleClass('active'); }); $('#musicOn').click(function() { $('#music').get(0).play(); $(this).toggleClass('active'); $('#musicOff').toggleClass('active'); });
dans le fichier de script en Javascript.

Sur l'une des pages, j'ai ajouté un player vidéo et j'ai fait en sorte que le son se coupe lors de la lecture de la vidéo et qu'il revienne une fois la vidéo sur pause ou terminée.
Or pour que le changement de son soit moins aggressif, il m'est demandé de couper le son du site et de le faire revenir en crescendo. Et je ne trouve aucune info sur le net...

Quelqu'un aurait-il une solution à me proposer ?

Merci d'avance.

22/06/2011, 13h53
SpaceFrog
en incrémentait une variable vol dans une boucle?
Code:

1 2 $('#music').get(0).volume=vol;

quelque chose comme ça :

Code:

1
2
3
4
5
6
7
8
$('#musicOn').click(function() {
        //$('#music').get(0).play();
		$(this).toggleClass('active');
		$('#musicOff').toggleClass('active');
		for (i=0; i<=100; i++){
			$('#music').get(0).volume=i;
		};
    });

22/06/2011, 14h46
SpaceFrog

Code:

$('#music').delay(500*i).get(0).volume=i;

???
sinon avec un setInterval

Bonsoir

<audio id="music" src="Sérénad.mp3" controls="controls"></audio>.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// console.log($("#music")[0]);
 
var volMusicInterval = null,
	volIncrease = function(){
		var elem = $("#music")[0];
 
		if (elem.volume < 1){
			elem.volume = elem.volume + 0.20;
		} else {
			clearInterval(volMusicInterval);
		}
 
		// console.log(elem.volume);
	};
 
$("#music").click(function(){
	this.volume = 0.20;
 
	volMusicInterval = setInterval(volIncrease, 2000);
});

Ah merci danielhagnoul, le bouton on avec le crescendo marche nickel :D
par contre j'ai essayé de suivre le même modèle pour le bouton off avec le decrescendo mais ça ne marche pas...
un indice pour me mettre sur la voie ?

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
//gestion de la musique
	var volMusicInterval = null,
	volIncrease = function(){
		var elem = $("#music")[0];
 
		if (elem.volume < 1){
			elem.volume = elem.volume + 0.20;
		} else {
			clearInterval(volMusicInterval);
		}
 
	};
	volDecrease = function(){
		var elem = $("#music")[0];
 
		if (elem.volume > 99){
			elem.volume = elem.volume - 0.20;
		} else {
			clearInterval(volMusicInterval);
		}
 
	};
	$("#musicOn").click(function(){
	$("#music")[0].volume = 0.20;
 
	volMusicInterval = setInterval(volIncrease, 2000);
	});
	$("#musicOff").click(function(){
	$("#music")[0].volume = 100;
 
	volMusicInterval = setInterval(volDecrease, 2000);
	});

23/06/2011, 10h20
SpaceFrog

ben faut tester quand ça arrive à 0 pour pas avoir de volume négatif ... non ?
23/06/2011, 10h22
flobber10

oui j'imagine qu'il va falloir le faire, mais avant tout il faudrait que le son diminue. Or là il ne diminue pas... il n'y a aucun effet suite au clic sur le bouton musicOff.
23/06/2011, 10h24
SpaceFrog

ben t'es sur qu'au depart le vol est > 99 ?
23/06/2011, 10h26
flobber10

le volume ne varie pas entre 0 et 100 ? Lors de mes recherches c'est ce que j'avais trouvé il me semble...
edit:
ah! à moins que ce ne soit des pourcentages et dans ce cas là alors ce n'est pas 100 dans mon cas...
23/06/2011, 10h29
SpaceFrog

certes, mais qui te dit qu'au moment ou tu cliques sur le bouton diminuer le volume est supérieur à 99 ???
23/06/2011, 10h41
flobber10
Moi car je le défini à 100 avant de lancer la fonction non ?
Code:

1 2 3 4 5 $("#musicOff").click(function(){ $("#music")[0].volume = 100; volMusicInterval = setInterval(volDecrease, 2000); });
comme pour le crescendo, même si le son est déjà lancé, on a défini le volume à 0.20 donc le volume baisse d'un coup puis augmente petit à petit grâce à la fonction volIncrease. Or vu que le volume est sencé être déjà à 0 ça ne se remarque pas.
23/06/2011, 10h42
danielhagnoul

Bonjour

J'ai testé uniquement sur Google, le volume va de 0 à 1 !

Avec l'exemple du crescendo, ce ne devrait pas être trop difficile. :mouarf:

okay merci

du coup j'ai mes deux petites fonction volIncrease et volDecrease, qui sont appelées lors du clic sur "on" ou "off". ça marche très bien...
sauf que, après avoir cliqué sur "off" et que le volume soit descendu à 0, lorsque je veux ré-augmenter le volume en cliquant sur "on" et bien les deux fonctions entrent en conflit et le volume se met donc à varier entre 0.20 et 0.
(situation inverse, d'abord "on" puis "off", le volume varie continuellement entre 0.80 et 1)
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 //gestion de la musique var volMusicInterval = null, volIncrease = function(){ var elem = $("#music")[0]; if (elem.volume < 1){ elem.volume = elem.volume + 0.20; } else { clearInterval(volMusicInterval); } }; volDecrease = function(){ var elem = $("#music")[0]; if (elem.volume > 0){ elem.volume = elem.volume - 0.20; } else { clearInterval(volMusicInterval); } }; $("#musicOn").click(function(){ $("#music")[0].volume = 0.20; volMusicInterval = setInterval(volIncrease, 200); }); $("#musicOff").click(function(){ $("#music")[0].volume = 0.80; volMusicInterval = setInterval(volDecrease, 200); });
en fait je ne comprend pas bien

Code:

clearInterval(volMusicInterval);

ça sert à quoi concrêtement ?
il n'y aurait pas un moyen de dire a la fonction de s'arrêter totalement après le setInterval ?

24/06/2011, 09h23
SpaceFrog

Citation:

Code:

clearInterval(volMusicInterval);

ça sert à quoi concrêtement ?
il n'y aurait pas un moyen de dire a la fonction de s'arrêter totalement après le setInterval ?

Tu t'es répondu tout seul

Bonjour

Que donne le code suivant ?

Attention à l'écriture du code, faire la distinction entre la virgule (on continue la déclaration des variables) et le point-virgule (on termine la déclaration des variables).

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
var increaseVolMusicInterval = null,
	decreaseVolMusicInterval = null,
	volIncrease = function(){
		var elem = $("#music")[0];
		
		if (elem.volume < 1){
			elem.volume = elem.volume + 0.20;
		} else {
			clearInterval(increaseVolMusicInterval);
		}
		
	},
	volDecrease = function(){
		var elem = $("#music")[0];
		
		if (elem.volume > 0.20){
			elem.volume = elem.volume - 0.20;
		} else {
			clearInterval(decreaseVolMusicInterval);
		}
		
	};

$("#musicOn").click(function(){
	$("#music")[0].volume = 0.20;
	increaseVolMusicInterval = setInterval(volIncrease, 2000);
	return false;
});

$("#musicOff").click(function(){
	$("#music")[0].volume = 0.80;
	decreaseVolMusicInterval = setInterval(volDecrease, 2000);
	return false;
});

24/06/2011, 13h00
flobber10

c'est tout ce qu'il me fallait merci :ccool:
j'ai réduit la vitesse à 500.

Maintenant il ne me reste plus qu'à intégrer ce code dans celui du lecteur vidéo pour que ce crescendo et decrescendo s'activent quand on lance ou arrête la vidéo. J'ai fait des essais non concluants pour l'instant mais je vais persévérer. :aie:

merci pour votre aide danielhagnoul et SpaceFrog. :)