Jouer un son au clic de la souris sur un hyperlien [RÉSOLU]
Posté : 06 mars 2021, 23:16
Bonjour,
J'utilise le code ci-dessous, parfaitement fonctionnel, qui permet de jouer un son (ex: un clic) lorsqu'on clique sur un bouton, un hyperlien ou une image, et d'accéder à une nouvelle page dans la foulée:
Le problème c'est que, suivant la durée du fichier son et sans doute la configuration logicielle et matérielle du visiteur, il y a soit latence entre le clic et le chargement de la page, soit le flux est tronqué et la page chargée trop vite.
Pour y remédier, j'ai cherché et trouvé le code suivant sur le net (sitepoint.com), qui est censé permettre de surveiller la diffusion d'un fichier son et de ne déclencher l'accès à la page appelée que lorsque le son est terminé:
Mais je ne parviens pas à le faire fonctionner... Que manque-t-il?
Merci de votre attention.
Cordialement.
J'utilise le code ci-dessous, parfaitement fonctionnel, qui permet de jouer un son (ex: un clic) lorsqu'on clique sur un bouton, un hyperlien ou une image, et d'accéder à une nouvelle page dans la foulée:
Code : Tout sélectionner
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test son sur bouton, hyperlien et image</title>
</head>
<body>
<audio id="audio" src="monfichierson.wav" autostart="false"></audio>
<!--Bouton-->
<button onclick="playSound();">Play</button>
<!--Note: la valeur 3000 correspond à la durée approximative du fichier son-->
<script>
function playSound(){
var sound = document.getElementById("audio");
sound.play();
var url = setTimeout(URL, 3000);
}
function URL(){
location.href = 'http://google.com';
}
</script>
<br>
<!--Hyperlien-->
<a href="javascript:playSound();">Page suivante - Next page</a>
<br>
<!--Image-->
<img src="monfichierimage.jpg" onclick="playSound();">
</body>
</html>Pour y remédier, j'ai cherché et trouvé le code suivant sur le net (sitepoint.com), qui est censé permettre de surveiller la diffusion d'un fichier son et de ne déclencher l'accès à la page appelée que lorsque le son est terminé:
Code : Tout sélectionner
<!DOCTYPE html>
<html>
<head>
<title>Testing buttons</title>
</head>
<body>
<audio id="audiotag" src="monficherson.wav" autobuffer="autobuffer"></audio>
<script>
function play_single_sound(target) {
document.getElementById(target).play();
}
function newPage(url) {
location.href = url;
}
function playThenRedirectTo(audioTarget, url) {
var time = 0;
play_single_sound(audioTarget);
setInterval(function (){
var end = document.getElementById(audioTarget).played.end(0);
if (end > time) {
time = end;
} else {
newPage(url);
}
}, 250);
}
document.querySelector('.nextPage').onclick = function (evt) {
evt = evt || window.event;
playThenRedirectTo('audiotag', this.href);
// prevent the link from being followed, until we want to later on
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
}
</script>
<a href="http://www.google.com/" class="nextPage">Next page</a>
</body>
</html>Merci de votre attention.
Cordialement.