Question

我想在页面上的所有标签移动到另一个页面之前给它点击声音。

我可以轻松地使用标签播放点击声音..但它不能正常工作，因为在听到声音之前页面已经移动到链接页面。

播放声音的代码如下：

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

$('#menu li a').click(function(e) {
e.preventDefault(); // If I use this, it doesn't goes to another page. But I can here the sound. I want to play the sound and the link both.
var sound = $("#audio");
sound.get(0).play();
});

任何提示都会非常感激。感谢。

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

您需要添加延迟，然后仍然转到您想要的页面。

$('#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 3

您必须在控制转到其他页面之前停止页面。为此使用return false（停止页面）并返回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>

Answer 4

以下是您需要的...这将播放音频，一旦音频播放完毕，就会转到目标位置......

<强> 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);
});

代码每秒检查一次音频的状态，你可以更改超时的值来检查频率。

点击<a> tag before it moves to another page</a>上的声音

4 个答案: