1

我想在用户单击图像时播放声音。我正在使用 SoudManager 插件。

在这里你可以检查我在做什么：

soundManager.setup({
        url: 'swf',
        onready: function() {
            soundCarro = soundManager.createSound({
                id: 'soundCarro',
                url: 'sound/carro_camona.mp3'
            });
            soundMoto = soundManager.createSound({
                id: 'soundMoto',
                url: 'sound/moto_camona.mp3'
            });
            soundNautico = soundManager.createSound({
                id: 'soundNautico',
                url: 'sound/nautico_camona.mp3'
            });
        }
    });

如您所见，我创建了 3 个声音对象（soundCarro、soundMoto 和 soundNautico）。

这里是动作，当用户单击它时，会调用 scrollTo 函数：

<img id="ca" class="ca logo" onclick="scrollTo('secao-carros',true);" src="images/svg/CAhome.svg">

在这里你可以看到 scrollTo 函数：

function scrollTo(target,sound){
    if(sound){

        var delay = 0;

        if(target == 'secao-carros'){
            soundCarro.play();
            delay = 700;
            duration = 750;
        }

        if(target == 'secao-motos'){
            soundMoto.play();
            delay = 900;
            duration = 750;
        }

        if(target == 'secao-nauticos'){
            soundNautico.play();
            delay = 850;
            duration = 2000;
        }

        $('html, body').delay(delay).animate({ scrollTop: $('#'+target).offset().top }, {duration: duration});
    }else{
        $('html, body').animate({ scrollTop: $('#'+target).offset().top }, {duration: 750});
    }
}

如您所见，在此函数中，我执行创建的声音对象（例如：soundNautico.play();）。

问题是，在 iPad 和 Android 设备上，这种声音的执行会有很大的延迟，但在桌面浏览器中它可以完美运行！

我怎样才能防止这种延迟？

4

1 回答 1

1

这是因为桌面浏览器会预加载音频，因此当您调用.play()浏览器时，它会立即开始播放，因为它已经缓冲了一些（如果不是全部）音频。

我知道 iOS 和大多数其他移动浏览器将 A) 一次只允许您播放一个音频文件，B) 根本不允许您缓存音频，并且 C) 只允许您初始化/播放音频对象，如果用户在同一个调用堆栈上物理启动了操作。因此，如果您不想延迟，您基本上就不走运了。

编辑：您可以向音频添加一个事件侦听器，并且仅在音频缓冲后触发滚动。但是，您一次不能加载多个声音。

audio.addEventListener("canplay", function(e) {
  doScroll();
  audio.play();
}, false);

```

于 2013-05-03T18:34:42.507 回答