Jouer un son lorsque je clique sur un hyperlien

argolance Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
argolance Messages postés 15 Date d'inscription Statut Membre Dernière intervention - 7 mars 2021 à 23:20

Bonjour,
Casse-tête chinois... Voilà quelques jours que j'essaie en javascript de jouer un son lorsque je clique sur un hyperlien de ma page web. Je parviens à avoir ou l'un ou l'autre: j'ai le lien vers l'url mais je n'ai pas le son, ou bien j'ai le son, mais le lien est mort. Comment avoir les deux en même temps ou du moins l'un après l'autre, genre d'abord le son puis l'affichage de la page immédiatement après que la diffusion du son soit achevée? J'ai cherché dans tous les sens sans parvenir à faire quelque chose qui marche...
Merci de votre attention.

A voir également:

Jouer un son lorsque je clique sur un hyperlien
Jouer a pokemon sur android - Guide
Comment jouer a star citizen - Guide
Comment jouer à minecraft à deux sur la même switch - Forum Nintendo Switch
Jouer zuma - Télécharger - Jeux vidéo
Minecraft jouer à deux - Forum Jeux PC

8 réponses

Réponse 1 / 8

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour

À la limite tu peux déclencher la lecture du son lors du clic sur ton lien puis grâce à un settimeout mettre une temporisation avant que ça ne déclenche la redirection vers la page.

Réponse 2 / 8

argolance Messages postés 15 Date d'inscription Statut Membre Dernière intervention 37

Merci Jordane de ta réponse (inutile de préciser que je ne suis pas du tout un spécialiste du javascript et que j'en ai juste besoin très ponctuellement sur les toutes premières pages d'un site personnel).
Parmi toutes celles que j'ai trouvées sur le net, voici une des possibilités, dont certaines sont beaucoup plus complexes mais sans pour autant être plus efficace - sans doute parce que je commets des erreurs dans l'adaptation que j'essaie d'en faire...

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Test son</title>
 </head>
 <body>
  <audio id="audio" src="monfichier.mp3" autostart="false"></audio>
  <button onclick="playSound();URL();">Play</button>
  <script>
    function playSound(){
     var sound = document.getElementById("audio");
     sound.play();
   };
   function URL(){
    location.href = 'http://google.com'();
   }
  </script>
 </body>
</html>

EDIT : Correction des balises de code : ajout du LANGAGE

Cordialement.

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Tu ne dois pas lancer tes deux fonctions en même temps ......
Mais :
Lancer la fonction playSound()
et DANS cette fonction .. ajouter un setTimeOut qui lancera ta fonction URL() après un certain temps
https://www.w3schools.com/jsref/met_win_settimeout.asp

Réponse 3 / 8

argolance Messages postés 15 Date d'inscription Statut Membre Dernière intervention 37

Bonjour,
Quelque chose comme ça?

  [...]
<button onclick="playSound();">Play</button>
  <script>
     function playSound(){
     var sound = document.getElementById("audio");
     sound.play();
     setTimeout(window.location.replace('http://google.com'), 1000);
   };
  </script>
  [...]

J'ai déjà exploré quelques voies de ce genre mais je ne suis arrivé à rien sauf sur la page de google... sans le son!
Cordialement.

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

1000 c'est une seconde... c'est peut être un peut court ...
Il faudrait déjà t'assurer que le son se joue

Commence par ça et dis moi ce que ça fait

 function playSound(){
     var sound = document.getElementById("audio");
     sound.play();
     setTimeout(function(){
        alert('Redirection..');
        window.location.replace('http://google.com');  
      }, 1000);
   }

PS: A l'avenir, merci de préciser le LANGAGE dans les balises de code pour avoir la coloration syntaxique.
Explications à lire ENTIEREMENT disponibles ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Réponse 4 / 8

argolance Messages postés 15 Date d'inscription Statut Membre Dernière intervention 37

Bonjour,
J'ai finalement trouvé cette formule qui fonctionne, au moins sur Firefox.
Merci pour ton aide précieuse. Le lien que tu as donné ci-dessus a été déterminant.


<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Test son</title>
 </head>
 <body>
  <audio id="audio" src="monficher.wav" autostart="false"></audio>
    <button onclick="playSound();">Play</button>
  <script>
     function playSound(){
     var sound = document.getElementById("audio");
     sound.play();
     var url = setTimeout(URL, 3000);
}
  function URL(){
  location.href = 'http://google.com';
}
  </script>
  <br>
  <a href="javascript:playSound();">Page suivante/next page...</a>
 </body>
</html>

Il y a peut-ètre plus propre?
Cordialement.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

argolance Messages postés 15 Date d'inscription Statut Membre Dernière intervention 37

Suite...
La même chose, pour ceux que ça intéresse (vu que j'ai pas mal galéré pour trouver une solution à ma question) avec petits commentaires et action sur un bouton, un hyperlien et une image.

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

Réponse 6 / 8

argolance Messages postés 15 Date d'inscription Statut Membre Dernière intervention 37

... Tout à fait désolé, j'avais pas vu ta réponse plus haut... Merci pour le lien concernant le LANGAGE et les colorations syntaxiques. Oui, la valeur "1000" est évidemment courte mais modifiable en fonction de la durée du ficher son (pour un "clic" sonore par exemple, c'est suffisant!)
Encore merci Jordane pour ton aide et ta réactivité!
Cordialement.

Réponse 7 / 8

argolance Messages postés 15 Date d'inscription Statut Membre Dernière intervention 37

Bonjour,
Le code ci-dessus fait bien son travail mais, suivant le 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.
Au cours de mes recherches, je suis tombé sur le code suivant, que j'ai laissé de coté, optant pour quelque chose de relativement plus simple (pour moi!). Mais comme la faim vient en mangeant, et pour répondre aussi complètement que possible à la question que j'ai posée au départ, je crois que ce serait bien de savoir comment le faire fonctionner.
Je n'y suis perso pas parvenu...

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

Réponse 8 / 8

argolance Messages postés 15 Date d'inscription Statut Membre Dernière intervention 37

Bonsoir,
On m'a donné la solution. Il suffit de placer la ligne:

<a href="http://www.google.com/" class="nextPage">Next page</a>

avant le script js.
Cordialement.

Discussions similaires

Lien phishing android

ne pas utiliser la souris mais le clavier

comment inviter un ami a jouer a la belote

Belote.com

mail frauduleux, j'ai cliqué sur le lien

EDIT : Correction des balises de code : ajout du LANGAGE

Votre réponse

Discussions similaires