使用JavaScript在html5自定义播放器中加载音频时加载/缓冲文本

我找到了一个定制的html5音频播放器，并成功地对其进行了重新设计，现在我想在播放器加载音频时添加一个“加载/缓冲”文本（否则用户可能会发疯，因为他们点击播放后什么也没发生）

下面是要解释的代码：

函数calculateTotalValue（长度）{
var分钟=数学楼层（长度/60），
秒=长度-分钟*60，
seconds\u str=seconds\u int.toString（），
秒=秒（0,2），
时间=分钟+'：'+秒
返回时间；
}
函数calculateCurrentValue（currentTime）{
var current_hour=parseInt（currentTime/3600）%24，
当前分钟=parseInt（当前时间/60）%60，
当前秒长=当前时间%60，
current_seconds=current_seconds_long.toFixed（），
当前时间=（当前分钟<10？“0”+当前分钟：当前分钟）+“：”+（当前秒<10？“0”+当前秒：当前秒）；
返回当前时间；
}
函数initProgressBar（）{
var player=document.getElementById（'player'）；
变量长度=player.duration
var current_time=player.currentTime；
//计算值的总长度
var totalLength=计算总价值（长度）
jQuery（“.end time”）.html（总长度）；
//计算当前值时间
var currentTime=calculateCurrentValue（当前时间）；
jQuery（“.start time”）.html（currentTime）；
var progressbar=document.getElementById（'seekObj'）；
progressbar.value=（player.currentTime/player.duration）；
progressbar.addEventListener（“单击”，查找）；
if（player.currentTime==player.duration）{
$（“#播放btn”）.removeClass（'pause'）；
}
函数搜索（evt）{
var百分比=evt.offsetX/此.offsetWidth；
player.currentTime=百分比*player.duration；
progressbar.value=百分比/100；
}
};
函数initPlayers（num）{
//如果有多个音频播放器，例如“播放器”+i，则传入num
对于（变量i=0；i您可以使用循环浏览不同的“加载”文本，并在玩家的游戏结束时使用

以下是一个基本示例：

var dots = 1;
var loading = setInterval(function(){ 
  dots = (dots % 3) + 1;
  $(".start-time").text("Loading" + Array(dots + 1).join("."));
  console.log($(".start-time").text());
}, 250);

player.play().then(function() {
  clearInterval(loading); 
}).catch((error) => {
  $(".start-time").text("Error loading");
});

您可以使用音频播放器的“readyState”事件显示隐藏加载。
甚至已经有一个“SetInterval”被触发，因此我们可以添加此代码来显示/隐藏“加载”

首先添加加载元素（您可以将其放置在任何需要的位置”

在此之后，在“initProgressBar（）”函数中用以下代码替换“jQuery（“.start time”）.html（currentTime）；”

 if (player.readyState === 4) {
    jQuery(".start-time").html(currentTime);
  }

因此，它将如何工作，当您单击播放按钮时，开始时间文本将显示为“正在加载”，但一旦文件已加载且播放器已准备好播放，文本将更改为“开始时间”，希望它能工作。还更新了，以便更好地理解

你可以在
中找到完整的代码，我想我明白了，但我在开始时的主要问题是如何在相同的代码中工作：状态一：在开始时间“span”没有显示任何内容；步骤二：用户点击播放-加载文本在开始时间显示“span”加载媒体时；状态三：媒体已加载，播放时间值显示在开始时间“span”中。我需要对现有JS进行“轻”调整，因为在用户点击播放之前，开始时间“span”是的，只要在您的togglePlay方法的else块中使用我的代码，您就会得到预期的结果。如果承诺解决得太快，您可能在单击“播放”时看不到加载。请尝试加载一个更大的文件。这正是我告诉您的“加载”正在更改为00:00（归零）时间值，然后在一段时间内什么都没有发生，用户可能会认为播放器是堆栈，因此我希望“加载文本”将显示，直到开始计时器开始倒计时（直到用户听到播放器实际播放音乐）。@DéricDallaireYes，当文件加载时，“加载”文本出现。考虑到文件加载速度很快，加载并不总是有时间显示，因为它会立即启动。我修改了代码笔，以模拟一个需要5秒才能加载的文件。更好地掌握承诺在javascript中的工作方式非常重要。在播放器的上下文中，承诺“播放开始时完成，或者由于任何原因无法开始播放时被拒绝。”我在手机上再次打开了你的密码笔，这次它卡在加载循环上，播放按钮更改延迟。你在我之前的评论后更改了什么吗？（测试了原始代码-它现在在我的手机上运行良好）@Déricdalaire你着火了！@Shubham，这正是我想要的！非常感谢你的帮助。是否可以将其放入开始时间范围，并且只有在加载文本消失后才会显示计时器？@ShubhamMaybe我在之前的评论中应该更具体一些，我是说两个计时器都只有在加载完成后才会显示还有我
if(player.readyState>0&&player.readyState<4){
    $("#loading").show();
  }
  else{
    $("#loading").hide();
  }

$(".start-time").html("Loading...");

 if (player.readyState === 4) {
    jQuery(".start-time").html(currentTime);
  }