如何为鼠标悬停音频添加延迟（悬停时声音）

Question

您好，我试图找出如何将鼠标停留10秒延迟以开始播放音频？

以下是我一直在使用的代码。

＆＃13;

＆＃13;

import six
import numpy

x = "1 3\n 4.5 8"
numpy.genfromtxt(six.StringIO(x))

＆＃13;

function PlaySound(soundobj) {
  var thissound = document.getElementById(soundobj);
  thissound.play();
}

function StopSound(soundobj) {
  var thissound = document.getElementById(soundobj);
  thissound.pause();
  thissound.currentTime = 0;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您希望事件跟踪超时以及音频是否正在播放，您可以尝试此操作。

function MouseAudio(element, audio) {
  this.div = element;
  this.audio = audio;
  this.timeout = null;

  this.init();
}

MouseAudio.prototype.init = function() {
  var self = this;

  this.div.addEventListener('mouseover', function(event) {
    console.log('moused over - timeout set');

    if (self.timeout) {
      clearTimeout(self.timeout);
    }

    self.timeout = setTimeout(function() {
      console.log('playing sound');
      self.audio.play();
      self.timeout = null;
    }, 10000);
  });

  this.div.addEventListener('mouseout', function() {
    if (self.timeout) {
      console.log('moused out - timeout cancelled');
      clearTimeout(self.timeout);
      self.timeout = null;
    } else if (!self.audio.paused) {
      console.log('moused out - pausing sound');
      self.audio.pause();
      self.audio.currentTime = 0;
    }
  });

  this.div.addEventListener('click', function() {
    if (self.timeout) {
      console.log('clicked - timeout cancelled');
      clearTimeout(self.timeout);
      self.timeout = null;
    } else if (!self.audio.paused) {
      console.log('clicked - pausing sound');
      self.audio.pause();
      self.audio.currentTime = 0;
    }
  });
};

var mouseAudio = new MouseAudio(document.getElementById('div'), document.getElementById('audio'));

#div {
  background: grey;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

<div id="div">Click Me</div>
<audio id="audio" src="http://anything2mp3.com/system/files/mstr1/Rick%20Astley%20-%20Never%20Gonna%20Give%20You%20Up_dQw4w9WgXcQ_youtube.mp3"></audio>

Answer 2

您可以添加超时，该超时将在一定的毫秒数后自行调用。

function PlaySound(soundobj) {
  setTimeout(function() {
    var thissound = document.getElementById(soundobj);
    thissound.play();
  }, 10 * 1000);
}