Audio HTML5, gestion du son crescendo et decrescendo [Résolu]

[flobber10]

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.

[SpaceFrog]

en incrémentait une variable vol dans une boucle?

Code :

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

[flobber10]

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

?

[SpaceFrog]

Code :

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

???
sinon avec un setInterval

[danielhagnoul]

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

[flobber10]

Ah merci danielhagnoul, le bouton on avec le crescendo marche nickel
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);
	});

[SpaceFrog]

ben faut tester quand ça arrive à 0 pour pas avoir de volume négatif ... non ?

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

[SpaceFrog]

ben t'es sur qu'au depart le vol est > 99 ?

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

[SpaceFrog]

certes, mais qui te dit qu'au moment ou tu cliques sur le bouton diminuer le volume est supérieur à 99 ???

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

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

[flobber10]

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 ?

[SpaceFrog]

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

[danielhagnoul]

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

[flobber10]

c'est tout ce qu'il me fallait merci
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.

merci pour votre aide danielhagnoul et SpaceFrog.