Question

基本问题 是否有网页音频播放器会在页面加载后立即缓冲（下载）整个音频文件，并在一页上对多个音频文件执行此操作？

更多信息 我正在使用自己构建的网络应用进行现场表演。一些表演者在表演时有想要播放的音轨（例如：魔术表演的音乐）。

在声音棚中提示音乐的家伙当前在他前面有我的Web应用程序（只是一个jQuery php网页），以便他可以看到行为的运行顺序。在演出之前，他需要阅读电子邮件并下载已发送给他的所有音轨。因此，他正在快速播放曲目，然后跳到chrome浏览笔记和内容。

我希望表演者可以将曲目上载到我的应用程序中，然后，音响棚的家伙可以直接从chrome播放它们。唯一要注意的是，我想确保这些曲目在放映前已完全下载，以使音乐不会在放映中消失。

我的表演者是无法预料的，并且不需要复杂的过程，我不希望他们都将音轨放到soundcloud之类的东西上。我希望能够接收mp3，aif或其他任何内容。

Answer 1

下载音频

因此，如果将其放入Jquery $（document）.ready（）函数中（页面加载时），这看起来是可能的。原始代码感谢this SO post。有关此other SO post的更多信息。

// 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(); // Or do whatever now that you have the audio
    }       

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

设置player.src后，将尝试加载音频。

因此，您需要做的是创建一个播放器数组，以及它们的源位置数组（例如，一些音频托管网站/服务-如果您不使用其他任何内容，则为保管箱）并在页面加载时进行迭代。这样，您的用户可以手动上传到托管服务，或者您的网站可以使用托管服务的API（saving to dropbox from js）来解决此问题。

跟踪音频

由于您将使用多个文件，并且用户将上传更多即时消息，因此最好保留每个文件的所有网站源位置列表（因为否则您将不知道哪个src位置/要加载的文件名）。

实现此目的的一种解决方案是存储php服务器端，并使用AJAX请求来获取一个全局对象，该对象包含网页加载时（加载音频之前）所需的有关音频文件的任何信息。

一个例子可能是：

$.ajax({
    type: "POST",
    url: 'server.php',
    dataType: 'json',
    data: {"data":"check"},
    success: function(data){

        var audioPlayersMetadata = $.parseJSON(data);

        for(var i = 0; i < audioPlayersMetadata.nPlayers; i++){
          audioPlayers[i].src = audioPlayersMetadata.playerSrc[i];
        }

    }
 });

假设您在PHP代码中创建了一个带有nPlayers参数和一个playerSrc数组参数的JSON对象。

例如，每次您想要加载新的音频文件时，都必须以类似的方式进行相同的操作。但这一次发送请求添加到playerSrc数组，并将nPlayers加1。

这些只是我的建议，但希望它能使您更接近目标；现在应该对播放前的下载音频进行排序！

PS。如果只有一个人使用它，那么构建编译的应用程序更值得吗？您甚至可以使用electron,js用JS / HTML / CSS编写它，这将使您可以完全在本地存储文件。

jQuery缓冲整个音频文件并准备播放

1 个答案:

下载音频

跟踪音频