Jouer un son au clic de la souris sur un hyperlien [RÉSOLU]

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
argos
Messages : 3
Enregistré le : 06 mars 2021, 22:49

Jouer un son au clic de la souris sur un hyperlien [RÉSOLU]

Message par argos » 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:

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>
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é:

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>
Mais je ne parviens pas à le faire fonctionner... Que manque-t-il?
Merci de votre attention.
Cordialement.
Modifié en dernier par argos le 07 mars 2021, 23:09, modifié 1 fois.

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Jouer un son au clic de la souris sur un hyperlien

Message par webmaster » 07 mars 2021, 12:41

Bonjour,

Le second script indique en error dans la console
Uncaught TypeError: Cannot set property 'onclick' of null
car il ne trouve pas l'élément .nextPage.

C'est logique car le tag est placé apres le script.
Il suffit de remonter le tag avant le script et le son est joué avant la redirection.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

argos
Messages : 3
Enregistré le : 06 mars 2021, 22:49

Re: Jouer un son au clic de la souris sur un hyperlien

Message par argos » 07 mars 2021, 20:24

Bonsoir,
Un grand merci d'avoir pris le temps de répondre.
Inutile de préciser que je ne suis pas un spécialiste de javascript et que je n'en ai qu'un besoin ponctuel, quoique? Lorsque j'entrevois tout ce qu'on peut faire, ça ouvre l'appétit! M'enfin bon, c'est sûr que pour changer un joint de robinet, il n'est pas vraiment indispensable de suivre toute une formation de plombier...
Tu dis, "remonter le tag", je présume qu'il s'agit de cette ligne?

Code : Tout sélectionner

<audio id="audiotag" src="monficherson.wav" autobuffer="autobuffer"></audio>
Le soucis c'est que si je reprends la page html ci-dessus, je constate que c'est déjà le cas. L'as-tu modifiée toi-même? Pour autant, cela ne semble pas fonctionner.
À quoi ressemblerait cette page après modification, s'il-te-plait?
Je me permets d'insister car je crois que ce script peut être très utile pour ceux qui veulent créer, comme moi, des pages dans un cadre particulier interactif, ludique et sonorisé.
Encore merci.
Cordialement.

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Jouer un son au clic de la souris sur un hyperlien

Message par webmaster » 07 mars 2021, 21:38

Je parlais du tag

Code : Tout sélectionner

<a href="http://www.google.com/" class="nextPage">Next page</a>
Il faut le mettre au dessus de la partie script.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

argos
Messages : 3
Enregistré le : 06 mars 2021, 22:49

Re: Jouer un son au clic de la souris sur un hyperlien

Message par argos » 07 mars 2021, 23:06

Ah ok merci, tout est juste et parfait!
Je marque comme [RÉSOLU].
Bonne continuation.
Cordialement.


Répondre