加载声音转音频标签，稍后播放

Question

我有一个页面，我需要在特定的实例上播放声音(音频标签或js Audio对象)。音频文件位置不在我的本地The服务器中，它在另一台服务器上，像'https://site.com/folder/file.wav‘一样被访问

我需要在页面加载时访问和加载这个文件，并且需要在没有延迟的情况下播放它。正在下面添加我当前的代码

<script> 
var player = new Audio();

$(document).ready(function () {
player.src = 'https://site.com/folder/file.wav';
});

function play()
{
player.play();
}
</script>

我现在面临的问题是，如果我在一台有WIFI的电脑上运行它，它会及时播放；但如果我在我的android手机上运行它，它会在3-5秒后播放。

请给我建议。

Answer 1

我认为您需要推迟显示页面，直到加载了足够多的音频以允许其播放(请参阅this answer)。

下面这样的内容应该足以让你入门：

// Hide the page until the audio has loaded. 
// You might want to display some kind of preloader graphic 
// while the user waits.
var $body = $('body').css('display', 'none');

$(document).ready(function () {

    var player = new Audio();

    // canplaythrough event is fired when enough of the audio has downloaded
    // to play it through at the current download rate
    player.addEventListener('canplaythrough', audioLoadedHandler);


    function audioLoadedHandler(e) {
        // Audio has loaded, show the page
        $body.css('display', 'block');
        // And start the audio
        player.play();
    }       

    player.src = 'https://site.com/folder/file.wav';
});