Question

我正在寻找一种解决方案，可以让我在长按图像时播放声音文件。

我看到了很多针对桌面的解决方案（当悬停图片或div时），但是在流行浏览器的移动设备上没有任何效果。

该图片也是一个链接，因此点击它时，它应该转到链接。按下长按时，它应播放声音。

我测试了这个教程： http://middleearmedia.com/demos/webaudio/playsoundbuffer.html

还有这一个： http://allwebco-templates.com/support/S_audio_onmouseover.htm

还有： Play sound on hover with image

但是没有一个允许我悬停在Chrome手机上，只是标记了图像，但声音没有播放。

有关此事的任何解决方案吗？

这是我的网站： http://www.tenehealth.info/

您可以在桌面上看到移动悬停。

Answer 1

http://jsbin.com/lunaqaq/3/edit?html,js,output

var start = 0;
var mils = 1000;

$('a.selector')
.mousedown(function () {
  // Start the timer on mousedown.
  start = Date.now();
})
.mouseup(function () {
  // On mouseup, check how long it's been.
  if (Date.now() - start < mils) {
    console.log('short');
    window.location = $(this).attr('href');
  }
  else {
    console.log('long');
    $('audio#audio-player').get(0).play();
  }
})
.click(function (e) {
  // Make sure the default click behaviour doesn't happen.
  e.preventDefault();
});

Here's a tutorial I found regarding mobile audio，其中显示了一些方法。我已将elem.play()位添加到上面的代码中。

播放适合移动设备的长按声音？

1 个答案: