JavaScript实现歌曲名静态10分钟后替换自定义名称的技术需求

要实现这个需求，我们需要新增变量跟踪当前显示的歌曲名及其更新时间，每次获取流媒体数据时对比内容，判断是否超过10分钟未变化。以下是修改后的完整代码：

// 新增全局变量：存储当前显示的歌曲名和上次更新时间
let currentTrack = '';
let lastUpdateTime = Date.now();

window.onload = function() {

  var page = new Page;
  page.changeTitlePage();
  page.setVolume();

  var player = new Player();
  player.play();

  NowPlaying();

  // 每5秒更新一次流媒体数据
  setInterval(function() {
    NowPlaying();
  }, 5000);

  var coverArt = document.getElementsByClassName('cover-album')[0];
  coverArt.style.height = coverArt.offsetWidth + 'px';

}

// 获取当前歌曲并处理静态名称替换逻辑
function NowPlaying() {
  $.ajax({
    url: PROXYURL + URL_STREAMING3,
    type: "GET",
    success: function(result) {
      const trimmedResult = result.trim();
      const now = Date.now();
      const tenMinutesInMs = 10 * 60 * 1000; // 10分钟的毫秒数

      if (trimmedResult !== '') {
        // 对比新结果和当前存储的歌曲名
        if (trimmedResult === currentTrack) {
          // 检查是否超过10分钟未变化
          if (now - lastUpdateTime >= tenMinutesInMs) {
            $("#currentSong").html('DJ OsiriS in Session');
            // 更新变量，避免重复触发替换逻辑
            currentTrack = 'DJ OsiriS in Session';
            lastUpdateTime = now;
          }
        } else {
          // 歌曲名变化，更新DOM和跟踪变量
          $("#currentSong").html(trimmedResult);
          currentTrack = trimmedResult;
          lastUpdateTime = now;
        }
      } else {
        // 流媒体数据为空时直接替换
        $("#currentSong").html('DJ OsiriS in Session');
        currentTrack = 'DJ OsiriS in Session';
        lastUpdateTime = now;
      }
    }
  });
}

关键修改说明： #

• currentTrack：存储当前显示的歌曲名，用于和每次返回的新数据做对比
• lastUpdateTime：记录歌曲名最后一次变化的时间戳，用来计算时间差
• AJAX回调内的逻辑：
  1. 先对返回结果做去空格处理，避免空白字符干扰对比判断
  2. 若新结果和当前歌曲名一致，检查时间差是否超过10分钟，满足条件则替换为指定文本并更新跟踪变量
  3. 若新结果不同，直接更新DOM内容和跟踪变量
  4. 保留原有空结果时的替换逻辑，同时同步更新跟踪变量

这样就能解决广播软件无法发送元数据导致的静态歌曲名问题，10分钟未变化时自动切换到自定义文本。

内容的提问来源于stack exchange，提问作者Juan