jquery - 在标签移动到另一个页面之前单击标签上的声音

Answer 1

尝试这个。

  $('#menu li a').click(function (e) {
       e.preventDefault();
       var sound = $("#audio");
       sound.get(0).play();

       setTimeout(function () {
           window.location.href = $(this).attr('href');
       }, 3000);

   });

Answer 2

Here is what you need... this will play the audio and once the audio finishes playing, goes to the target location...

HTML

<audio id="audio" hidden>
    <source src="./sound/sound.mp3" type="audio/mpeg">
</audio>

<div id="menu">
    <li>
        <a href="http://www.google.com">Click to play...</a>
    </li>
</div>

jQuery

var target;

function checkAudio() {
    if($("#audio")[0].paused) {
        window.location.href  = target;
    } else {
        setTimeout(checkAudio, 1000);
    }
}

$('#menu li a').click(function(e) {
    e.preventDefault();

    target = $(this).attr('href');

    console.log("Let's play");

    var sound = $("#audio");
    sound.get(0).play();

    setTimeout(checkAudio, 1000);
});

The code checks for the state of the audio each second, you can change the value of timeout to check less frequently.

Answer 3

您需要添加延迟并仍然转到您想要的页面，您可以这样做。

$('#menu li a').click(function(e) {
          var destination = $(this).attr('href');
             e.preventDefault();
             var sound = $("#audio");
           sound.get(0).play();
 setTimeout(function() { window.location.href = destination; }, 1000);
    });

只需设置声音的时间或您要等待的时间。

Answer 4

在控制转到另一个页面之前，您必须停止该页面。为此使用 return false（停止页面）和 return true（转移控件）。下面的代码可能很难看，但我认为它对你有用

<script>
   function playsound()
   {
     return false;
     var sound = $("#audio");
     if(sound.get(0).play())
       return true;

   }
</script>

并在 html

   <a href="page.html" onclick="return playsound();">element</a>