Jouer un son lorsque je clique sur un hyperlien

Fermé

argolance Messages postés 15 Date d'inscription samedi 8 juin 2013 Statut Membre Dernière intervention 15 mai 2021 - 3 mars 2021 à 20:00
argolance Messages postés 15 Date d'inscription samedi 8 juin 2013 Statut Membre Dernière intervention 15 mai 2021 - 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
Jouer au scrabble gratuit sur tablette - Télécharger - Puzzle & Réflexion
Comment jouer a star citizen - Guide
Auto clique - Télécharger - Divers Utilitaires
Évariste souhaite télécharger le logiciel libreoffice depuis le site de son éditeur. sélectionnez le résultat de recherche sur lequel il doit cliquer. ✓ - Forum Windows Vista

8 réponses

Réponse 1 / 8

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
3 mars 2021 à 22:11

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 samedi 8 juin 2013 Statut Membre Dernière intervention 15 mai 2021 37
Modifié le 4 mars 2021 à 00:00

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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
4 mars 2021 à 00:01

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 samedi 8 juin 2013 Statut Membre Dernière intervention 15 mai 2021 37
Modifié le 4 mars 2021 à 10:31

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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
Modifié le 4 mars 2021 à 10:42

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 samedi 8 juin 2013 Statut Membre Dernière intervention 15 mai 2021 37
Modifié le 4 mars 2021 à 10:53

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 samedi 8 juin 2013 Statut Membre Dernière intervention 15 mai 2021 37
Modifié le 4 mars 2021 à 11:58

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 samedi 8 juin 2013 Statut Membre Dernière intervention 15 mai 2021 37
Modifié le 4 mars 2021 à 11:56

... 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 samedi 8 juin 2013 Statut Membre Dernière intervention 15 mai 2021 37
5 mars 2021 à 10:10

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 samedi 8 juin 2013 Statut Membre Dernière intervention 15 mai 2021 37
7 mars 2021 à 23:20

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

Ma souris fonctionne mais ne clique plus

Virus Dr Guard sur mon PC

mail frauduleux, j'ai cliqué sur le lien

EDIT : Correction des balises de code : ajout du LANGAGE

Discussions similaires

Newsletters