在带有css或php更改的MP3-jPlayer音频播放器上将“已用时间”更改为“剩余时间”

时间:2020-06-14 作者:audioscapist

我正在尝试将我网站上的音频播放器更改为显示;剩余时间“;而不是;已用时间;。我已经设法用CSS或php更改进行了我想要的大部分更改,但我完全被这一更改所困扰,甚至不知道这是否可行。

下面的屏幕截图显示了播放器启动时突出显示的文本。对于实际玩家,请转到https://audioscapist.net/
有人能给我指出正确的方向或建议解决方法吗
干杯。

编辑:在mozboz的帮助和大量(我指的是大量)的试用&;错误我找到了一个解决方案。在尝试将remainingDuration添加为新变量失败后,我最终在mp3-jplayer-2.7中进行了以下更改。已存在变量的js文件。将第403行更改为

jQuery(this.eID.indiM + j).empty().append(\'<span class="Smp3-tint tintmarg"></span> \' + this.Tformat(pt));

显示当前时间,到

jQuery(this.eID.indiM + j).empty().append(\'<span class="Smp3-tint tintmarg"></span> \' + this.Tformat(pt) +\'/\' + this.Tformat(tt));

显示当前时间/总时间。我将继续玩剩余时间。此外,我需要找到一种方法来减小较小屏幕上的大小。

干杯

1 个回复
最合适的回答,由SO网友:mozboz 整理而成

所以这里使用的mediaplayer是MediaElement.js. 你可以在那里阅读他们的文档。

媒体播放器有一个事件可以触发以更新时间,这在javascript中发生。你需要改变javascript或者它的工作方式,我不认为这是用CSS就能做到的。

有两个重要的代码需要您找出如何重写,首先,这里是mediaplayer连接事件以更新时间显示的代码。这是mp3-player-2.7版本。js 202线:

jQuery(this.jpID).bind(jQuery.jPlayer.event.timeupdate, function(event) {
        var lp = that.get_loaded(event);
        var ppA = event.jPlayer.status.currentPercentAbsolute;
        var pt = event.jPlayer.status.currentTime;
        var tt = event.jPlayer.status.duration;
        that.E_update(that.tID, lp, ppA, pt, tt);
    });
您可以查找e\\u update函数,因为它做了很多事情来了解发生了什么并更新显示。您会注意到,这里有一行设置“tt”和持续时间。如果我是你,我会编辑mp3播放器js文件以尝试更改上述代码,或者编辑E\\U更新函数以进行所需的更改。

如果您尝试此操作时遇到问题或需要更多帮助,请在此处答复