javascript - 使用 JavaScript 在 html5 自定义播放器中加载音频时加载/缓冲文本
问题描述
我找到了一个自定义的 html5 音频播放器并成功地重新设计了它,现在我想在播放器加载音频时添加一个“加载/缓冲”文本(否则用户可能会因为点击播放后没有任何反应而吓坏了)。
这是解释的代码:
function calculateTotalValue(length) {
var minutes = Math.floor(length / 60),
seconds_int = length - minutes * 60,
seconds_str = seconds_int.toString(),
seconds = seconds_str.substr(0, 2),
time = minutes + ':' + seconds
return time;
}
function calculateCurrentValue(currentTime) {
var current_hour = parseInt(currentTime / 3600) % 24,
current_minute = parseInt(currentTime / 60) % 60,
current_seconds_long = currentTime % 60,
current_seconds = current_seconds_long.toFixed(),
current_time = (current_minute < 10 ? "0" + current_minute : current_minute) + ":" + (current_seconds < 10 ? "0" + current_seconds : current_seconds);
return current_time;
}
function initProgressBar() {
var player = document.getElementById('player');
var length = player.duration
var current_time = player.currentTime;
// calculate total length of value
var totalLength = calculateTotalValue(length)
jQuery(".end-time").html(totalLength);
// calculate current value time
var currentTime = calculateCurrentValue(current_time);
jQuery(".start-time").html(currentTime);
var progressbar = document.getElementById('seekObj');
progressbar.value = (player.currentTime / player.duration);
progressbar.addEventListener("click", seek);
if (player.currentTime == player.duration) {
$('#play-btn').removeClass('pause');
}
function seek(evt) {
var percent = evt.offsetX / this.offsetWidth;
player.currentTime = percent * player.duration;
progressbar.value = percent / 100;
}
};
function initPlayers(num) {
// pass num in if there are multiple audio players e.g 'player' + i
for (var i = 0; i < num; i++) {
(function() {
// Variables
// ----------------------------------------------------------
// audio embed object
var playerContainer = document.getElementById('player-container'),
player = document.getElementById('player'),
isPlaying = false,
playBtn = document.getElementById('play-btn');
// Controls Listeners
// ----------------------------------------------------------
if (playBtn != null) {
playBtn.addEventListener('click', function() {
togglePlay()
});
}
// Controls & Sounds Methods
// ----------------------------------------------------------
function togglePlay() {
if (player.paused === false) {
player.pause();
isPlaying = false;
$('#play-btn').removeClass('pause');
} else {
player.play();
$('#play-btn').addClass('pause');
isPlaying = true;
}
}
}());
}
}
initPlayers(jQuery('#player-container').length);
CodePen上的播放器代码(源代码)
- 我希望在加载媒体时,一些文本将显示在显示“开始时间”(请参阅 CodePen)的同一“跨度”中;
- 文本“'正在加载。' 'loading..' 'loading...'" 必须在媒体加载时循环更改;
- 当它被加载时,“加载”文本必须像现在一样在“开始时间”发生变化。
所以基本上我想在开始时间放一些文本,而它只显示零
我是 JS 新手
这就是为什么我需要一些帮助或指出正确的方向
解决方案
当玩家的游戏承诺完成时,您可以使用setInterval在不同的“加载”文本和clearInterval之间循环。
这是一个基本示例:
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");
});
推荐阅读
- graphql-flutter - 使用 graphql_flutter 很好地使用重新获取 ListView
- javascript - 如何在html表格中重置过滤器
- php - 我想检查该特定公司的班次名称是否存在?
- scala - Spark Scala:连接到模式注册表
- android - Firestore Query whereEqualto 和 Document 未从 Firestore DB 获取数据
- vim - 仅在可识别的文件类型上运行 vim 自动命令
- sql - 通过比较两个表来提取库存余额
- powerbi - Power BI 高级容量用户限制
- powerbi - 必须禁用可以进行条件格式和背景的甜甜圈计
- javascript - 为什么原型对象不改变?