将声音加载到音频标签并稍后播放答案

【问题标题】：Load a sound to audio tag and play it later将声音加载到音频标签并稍后播放
【发布时间】：2014-07-08 16:14:43
【问题描述】：

我有一个页面，我需要在特定实例上播放声音（音频标签或 js 音频对象）。音频文件的位置不在我的本地网络服务器中，而是在另一个服务器上，例如“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 秒后播放。

请指教。

【问题讨论】：

标签： javascript android html audio

【解决方案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';
});

【讨论】：

只是一个查询，音频对象什么时候开始下载文件？当我们给出 URL 或其他事件时？在我的情况下，我需要加载文件，但稍后播放
当你设置了src就会开始加载。当您在音频元素上调用 play 时，它将开始播放，您可以在 canplaythrough 事件触发后随时可靠地执行此操作。